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

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

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;

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

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

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

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 *