Social Media Icons Buttons for Blogger (Blogspot)

 Add social media icons buttons for Blogger (Blogspot)

Hello Bloggers, Today I'm going to portion to you lot a stylish in addition to responsive social media icon gadget on this blog. On which you lot tin link your social website pages to your blog. This gdagdet is quite responsive in addition to is likewise neat inwards appearance. You should operate this.

Script code of social media icon gadget

<!-- Social Media Icons Buttons for Blogger (Blogspot) (https://seo-expert-tutorial.blogspot.com/) created past times 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 venture #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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCkAOidVRb6S4qA09nbTsmx7UQ0BYpdZC017DwwdWMbwnHMDqyF1tfthCwYrsRt9vBhfyoAzUJ9AncOv2Rv5v-5D4Nzc2xOahpVE29cZXejyIFILFEGT1-vxFV1Wg6i1cHLR4_ybfxNVhN/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 alongside your release of followers on your social sites.
2. Replace all the red marked letters alongside your page links or URLs.
3. The glue this code anywhere you lot desire to demo this widget.

If whatever employment occur. Please comment below inwards comment box. That employment volition live on fixed.

Bagikan Artikel ini