Social Media Widgets are the quite right and interesting way to maintain your blogs visitors interest.We recently published social media subscribing widget with search bar check that gadget you will surely like it.I have added a cool image hover effect which increases the beauty of this gadget.The main part of this widget is you can show the number of your subscribers and you can update the number of your subscribers anytime by just editing some numbers.See the preview of gadget below.


I have kept the installation of this widget damn easy just copy and paste the code,and update the number of your fans.

How To Add This Gadget To Blogger?


  1. Go to Blogger Dashboard > Design > Page/Edit Layout. (In new User Interface It Is Dashboard > Layout)
  2. Add a Gadget > HTML/Javascript.
  3. Paste below code and save it.


<style> 
.rss-hb {
    background: url(http://1.bp.blogspot.com/-6P9c5xiGqPU/T17Et5uLpmI/AAAAAAAAALo/QvZiuuXH5WQ/s1600/rss+sepia.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 5px;
}

.rss-hb:hover {
    background: url(http://3.bp.blogspot.com/-kpl0WCXu29o/T17fxYYxDKI/AAAAAAAAAMA/VStK_Nn5ZhQ/s1600/rss.png) no-repeat;
}

.twitter-hb {
    background: url(http://4.bp.blogspot.com/-O3HOVJkubI8/T17FOcKcXEI/AAAAAAAAALw/zGnWePejV74/s1600/twitter.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}

.twitter-hb:hover {
    background: url(http://4.bp.blogspot.com/-Zt75oQY-Zyw/T17f2RNz4LI/AAAAAAAAAMI/tMRUAvrCSZE/s1600/twitter.png) no-repeat;
}

.facebook-hb {
    background: url(http://3.bp.blogspot.com/-zKnfvx3p4tw/T17EsygOsMI/AAAAAAAAALg/WHYxobQI9no/s1600/fb+sepia.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}

.facebook-hb:hover {
    background: url(http://4.bp.blogspot.com/-eNuumn4W2Z0/T17CYTzSlfI/AAAAAAAAALY/XgljKIs181w/s1600/facebook-logo.png) no-repeat;
}

.follower-rss, .follower-twitter, .follower-facebook {
    font-family: Georgia,  sans-serif, Times;
    font-size: 1.5em;
    font-style: italic;
    color: #D3C5B1;
    padding-top: 05px;
    text-shadow: 1px 1px #B2A99D;
}

.follower-rss a, .follower-twitter a, .follower-facebook a {
    color: #AA9C89;
}

.follower-rss span {
    font-size: 2.2em;
    font-weight: bold;
    font-style: italic;
}

.follower-twitter span {
    font-size: 1.9em;
    font-weight: bold;
    font-style: italic;
}

.follower-facebook span {
    font-size: 1.9em;
    font-weight: bold;
    font-style: italic;
} 

</style> 

<div class='rss-hb'>
    <div class='follower-rss'>
        <span>
            <a href='http://feeds.feedburner.com/hblogger'>33</a>
        </span>loyal readers</div>
</div>
<div class='twitter-hb'>
    <div class='follower-twitter'>
        <span>
            <a href='http://twitter.com/#!/helperblogger' rel="nofollow">270</a>
        </span>followers</div>
</div>
<div class='facebook-hb'>
    <div class='follower-facebook'>
        <span>
            <a href='http://www.facebook.com/btsnts'>63</a>
        </span>fans</div>
</div>




  • Now replace http://feeds.feedburner.com/hblogger with your feedburner URL and replace 33 with number of your RSS susbscribers.(Highlighted in Red color)


  • Replace http://twitter.com/#!/helperblogger with your twitter URL and replace 270 with number of your followers. (Highlighted in Lime color)


  • Replace http://www.facebook.com/btsnts with your facebook page URL and replace 63 with number of your fans. (Highlighted in Yellow color)

Now save your widget and you are done.
I hope this little widget will surely increase beauty of your blog.

Post a Comment

  1. can you please add google plus widget also to this widget and send me the code for me please i need and like this widget alot...please..

    ReplyDelete
  2. is there any way to automate this count?
    like hosting php file on another free server and call it...?
    please reply

    ReplyDelete
  3. Thanks for the valuable information...I have a learned some information...Keep Sharing the useful information am wait for your new post...
    Website Development in Bangalore | Website Designing Bangalore

    ReplyDelete
  4. wow .thank u so much for sharing valuable information. and i tried it is working thank u

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top