728x90 AdSpace

  • Latest News

    Sunday, November 30, 2014

    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. 

    Sliding Css Social Profile Widget


    1. Log in to blogger account and Click drop down. 
    blog-post-option
    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/graphics world"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL9x31eODyScDAh7-lZYvYdAk46lzzq-_bFWAdxJ8d4JL_iERL33AN3hS35xruiFhlJoCVWeu3DHawdGTKYo9l9QosxWnG0H-s24U8dLaqAp9xcCNjYDJlG_PUhZ8uil02O6B7c8w5yos/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/107955298793879607964"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFgOM0gxSLpg71LX0Cq6HGMxBc_FTJShh1CDUGjxhH7ct5G7odm-cswd3y48May1qY5HbAKSuhp7kiQ82YCKmt21zzawxtqDWiZbioTLNGuAUC_Hkq1cHXU4WY-Lhc0Gdd5LTTOUznEbk/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/graphics world"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibQ0BdeKbTvGZfFoWo8c5abEjwRclGKDn4c9hicCT1e3IhTjcUYzVPJs_fXzzdqdR7i_koS9dq26_3yZPeN58hyphenhyphen0wYlsJlJK_rFpPWR_ttv-3EYw5366z8HNHWFYvKae06SFqdoi9aHqo/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/AVvXsEhQ99W8gMQftBLawgyt9XZa4l7xP4NPwzWE4ALcM7-yE9uDpoF2f_9FAxu8Te9ORZjm7GRbK9PD2lr6lbabNl8FWzj558L8pyQPJImlexeu0ev4io1cuCiIpWFJkD2iuDcJlm4PSFFNPyQ/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/graphics world"> 
         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBZsOrJ2sO06BPc-R8bGRkFbnGqRakH-fTl1EmipKg9E6b-k7kyEFQly-GE4iKpGcTZExLGQC__WngACBEhmRfiL0ZZkMYmyQ07QosFWMlb_cv5ECEJ0UDERShFC67QHCmY10nbG88abQ/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 graphics world with your Feedburner ID 
    Replace graphics world with your Facebook username
    Replace graphics world with your Twitter Username
    Replace 107955298793879607964 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.
    • Blogger Comments
    • Facebook Comments

    0 comments:

    Post a Comment

    Item Reviewed: Sliding Css Social Profile Widget for Blogger Rating: 5 Reviewed By: bisma
    Scroll to Top