Wednesday, 26 August 2015

How To Add The Follower Counter To Your Blogger



1: To Blogger > Layout 
2: Choose Add a Gadget or Add a Page element 
3: Select HTML/JavaScript widget 
4: Paste the code below inside it, 

<style> 
.rss-mbt { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWEfNA4yOmLFsaqowP5Ke0uqZ-b_W3zwOSz53HY4pueMp5wc-z9OGbHBTX9fc-TCVNZe9BiJYir5YIBw3iywGsxrFZgMCeljsoHCdyg-g5jXCoO2fr2zmrUKdFq1_ouLn4DtEbfGhQYT8/s800/RSS1.png) no-repeat; 
    height: 64px; 
    padding: 0px 20px 0px 80px; 
    margin-top: 20px; 
.twitter-mbt { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjH-xslbretW5mUZuyySVvhCtQtxOqBb9FR7tLvviknhjrtn7VGgFV9uREq5wHhhgktHwGrlbGshzgVvtAdc8WZB3OtWKb0mYCV2I_BT-VudDM2ddKr0rUfMGPCMZETO2gjS4ZZjJhF3w/s800/TWITTER1.png) no-repeat; 
    height: 64px; 
    padding: 0px 20px 0px 80px; 
    margin-top: 20px; 
.facebook-mbt { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0S2PxVtpGvms-ZwOH4RNhNwuqWbEluEKOqW0vIb1rHU6OV9gUfn4ixMxBqyjXSRsAtE6YnHzH6ipydYsOg8kmshB69Hang_8R7q_PcwSH6ZK7MHRJGcGU8V64jN1Vy7c0Ijsl4r91vF8/s800/FACEBOOK1.png) no-repeat; 
    height: 64px; 
    padding: 0px 20px 0px 80px; 
    margin-top: 20px; 
.follower-rss, .follower-twitter, .follower-facebook { 
    font-family: Georgia,  sans-serif, Times; 
    font-size: 1.1em; 
        font-style:italic; 
        color:#289728; 
.follower-rss span { 
    font-size: 1.9em; 
    font-weight: bold; 
        font-style:italic; 
        color:#FFB93C;     
.follower-twitter span { 
    font-size: 1.9em; 
    font-weight: bold; 
        font-style:italic; 
        color:#6DB6E6;     
.follower-facebook span { 
    font-size: 1.9em; 
    font-weight: bold; 
        font-style:italic; 
        color:#3889BA;     
</style> 
<div class="rss-mbt"> 
<div class="follower-rss"> <span>515</span> loyal readers 
</div> 
<a href="ADD-RSS-FEED-URL-HERE" rel="nofollow">RSS feed</a> 
| <a href="ADD-RSS-EMAIL-FEED-URL-HERE" target="_blank" rel="nofollow">E-mail</a> 
</div>
<div class="twitter-mbt"><div class="follower-twitter"><span>1058</span> followers</div>                            
<a href="ADD-YOUR-TWITTER-URL-HERE" target="_blank" rel="nofollow" title="I definitely follow you back">Follow us on Twitter!</a> 
</div>                        
<div class="facebook-mbt">                        
<div class="follower-facebook"><span>260</span> followers                            </div>                            
<a href="ADD-YOUR-FACEBOOK-URL-HERE" target="_blank" rel="nofollow">Join us on Facebook!</a> 
</div> 

NOTE:- Make sure to replace the bolded text with the required details (links of your Feedburner, twitter and facebook accounts) and replace the bolded numbers with your current follower counts. For example replace 515  with your current number of Subscribers, replace  1058 with the number of your twitter followers and replace 260 with the number of your facebook followers

 5:Save and you are done! Now view your blog to see a stunning widget hanging on your sidebar :D

Customization:
I hope it was not difficult to add :). You can replace the images used in this widget with the image links of your choice. Below are some MBT Social Media Icons that you can use,

Labels: ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home