WordPress Style Social Subscribing Gadget With Counter For Blogger

Social Media widgets helps to increase popularity of blog easily and frequently in short time. So it is very important to use social subscribing button on blog. By adding attractive buttons you can easily attract visitors to join your social networks also recently i posted about anothersocial subscribing widget with search box also which was also amazing.

Today i am going to post about the another social subscribing widget which is stylish and attractive. The concept of this widget is taken from one of social gadget of WordPress. This widget contain Rss, Facebook andTwitter Button with follow counters which makes this widget prefect as social subscribing. 

Steps To Add This Gadget On Your Blog

• Open Your Blogger Dashboard >> Then Layout

• Then Click on the Add a Gadget Button

• Then Open HTML/JavaScript box

• Now Paste the below code in the box of gadget

<style> 
.rss-ST {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwWmsK84F_62NX_KtOWVdgU-hJehNWIrG3X_qxLKvqFSJExiG4d727yReKbYWjA2h791xqkrYCN1d5MnLt7OZOd4AKphfyCe58XxJnZTARQVCRh5mq-lNUC_GfPpK4q2wLejfcgXMMprca/s64/rss%2520sepia.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 5px;
}
.rss-ST:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigSYnW-uTZcjwENUTSwhOJdF-uyJR3LwcQQm5FzJ-quZG9jfJjYw5hPyKPL5TVoVAXzfkF7bAUoThy-W3ZvoD1Lf5a5_TAPd5bPXJXzbLb2VSYcpyyEqhLb8wIRextGDH1CA-7__3zZvLQ/s64/rss.png) no-repeat;
}
.twitter-ST {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFf4aZuhYFgKtKzEOi9VUTqhi8prx2lHwkz7oV-1PeRncKaHJBdUBwx7BTCBSNsWl6a7EK3LlI_BY4W-0JBgoqzbN_OCPgqy142r3Trt2ZXHN_K8KFNvlNm14nut7j8BfgyqghNah-xeCC/s64/twitter.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 10px;
}
.twitter-ST:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNMoq1mEdf5-DEjHGwOOHITfkGjv58b-xvGBYKjmFhzUrB-c0tQsC8y9j-e3BqwJ9aLbtRZNNPBWYc2mJdeDamFmsR1muAvDwA20Lq7DE_UL13mmTpOyi-0KTne6yNMgaAZ1hWr3_t-cwx/s64/twitter-blue.png) no-repeat;
}
.facebook-ST {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc5KSM2cO1V07_b9Ijq80hlNMAJLxFDPP-P1zzevi826sx-79RfuaopBV468dWGdYsg4VVGWwhLwPSNox4oS-UfFZl8gfxYEWqmBGk6QBe92MxdUtSyucMIA2u_duoTbztwACkaQzmGWcs/s64/fb%2520sepia.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 10px;
}
.facebook-ST:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh836bt3H5evMvlvujNtqj8F7jHNJS9urVQPclm7cCkLPwu_yoZcAp7lwcfMYhnVIuq0DFSRFKilHz8X-dQI-bApKhc18TiYXuv7PKWsPZGEjxtKpVY17O-ClG09pLhASRyRfngHr5V-zwY/s64/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-ST'>
<div class='follower-rss'>
<span>
<a href='http://feeds.feedburner.com/Moazzam2019'>500+</a>
</span>Readers</div>
</div>
<div class='twitter-ST'>
<div class='follower-twitter'>
<span>
<a href='http://twitter.com/Moazzamiqbal4' rel="nofollow">200+</a>
</span>Followers</div>
</div>
<div class='facebook-ST'>
<div class='follower-facebook'>
<span>
<a href='http://www.facebook.com/moazzam2019.netunlimitedgamesandsoftwares'>15k+</a>
</span>Fans</div>
</div>

• After Pasting above code replace below usernames

Moazzam2019 with your Feedburner id

Moazzamiqbal4 with twitter username

moazzam2019.netunlimitedgamesandsoftwares  with Facebook username

After replacing usernames click on the Save button

Then Refresh your blog and see changing.

You can also do some manual changes if you want like change the follower value which show in counter or also descriptive words for button with your own.