CSS Pink Social Networking Simple Slide out Widget

CSS Pink Social Networking Simple Slide out Widget

Comments: 5
data:blog.title
social media 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="http://1.bp.blogspot.com/-7r14xTQfaso/UYi5yJ0H7CI/AAAAAAAACwg/LrD1OWgWGeQ/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="http://3.bp.blogspot.com/-GbkS6eD0WPo/UYi5y6md4dI/AAAAAAAACww/ziaOv5oiNJY/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="http://1.bp.blogspot.com/-eve1b3fX6Ss/UYi5yFBcCNI/AAAAAAAACwY/ILlooqDWOnI/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="http://4.bp.blogspot.com/-DAVYWR9Dxt8/UYi5yvUKkfI/AAAAAAAACws/oege3aDhZg8/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="http://2.bp.blogspot.com/-4r1OrbwL_rU/UYi5yMWxx_I/AAAAAAAACwc/uOhaL6tZ7fY/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 

Speak Your Mind

Nice looking forward for some more widgets. what say about a guest post?
do you except?

Guest Post is always welcome...and it is a good way to generate high quality backlinks..

Thanks i will soon mail it to you.

Sie möchten Facebook Likes kaufen und Ihre Fans steigern? 20 Fans sind geschenkt. Kkostenfrei Zielgruppeneinstellungen.deutsche likes kaufen

nicht interessiert

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *