Add Animated Google Plus Follower Box Widget

Add Animated Google Plus Follower Box Widget

Comments: 6
data:blog.title
Google Plus

Google Plus follower box is essential to increase your Google fan like Facebook fan box. However Google has already introduced this widget for blogger. So I just modified the original traditional widget with little spice. I have keep the original widget intact and added an animated border around the widget which has hide the bottom text of the widget which is don't like by many visitors. In addition, if you mouse over on the widget then it will change color white to red. It will really attract your visitors and help to increase your Google Plus Follower. So let's proceed to the tutorial which will take less than a minute to install.


Live Demo



Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.


<style>
.bloggerspiceGplus{
    margin: 10px auto;
    background-color: #FEFEFE;
    width: 260px;
    padding: 10px 0 10px 10px;
    height: 255px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: 10px solid #E50913;
}
.bloggerspiceGplus:hover {
    border: 10px solid #A0060E;
    background-color: #E50913;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
// Google Plus Widget by www.bloggerspice.com //
</style>
<div class="bloggerspiceGplus">
<div class="g-plus" data-action="followers" data-height="280" data-href="https://plus.google.com/102331886274459115104" data-source="blogger:blog:followers" data-width="280"></div>
</div>

Customization


  • Alter 102331886274459115104 with your Google Plus ID

Speak Your Mind

Ravi Kumar says: 5/21/2013

Awesome work dude..I am using it at my blog..

Mohammad Fazle Rabbi says: 5/21/2013

thanks bro for using this widget..I just check ur blog its looking nice, u can reduce 2px width from below code for best fit

width: 260px;

Kang Farhan says: 5/21/2013

wow...nice widget friend... i will using this on my dummy blog...thanks alot

Mohammad Fazle Rabbi says: 5/22/2013

glad to hear that Mr. Farhan..thanks for using it.

Benneth Okonkwo says: 6/12/2013

uhm isn't there any cancel button on this widget?

Mohammad Fazle Rabbi says: 6/12/2013

Hi Benneth, this is not any popup widget..so cancel or close button is not necessary.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *