Create a Sliding Google Plus Followers Box in Blogger

Google Plus is one of the biggest social networks. Just like Facebook it allows people to create a profile, community and page. Google Plus is also a great way to drive massive traffic to your blog and sharing your posts on Google Plus increases your blog chances to appear in search results. Google gives more attention to the content shared on Google Plus. If you've created your Google Plus profile and you want to increase your followers, so in this tutorial we are going to share a sliding Google plus followers box. This box slides from the right side on hover with the followers box, it'll attract your visitors and they'll definitely follow you.

Create a Sliding Google Plus Followers Box in Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Click Add a Gadget, scroll down and select HTML/JavaScript gadget from the list. Now copy the below code and paste it in the empty widget box

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnSYKQkPyhRQYd_ulRJjXy0CgyDiDFEwJbVeXgBKoqFY9f97PlSfgB1Bz-OMTnuE72K8Hvwu-Egv3uu3tR81JEqxgFAUVlomGxWdcRilYx0bLM9mXYHnR2cyehHSrPPLL3RPT0hRg-ASt-/s1600/blogolect.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 275px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 2px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/+zohaibliaqat" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">

      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
</div></div>

• Replace https://plus.google.com/+zohaibliaqat with your Google Plus Profile URL

Click Save button and you're done!

We hope this article may have helped you in Creating a Sliding Google Plus Followers Box in Blogger. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Share This:

Tags:

Google Widgets

• Prevoius
• Next