Blogger trick 4 you about the blogger, seo services, adsense, softwares, tips and trick, games, widgets, hosting, make money, how to create a website.

Monday, 23 December 2013

Show Off Follower Counts For RSS, Twitter and Facebook Followers

By on 15:30
Follower Counter for facebook, twitter and  feedburnerYou have seen many mind blowing widgets on wordpress blogs but its now time to make Blogger a better place! Presenting to you just another beautiful and yet useful widget that displays the current number of your blog subscribers, twitter and facebook followers. This widget is based solely on pure CSS and HTML with no JavaScript involved therefore you just need to update the counts manually. At present I am learning programming too so as soon as I develop some good command in programming, I will automate all BT4U widgets but at present bear with me as a designer only



Read Also:How The Facebook Help You To Get Traffic

Follow the Steps Below To Add The Follower Counter To Your Blogger Blogs

  1. Go 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/AVvXsEj5CcGbJ34ggtGQjZrKXUou5jE5wUeTVMstOu-8OCD0xPvhN0AbHvyp25JKGeo_f_8JeuSu7-6r9xJ0z9HfAF4SZWZ_8pFFwXAZ5sReYnDlJhpMCfBdoMCU3ofZ0Rq0wfn2Bd4c_4x9UVw/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/AVvXsEh6wypqYs6t0uZqUIcGVWcFAuhG5NQ8AcSlxQH_shSuXHDmfnov4k-4uGFDwGeGh0DLG5h28MSqQRoZdt7HnKEcAKG0WCZJ0oC20mHPCua5zEl0fhXTVCd1hNPJXKlm3ZvhumXcWyqzNN4/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/AVvXsEilWm_HgQXmH-lRL0JjqU91YKMnxCVKws0idvCu92cOP9-WcJw5tTrOeKw6XEtgQrKHb44ok9nfxMLoZ_3EFgHnHC7GLUaS20cP3nQVDP_KjFwYTjZzmT4hdRjT0YLfAJT4bqWhVAX6FAs/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 
Thanks alot For visiting Our Website! Kindly Bookmark and Share it With you Friends.

Technorati Digg This Facebook Twitter Stumble Stumble

0 comments:

Post a Comment