Professional Google Plus Followers Widget For Blogger With Hover Effect
Professional Google Plus Followers Widget For Blogger With Hover Effect, It changes background color as you move cursor on that followers box called hover effect, Hover on the add to circle and see the effects.
 |
| Professional Google Plus Followers Widget For Blogger With Hover Effect |
Must Read - Popular post widget for blogger.
Read This - Related Post Widget for blogger.
Demo - See my Footer
Demo - See my Footer
Google plus widget for blogger is a great gadget to increase your followers and hence get more page views on your posts and global exposure, So here is a widget with hover effects for you. We have already shared many of social media sharing widget for blogger like Google plus pop up box widget for blogger, horizontal focus social sharing widget for blogger. And, we also shared three in one Facebook,Google Plus and Twitter Pop up widget for blogger with timer. So here is another one with awesome hover effects, It is simple and fast loading purely based on CSS and HTML, After installing this widget when you move your mouse cursor on this widget it changes background color, border and gives awesome animated effects, It is coded in HTML and CSS and works in all browsers like Google chrome, Internet explorer, Mozilla Firefox and others. Below is the step by step method to add this Google plus widget to blogger with the demo. One should always use such widget because this helps in more page views for your posts because if the user likes your posts then they share it through such type of widgets and if your posts gets more sharing than it appears in Google search results and hence it increase search engine visibility of your blog. So choose the best widget for your blog and here you will get such widget.
How to add Google plus add to circle widget to blogger.
Go to blogger dashboard.
Go to layout.
Click on add a gadget.
Choose HTML/JAVASCRIPT.
Copy the below code and paste.
Now save the arrangement and you are done.
<style>
.avdhootbloggerdemo{
margin: 10px auto;
background-color: #ffffff;
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 #000000;
}
.avdhootbloggerdemo:hover {
border: 10px solid #054542;
background-image: linear-gradient(bottom, rgb(5,69,66) 13%, rgb(19,186,189) 55%);
background-image: -o-linear-gradient(bottom, rgb(5,69,66) 13%, rgb(19,186,189) 55%);
background-image: -moz-linear-gradient(bottom, rgb(5,69,66) 13%, rgb(19,186,189) 55%);
background-image: -webkit-linear-gradient(bottom, rgb(5,69,66) 13%, rgb(19,186,189) 55%);
background-image: -ms-linear-gradient(bottom, rgb(5,69,66) 13%, rgb(19,186,189) 55%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.13, rgb(5,69,66)),
color-stop(0.55, rgb(19,186,189))
);
}
// Professional google plus widget with hover effect by www.avdhootblogger.com //
</style>
<div class="avdhootbloggerdemo">
<div class="g-plus" data-action="followers" data-height="280" data-href="https://plus.google.com/104832272393711374031/posts" data-source="blogger:blog:followers" data-width="280"></div>
</div>
Customization
Place your Google Plus ID in yellow background color text, I have inserted my google plus id here to show you the real effects.
More Blogger Widgets
If you like this professional Google plus widget for blogger with hover effects, Please share it and comment, We do like comments.
