Blogger Follow Button Like WordPress

WordPress.com is known as a free subdomain provider for newbies.It has not so many features like self-hosted WordPress.com.But it is still a choice of people who start their blogging journey because it is free and easy to use.I am sure most of you might have used WordPress.com subdomains.While using WordPress.org you are provided with some already added widgets.One of these is the follow button widget which is positioned at the right bottom of your screen on a laptop/mobile.If you have left WordPress.com and joined google bloggers club,you might miss the follow button widget.You can add it in blogger too.

• Blogger Vs WordPress
• Social Share Buttons : Pack 1

I want to make it clear that it is not a WordPress "blog" follow widget.Instead of WordPress follow, this widget uses google friend connect to allow visitors to join your site.The idea behind this widget is to create a follow button like WordPress which in a way presents a cool, professional and appealing picture of your blog.Moreover,this widget has no screen resolution problems and is responsive.

Things to do :

Open layout and add an HTML/Javascript widget anywhere you like.Copy and paste all the codes(CSS + HTML + Javascript ) in that and click save.

 CSS
<style scoped='' type="text/css"> /*<![CDATA[*/ #blograbbitfollowSubscribe{background-color:#2c3e50;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0} .blograbbitfollowButton{background:#e74c3c;color:#fff;font-size:13px;line-height:28px;padding:0 10px;text-decoration:none;position:absolute;top:-28px;right:0;display:block;border-radius:2px 2px 0 0;height:28px;font-weight:700} .blograbbitfollowButton span{background:url("https://4.bp.blogspot.com/-fc3-0J--iW8/VyPNjRmxJtI/AAAAAAAAD7U/emRRY6ntYEg3IaL-mev9XxE9M1OKh50fACLcB/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;padding-left:15px} .blograbbitfollowButton:hover,.blograbbitfollowButton:focus,.followActive,.followActive:hover{color:#fff} .blograbbitfollowButton:hover span,.followActive span{background-position:0 -37px!important} .followactive{background-color:#333} .blograbbitfollowForm{padding:15px;margin:auto;text-align:center;font-size:12px} .blograbbitfollowForm p{margin:10px 0} .blograbbitFollowFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c} .blograbbitFollowFooter a{color:#aaa;background:none;text-decoration:none} .blograbbitFollowFooter a:hover{color:#fff;background:none} .creadit a{color: #A7A6A6; float: right; font-size: 8px;} /*]]>*/ </style>

 JS
<script type="text/javascript"> /*<![CDATA[*/ !function(e){e(document).ready(function(){e.extend(e.easing,{easeOutCubic:function(e,o,t,a,n){return a*((o=o/n-1)*o*o+1)+t}});var o=e("#blograbbitfollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".blograbbitfollowButton").click(function(a){o.hasClass("followOpened")?(e(this).removeClass("followActive"),o.removeClass("followOpened").stop().animate({bottom:t},{duration:300,easing:"easeOutCubic"})):(e(this).addClass("followActive"),o.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})),a.preventDefault()})})}(jQuery); /*]]>*/ </script> <div id="blograbbitfollowSubscribe" style="bottom: -971px;"> <div class="blograbbitfollowForm"> <a class="blograbbitfollowButton" href="#" title="Follow"><b>+ Follow</b></a> <br /> <a href="http://www.Blogger.com/follow-blog.g?blogID=7342017194742683056" title="join this site" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;" style="text-align:center;font-weight:bold;text-decoration:none;"><img src="https://1.bp.blogspot.com/-HViEx99kxmQ/VyPMrPGAvEI/AAAAAAAAD7M/bWz5CKpHrHkxtVdgL0z-xJQa_nA_tK0gACLcB/s1600/Follower.png" alt="Join on this site" /></a> <br /> <p>with Google Friend Connect</p><div class="creadit"><a href="http://blograbbit.blogspot.com" rel="dofollow" target="_blank"> Add This </a></div></div> </div>

Customisations :

 1- After copy and pasting codes,You have to change the blog ID which is marked in orange with your blog ID.You can find blog ID like this :

 2- You can also customise the background of the widget by changing the first orange marked colour.You can change the colour of + follow background by changing the second orange coloured colour .Use colours from ( Blog Rabbit Colour Picker )
3-You can also change the text of + follow to join or whatever you like.
4- you can change the size of the follow box .Currently it is 220px.

Last Words :

I hope that you loved this Blogger Follow widget.If you have any problem associated with its installation , please comment it .I will be happy to solve it.And don't forget to share this follow widget.Thanks.

Follow @BloggingRabbit

 Blogger, Blogger How to, Widgets