Now Reading
Adding Professional Social Sidebar Widget for Blogger and Website 2016

Adding Professional Social Sidebar Widget for Blogger and Website 2016

by AdminAugust 23, 2016

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

Today I publish a Professional Social Sidebar Widget for Blogger. It’s very attractive and beautiful social widget. This social connect widget position at the sidebar and include the slide out connect social options.Let’s see the demo and check out tutorial :


How to add Professional Social Sidebar Widget on Blogger

First, go to Blogger Homepage – Blogger Login Page and Select More Option as seen below screenshots.
Then after select Template Option and Click on EDIT HTML Button to expand XML Code editor.
Now search ( ctrl+f ) for <body> tag and paste this code after <body> tag and save all.

<div id='social-sidebar'>
<a class='entypo-twitter' href='' target='_blank'>
<a class='entypo-gplus' href='' target='_blank'>
<a class='entypo-tumblr' href='' target='_blank'>
<a class='entypo-facebook' href='' target='_blank'>
<a class='entypo-rss' href='' target='_blank'>
<style type='text/css'>
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : */
/* ---------- ---------- */
@import url(;
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;}

/* ———- GENERAL ———- */

#social-sidebar a { text-decoration: none; }
#social-sidebar ul,#social-sidebar ul li,#social-sidebar ul li a {
list-style: none;
margin: 0;
padding: 0;

/* ———- Social Sidebar ———- */

#social-sidebar {
left: 0;z-index:999;
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;
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; }
  • At last , Properly All Done on your Blogger Template and See Your Blog.

I hope all of you enjoy this post and share it. Please drop your valuable comment. If you have any question feel free to ask me anytime.

Please wait...
About The Author

Leave a Response