Saturday, July 13, 2013

Vertical Social Media Sidebar Widget For Blogger

Author: Gagan Masoun
Vertical Social Media Sidebar Widget For Blogger
People love to share their ideas, videos, photos, sorrows, happiness etc on social media sites like Facebook, Google+, Twitter. Pinterest and among others. Bloggers and webmaster can get so much traffic for their blogs and websites with the help of social networking sites. Every blogger wants more audience in short period of time. Today we will show you how to add new vertical social media sidebar buttons widget to blogger blog with easy method.
You can see a screenshot demo on BlogsDaddy below. Let's start the tutorial:

Vertical Social Media Sidebar Widget

Add Vertical Social Media Sidebar Widget

  • Go to Blogger Dashboard >> Layout >> Add HTML/Javascript Gadget.
  • Now Paste The Given Below Code.
  • Place Your Widget After or Below Blog Posts Position
<div id='social-sidebar'>
<ul>
 <li>
<a class='entypo-twitter' href='https://twitter.com/BlogsDaddy' target='_blank'>
<span>Twitter</span>
</a>
</li>
<li>
<a class='entypo-gplus' href='https://plus.google.com/106217413057730068740' target='_blank'>
<span>google+</span>
</a>
</li>
<li>
<a class='entypo-tumblr' href='http://blogsdaddy.tumblr.com' target='_blank'>
<span>tumblr</span>
</a>
</li>
<li>
<a class='entypo-facebook' href='http://www.facebook.net/BlogsDaddy' target='_blank'>
<span>facebook</span>
</a>
</li>
        <li>
<a class='entypo-rss' href='http://feeds.feedburner.com/BlogsDaddy' target='_blank'>
<span>feedburner</span>
</a>
</li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Blogs Daddy Inc : http://www.BlogsDaddy.com---- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>
  • Now Click On Save Button. 

Remember:


Please change the red color highlighted URL's with your own. This was the tutorial on how to add vertical social media sidebar widget to blogger. Please leave your comments and feedback about this tutorial. Thanks!

10 comments:

  1. Awesome Widgets :O have mind blowing design.. Thanks!

    Regards
    TheTricksLab

    ReplyDelete
  2. Informatif and Useful Site..
    Good Idea..

    ReplyDelete
  3. After looking at a few of the blog articles on your site, I seriously appreciate your way of writing a blog. I saved as a favorite it to my bookmark site list and will be checking back in the near future. Take a look at my website as well and tell me what you think.

    ReplyDelete
    Replies
    1. Thanks for your appreciations..!!!

      Your blog is really good. You're providing a good information. God Bless

      Delete
  4. Stupid question: How do you put it on the right side?

    ReplyDelete
    Replies
    1. Hey Hector,

      First of all thanks for commenting on my blog. Just change "left" word in the CSS style to "right".

      It will help you to put it on the right side.

      Thanks
      Gagan

      Delete
  5. How to replace tumblr with youtube. Thanks..

    ReplyDelete
  6. hii; very useful & attractive widget for every blogger spot.
    http://www.cggkquiz.in/

    ReplyDelete