Social Media Icons Buttons for Blogger (Blogspot)


How to add social media icons to blogger post, social media buttons for blogger, social media share buttons for blogger, how to add social media buttons to bloggersocial media icons for blogger html code, how to add social media buttons to blogger sidebar, social media widget for blogger, how to add social media buttons to blogger header.

 Add social media icons buttons for Blogger (Blogspot)

Hello Bloggers, Today I'm going to share to you a stylish and responsive social media icon gadget on this blog. On which you can link your social website pages to your blog. This gdagdet is quite responsive and is also great in appearance. You should use this.

Script code of social media icon gadget

 <!-- Social Media Icons Buttons for Blogger (Blogspot) (http://www.howtolearnblog.com) created by Vishal Jaiswal (www.vishaljaiswal.in) -->
<style type='text/css'>
.social-box-howtolearnblog{width:280px;padding:10px 9px;margin:0;overflow:hidden;background-color:#f2f2f2;border:1px solid #f2f2f2;text-align:center;}a.social-item-box{display:block;color:#4b4b4b;float:left;width:64px;overflow:hidden;margin:0;padding:4px 0;background-image:url("http://4.bp.blogspot.com/-L1iBWk1cut4/VGsgavLj62I/AAAAAAAAEFU/1x3e5PzTSK8/s1600/social-icon.png");background-repeat:no-repeat;}.social-item-outer{background:#f8f8f8;margin:0 0 0 8px;overflow:hidden;float:left;display:inline-block;}.social-item-outer:hover{background:#fff;}.social-item-outer:nth-child(1):hover{box-shadow:0px -2px 0px #E50700 inset;}.social-item-outer:nth-child(2):hover{box-shadow:0px -2px 0px #0084C5 inset}.social-item-outer:nth-child(3):hover{box-shadow:0px -2px 0px #6CAC00 inset;}.social-item-outer:nth-child(4):hover{box-shadow:0px -2px 0px #00C3B7 inset;}.social-item-outer:hover{box-shadow:0px -2px 0px #FF8168 inset;}.social-item-outer:first-child{margin-left:0px;}.facebook-box{background-position:7px 4px;}.rss-box{background-position:-73px 4px;}.twitter-box{background-position:-153px 4px;}.googleplus-box{background-position:-233px 4px;}.counter{margin:60px 0 0 0;font-family:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:16px;font-weight:500;}.social-title{color:#888;font-size:11px;}
</style>
<div class='social-box-howtolearnblog'>
<div class='social-item-outer'>
<a class='social-item-box facebook-box' href='http://www.facebook.com'>     
 <div class='counter'>
10.000
</div>
<span class='social-title'>Fans</span>
</a>
 </div>
<div class='social-item-outer'>
<a class='social-item-box twitter-box' href='http://twitter.com'>
<div class='counter'>
7.987
</div>
<span class='social-title'>Followers</span>
</a>
</div>
<div class='social-item-outer'>
<a class='social-item-box googleplus-box' href='http://plus.google.com'>
<div class='counter'>
5.987
</div>
<span class='social-title'>Followers</span>
</a>
</div>
<div class='social-item-outer'>
<a class='social-item-box rss-box' href='http://www.mysite.com/feeds/posts/default'>
<div class='counter'>
450
</div>
<span class='social-title'>Subcribers</span>
 </a>
</div>
</div>
</div>

Try this: Responsive Recent Post Widget on Blogger/Blogspot

How to setup social media icons buttons for Blogger?

Follow these steps:
1. Replace all the yellow marked numbers with your number of followers on your social sites.
2. Replace all the red marked letters with your page links or URLs.
3. The paste this code anywhere you want to show this widget.
If any problem occur. Please comment below in comment box. That problem will be fixed.

Please note before commenting on this page.
1. Don't comment as for advertisement purpose.
2. Don't hyperlink your website inside comment box.
3. Abuses are strictly prohibited.
4. If necessary, you can post the only URL without any text hyperlink.
EmoticonEmoticon