How to add Social Sidebar Widget for Blogger 2015

Last updated on 15 January, 2015 By Goatsoft INC Labels: Blogger, CSS and HTML, Social Media, social sharing, Tutorials, Widget and Plugin
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.

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.Let's see the demo and check out tutorial :

Live Demo

How to add Professional Social Sidebar Widget on Blogger

First go to Blogger Homepage - Blogger Login Page and Select More Option

Then after select Template Option and Click on EDIT HTML Button to expan XML Code editor.

Now search ( ctrl+f ) for <body> tag and paste this code after <body> tag and save all.

<ul>

<li>

<span>Twitter</span>

</a>

</li>

<li>

<span>google+</span>

</a>

</li>

<li>

<span>tumblr</span>

</a>

</li>

<li>

<span>facebook</span>

</a>

</li>

<li>

<span>feedburner</span>

</a>

</li>

</ul>

</div>

/*<![CDATA[*/

@charset "utf-8";

/* CSS Document */

/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://www.digitalhubinc.com/---------- */

/* ---------- http://weloveiconfonts.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,#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;

-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>

At last , Properly All Done on your Blogger Template and See Your Blog.

We hope all of you enjoy this post and share it. Please drop your valuable comment.

See more tutorials on:

Social Media Css and HTML

You May Also Like

1 comments: