» » Sliding Css Social Profile Widget for Blogger

Sliding Css Social Profile Widget for Blogger

Sliding Css Social Profile Widget for Blogger

Sliding Css Social Profile Widget

In this post im gonna explain how to add Css sliding social icons list for blogger. By using Sliding Css Social Profile widget you can link your social media profile Facebook, Twitter and Rss Google plus,Rss and StumbleUpon Check the demo from below link.

Want to see Demo You can See the Image

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code.
<style> #socialmenu_btrix { margin:0; padding:0; width: 30em; height: 4.5em; overflow:hidden; } #socialmenu_btrix li { display:inline; list-style-type:none; } #socialmenu_btrix li a { display:block; float:left; text-decoration:none; margin:0; } #socialmenu_btrix li a img { opacity:0.7; margin:0.5em; border:0; float:left; } #socialmenu_btrix li a span { display:none; } #socialmenu_btrix li a:hover { background:transparent; } #socialmenu_btrix li a:hover span { width:7em; color:#aaa; display:block; cursor:pointer; float:left; } #socialmenu_btrix .h2 { margin:0 5px; padding:0; color:#fc0; font-variant:small-caps; font-size:1em; border:0; } </style> <ul id="socialmenu_btrix"> <li> <a href="https://www.facebook.com/tipsandtricx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSWrwCohkSTZME4dg6F8Gk7DTj0g-5O7yqz9L1kKlUWtNNovFRS0JuPLAWHUFZ4KjS7l-caWizCIF_Iyr6C4My0Sn16jpzMdYMBWTU_7TthPDXvT-ZxVQSpQRV6hmqukAwcFBiHqmX9QU/s1600/Facebook-icon_btrix.png" alt="facebook" width="50" height="50" title="Facebook" /> <span><br /> <b class="h2">Facebook</b><br /> Add to facebook </span> </a> </li> <li> <a href="https://plus.google.com/+AbidAziz1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVW2m2O14Y0mrR6MVP1pGe68pJAJeKGLGeU9FzVhcrJzGLG5QHIAECmfZSvxgsHYV0kmSWhMN8U-sQuwB3ErE6JtSmMGHoyxZkXYpA9wtzEoh2x1qy7z1CiqWBkmoRDT0JRDJsbqsqog/s1600/Google-plus-icon_btrix.png" alt="Google plus" width="50" height="50" title="=Google plus" /> <span> <br /> <b class="h2">Twitter</b><br /> Add to twitter </span> </a> </li> <li> <a href="http://feeds.feedburner.com/tipsandtricx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCobddFUvyrekKRxFGRb-O_WlWWMSJwHYQyDhoDrO9MglEL2AanExOzpWZu-qaZcna4p9klprnPfA9nGEihIKwKJc1nFP4O0bSrpbwYQ88QYUtaRovqzjLLnGPbUkcvBmdGdG4P-E0UIQ/s1600/RSS-icon_btrix.png" alt="Rss" width="50" height="50" title="Rss" /> <span><br /> <b class="h2">Rss Feed</b><br /> Subscribe </span> </a> </li> <li> <a href="http://stumbleupon.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_q-epCFn58nvWhZQ3uH6imdpwrwtOTf9wEL30D1MjcereK_xFsN0DgCd0F8rdl8iCanV74aMxKAbAXRi6Z7E4Gu8IVTrNhOPcXPc0tBJf55Jix4wzOrWo7CQyr2jhYcMwwNc5Cgtt9I/s1600/StumbleUpon-icon_btrix.png" alt="Stumbleupon" width="50" height="50" title="Stumbleupon" /> <span><br /> <b class="h2">Stumbleupon </b><br /> add to stumble </span> </a> </li> <li> <a href="https://twitter.com/tipsandtricx"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuZLtYfL6wlxhL2NjNXEqHwx08mE9T4Vgp-Ldlir9BQaj6Bod1MeNbyhnYR7NHVVE4UEWUuYaTEnbCu86caMiRuNYGCu2QFwY_7lq4-SQjOvo_zGhdPxwGhSslibes7oAJnN5rGMlMBI8/s1600/Twitter-icon_btrix.png" alt="twitter" width="50" height="50" title="twitter" /> <span><br /> <b class="h2">Twitter</b><br /> add to twitter </span> </a> </li> </ul>
You have to change the counters manually, just change red color number according to profile.

Replace tipsandtricx with your Feedburner ID
Replace tipsandtricx your Facebook username
Replace tipsandtricx with your Twitter Username
Replace AbidAziz1 with your Google plus ID
Replace Username with your StumbleUpon Username


5. Now save your HTML/Javascript'.You are done.
Hope this Sliding Css Social Profile helps to link your social profiles to increase followers.

Related Posts