2 CSS Pink Social Networking Simple Slide out Widget

Social networking tools is effective to make a bridge between your blog and different social sharing site. In this tutorial I will share with a simple CSS social networking slide out widget which is very effective to increase your Social Networking activities. All the icon used in pink color and when you mouse over on the social networking icon then a slide out Text will appear with your social networking links.

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

<style>
#bssocialmenuslide {
  margin:0;
  padding:0;
  width: 30em;
  height: 4.5em;
  overflow:hidden;
  }
#bssocialmenuslide li {
  display:inline;
  list-style-type:none;
  }
#bssocialmenuslide li a {
  display:block;
  float:left;
  text-decoration:none;
  margin:0;
  }
#bssocialmenuslide li a img {
  opacity:0.7;
  margin:0.5em;
  border:0;
  float:left;
  }
#bssocialmenuslide li a span {
  display:none;
  }
#bssocialmenuslide li a:hover {
  background:transparent;
  }
#bssocialmenuslide li a:hover span {
  width:7em;
  color:#aaa;
  display:block;
  cursor:pointer;
  float:left;
  }
#bssocialmenuslide .h2 {
  margin:0 5px;
  padding:0;
  color:#fc0;
  font-variant:small-caps;
  font-size:1em;
  border:0;
  }                                                                                                                                       <!--www.bloggerspice.com-->
  </style>
  <ul id="bssocialmenuslide">
  <li>
    <a href="https://www.facebook.com/BloggerSpice"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0cMDFeeYGsU3xcM7vMfLt7VVbMpUgCMiAWIZgZAxc3zJ211Iz6MqL-o5CcnMrul6ExRSjVaA9NrbENoIrGDyxlXhBMjYyxdD11Sivct6v21gySD71Y48r7mRAI6h3QkM9wUWAwlcPTgwC/s1600/BS+Facebook.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://twitter.com/BloggerSpice">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74CO2TaJwS0psVnNIOZ3RcNzxugCwDxHKXCn7jp1rcyJIF5R7eO6TffeBujVF4qdY5UBHaJLYqOaZ2y-bCy9ngovJXJ0dL8DeM0EIT86yYBBVqPhrJIEpx3TQBiFejucSLlAjqRkRQ3L2/s1600/BS+Twitter.png" alt="twitter" width="50" height="50" title="twitter" />
     <span><br />
      <b class="h2">Twitter</b><br />
      add to twitter
     </span>
    </a>
   </li>
   <li>
    <a href="https://plus.google.com/102331886274459115104"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAT10vx5wxJ9ZhE_2Vntms1TCt_PMf0_CplVyct1k8uPdsHWfCx57IAApZJ1Wyr_5Lg-PNhUnzEnzkEnHGUDQi8p3aGhteGzEYzTYK3llvA7SiXHcGL8AuxfbR70xM8NT8bGaE_xUCCskZ/s1600/BS+Google+Plus.png" alt="Google plus" width="50" height="50" title="=Google plus" />
     <span>
      <br />
      <b class="h2">Google +</b><br />
      Add to Google +
     </span>
    </a>
   </li>
   <li>
    <a href="http://feeds.feedburner.com/BloggerSpice"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Teqvy7eMxZw0KPljfpS1CepMYFstba0OhXwuVG3TZIm2z0r32wfAO_WuqqBptFr7AvqHpGSnZCdYvrXKBUxCxWEL0AP5krw4Jes09shvtgEZOxLQGUx6mzx7KwLx2drci8fgDCX8Jtqv/s1600/BS+RSS.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://pinterest.com/BloggerSpice"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJWcDVHyjIHe4Ou-lJrEBNX-W5YklRiQMxUn37wcLowMCqz952BqLK15gf8kTQVCwnjjJqbQWxK9j7a5qQUYDRo1cwwG605YXWgkKB8UizY-mPbRR6t3OOOGa_DEr82RRm_a_eHbQ6fLBD/s1600/BS+Pinterest.png" alt="Pinterest" width="50" height="50" title="Pinterest" />
     <span><br />
      <b class="h2">Pinterest</b><br />
      Pin it
     </span>
    </a>
   </li>
  </ul>

Customization

• Replace BloggerSpice with your Social Networking Profile ID or User name
• Replace 102331886274459115104 with your Google Plus Profile ID