Sliding Css Social Profile Widget for Blogger

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.

bloggertrix

1. Login to Blogger → Dashborad
2. Click on Drop Down Menu and select Layout
3. Add a HTML/JavaScript Gadget
4. Paste below code in it.

<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/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWnH27TflkKurKoiUR4c_-tix6_AHjN76efVHdS7ep_wTlfS8cgj8JKaQS8oi6S72ubFXPg1eBVVBAZOhYsbj_n3X-RMHn2e_VN7EPtwQHLtVrhUYfAtQL5YUBbdnPoAg3hpK5orBQE0M/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/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlk_1tcjV03iA4ySG1g_9q4FGkkZLhrL__T6GtnrYua_n9tfMM-lDGY-KSzYAHwDNL9LiyK_whcNBVSi7q7mPS4VvZeqP3_gavk-oaZDfx-dL7uqQp2QsjxhtzRf3sO9Tqyhoi1QCtI4k/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/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXxFdF3A5xoeA3mABGMZBcjumc5to60gF0Vlnhrg7S23rLMHxgTuxkKecIiNkeH_q7jv1DUYf94glPuX50CkxXWpzzitbL_oRa1jrVy9qCP7dTghG2YCvjoum5gQ_qtd1GUMz2TalszAg/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/AVvXsEjzIa3Pdwj9_4uKfxQrE6poNJjpCIVWIpco207Tzua6fBlgfNa5bkk_5crhEnwWz_FrssGDu5_o3XnNKjU8h74Ys7J31qJVFiIxsUO6ZM5AKZwKf0ncDvuBn2tk6WOW7EUFIM8nOCktfJg/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/Username">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFre7rIGDUPyEBf5upacMKAHv1dXFHEQs7TqhWmtbxq70qT7QhRTBIImMu3j02zA53hUnJDEMXLBALGEQ-3Kvh2StBYePNZg1ZxELxCf-ZzjaiDCkc5D9iyMQ40u1k-4z7o2s_SwYIHc/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 Username with your Feedburner ID 

Replace Username with your Facebook username

Replace Username with your Twitter Username

Replace Username with your Google plus ID

Replace Username with your StumbleUpon Username

5. Now save your HTML/Javascript'.You are done.