CSS Pink Social Networking Simple Slide out Widget

CSS Pink Social Networking Simple Slide out Widget

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 
CSS Pink Social Networking Simple Slide out Widget
4 Stars stars - "CSS Pink Social Networking Simple Slide out Widget " Social networking tools is effective to make a bridge between your blog and different socia...

Post a Comment

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 Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *