Wordpress Style Social Subscription Widget With Count For Blogger

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0I84iaIW-viJaEdC25vyk93AZyHstP1nZBc6qi-VRB2haffg3FFkUH36dZ-3ZXz5nbYcHRKono2h907vkZBhOZ8wQ6vd830f5jYOlVxBDbEcxWWTPsYVMCMyK53I_LI2L-c6PIQheEiw/s1600/rss+sepia.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 5px;
}

.rss-hb:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5TsUO9Yb70UyExurlBYVLQP9NfLKHFZYUiCK87LEZx9YHplptGfigOu3M64XLk3OdgNdkTU5IjAbCADBB9pRhj7xbbN6GHdHhw1vhSbEttr0cnE2JdLaz1A9BNeRGt8g3V9h6v9krvU8/s1600/rss.png) no-repeat;
}

.twitter-hb {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgolxnf5u9vwBNZMKr5gCyGalT-YSsTU5lM5i0Qo5QTNwcKoDb0auCpoh3-wFwQ5qXfhoNlFXV7R4KPgQjwgYhq-u6x0Tdm5ADvLjToyoX3sJUTLOaCIloOoXHyHNIv4KzogBu3YOGpvlw/s1600/twitter.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}

.twitter-hb:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicbeFYtv_XaQ_Mj7KLrbfOjAUtiqg7uvZd0TsxKrnOFb93DCdqdEVNzxipzz7-EHctureiOP6y2vnVSmZ1SKaeut7Fptq5yGF4yMiqUUKWITtugldS1BwvBBLN-LCGX30Maz7KFvizlQ0/s1600/twitter.png) no-repeat;
}

.facebook-hb {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXAHxDhpjtWDkoA5uf5o0m7dbiVg6pnNWMFexEAdskNk01Q9DMHZ04j4KSKNWAEbm4JHap5E-VB0_6t3Jzu4YIIhaKbbRD25y_MQFr6VMX7MHNqnS7w_Sk3A-53vaYxlSLRH6jPnaURH0/s1600/fb+sepia.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}

.facebook-hb:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVJaNIOqRc-NVyJKoI8M79DevsdjoacmtJCFBWSlC_zL0sYDIxUpbY5jxgI7f4dncTCcDzo_Gvaob0EbWXSRzI_UwRtmcGTxqgBQPeqIm5SvO4JMLs8E-m6yShbWzGwidjOAWZmBafz04/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.