Stylish Slider Social Media Widget For Blogger

Today I’m publish a Professional Social Sidebar Widget for Blogger. It’s very attractive and beautiful social widget. This social connect widget position at sidebar and include slide out connect social options.

Professional Sidebar Widget For Blogger Blog

Many people think that Blogger lacks in all of the extra goodies you can add to other platforms like WordPress, but it simply isn’t true. By using widgets you can customize your blog as much as you like by just adding little snippets of code to the sidebars.

See Also Another Stylish Widget

  1.  Stylish Contact Form for Blogger! Add to Static Page.
  2. Stylish Popup Subscription Box for Blogger.
  3. WordPress Like Floating Social Sharing Counter Buttons for Blogger.

Get Latest Blogger Widgets Here.

Why we want Pro Looking Widgets?

This widget is very effective and good looking. As a Blogger we always wants to look like professional and for looking like a pro blogger we must have to some pro looking widgets on our sidebar top bar and also in footer area. So for this need we are today here with a professional looking sidebar widget for blogger. Let’s see the demo and check out our tutorial and learn how to install this widget :


How To Add Professional Social Sidebar Widget To Blogger

  • Go to Blogger Dashboard.
  • Now Click On Layout >> Add A Gadget.
  • Select HTML/JavaScript and Paste Below Code.

<style type=’text/css’>/*<![CDATA[*/ @charset “utf-8”;/* CSS Document *//* ———- ENTYPO ———- *//* ———- Digital Hub Inc :———- *//* ———- ———- */@import url(; [class*=”entypo-“]:before { font-family: ‘entypo’, sans-serif;}/* ———- CSS ———- */#mbg-social-sidebar a { text-decoration: none; } #mbg-social-sidebar ul,#mbg-social-sidebar ul li,#mbg-social-sidebar ul li a { list-style: none; margin: 0; padding: 0;}/* ———- Social Sidebar ———- */#mbg-social-sidebar { right: 0;z-index:999; margin-top: -75px; /* (li * a:width) / -2 */ position: fixed; top: 50%;} #mbg-social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; } #mbg-social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; } #mbg-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;} #mbg-social-sidebar ul li a:hover span { right: 130%; opacity: 1;} #mbg-social-sidebar ul li a span { border-radius: 3px; line-height: 24px; right: -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;}#mbg-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; } #mbg-social-sidebar ul li a[class*=”twitter”]:hover, #mbg-social-sidebar ul li a[class*=”twitter”] span, #mbg-social-sidebar ul li a[class*=”twitter”] span:before { background: #6CDFEA; } #mbg-social-sidebar ul li a[class*=”gplus”]:hover, #mbg-social-sidebar ul li a[class*=”gplus”] span, #mbg-social-sidebar ul li a[class*=”gplus”] span:before { background: #E34429; } #mbg-social-sidebar ul li a[class*=”tumblr”]:hover, #mbg-social-sidebar ul li a[class*=”tumblr”] span, #mbg-social-sidebar ul li a[class*=”tumblr”] span:before { background: #1769ff; } #mbg-social-sidebar ul li a[class*=”facebook”]:hover, #mbg-social-sidebar ul li a[class*=”facebook”] span, #mbg-social-sidebar ul li a[class*=”facebook”] span:before { background: #234999; } #mbg-social-sidebar ul li a[class*=”rss”]:hover, #mbg-social-sidebar ul li a[class*=”rss”] span, #mbg-social-sidebar ul li a[class*=”rss”] span:before { background: #f57b05; } /*]]>*/ </style> <div id=’mbg-social-sidebar’><ul><li><a class=’entypo-twitter’ href=’’ target=’_blank’><span>Twitter</span></a></li><li><a class=’entypo-gplus’ href=’’ target=’_blank’><span>google+</span></a></li><li><a class=’entypo-tumblr’ href=’’ target=’_blank’><span>tumblr</span></a></li><li><a class=’entypo-facebook’ href=’’ target=’_blank’><span>facebook</span></a></li><li><a class=’entypo-rss’ href=’’ target=’_blank’><span>feedburner</span></a></li><a href=’’ rel=’dofollow’></a></ul></div>

Possible Editing.

If you want to add this widget on left sidebar of your blog then change yellow highlighted “right” to “left”.

  • Make Changes Links in Yellow Highlighted Colors.
  • Now Save HTML/JavaScript.]
  • That’s it. You Have Added this widget successfully.


So above guide is about How To Add Professional Social Sidebar Widget For Blogger Blog? Hope by this complete guide you can easily install this widget. If anyhow you are facing problems after following all steps then let me know. Drop a comment below. We will help you out of sure.
Give Feedback and Do Share,
Thank you.
Paramjot Singh

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 0 comments