Add Pure CSS Social Media Follow Us Widget in Blogger

Social media widget contains only pure CSS coding with mouse hover effect. This social media widget contains smooth and clean hover effect at your sidebar. Social media buttons includes Follow us on Facebook, Follow us on Twitter, Follow us on Google Plus, Follow us on Pinterest and Subscribe with RSS. Social media has strong strength according to SEO specialist. Social media sharing sites has a strong physical relation with every internet user in the world. So according to Google page rank there is a plus point for sites that grow their social site users for their blog. It will be like Facebook page likes, Followers of Twitter account, Followers of Google plus, Followers of Pinterest and Feed subscribers of RSS.

This widget is fully customized and fully supported for blogger and wordpress blogs. Social media CSS hover effect widget has no longer reduce the overall page speed. It works with Google Chrome, Internet Explorer, Mozilla Firefox and Opera web successfully. Different matching colors can attract audience to click on these favorite buttons and enjoy the CSS hovering effects.

This widget will force the users to click at least one time on these CSS social media following buttons so this will increase your followers as well as feed readers.

How to Add Pure CSS Social Media Follow Us Widget in Blogger

• Sign in to Blogger.com
• Goto Layout
• Choose Add a Gadget (At Sidebar or below Blog Post)
• Choose HTML/JavaScript
• Write any word in Title of this widget
• Paste the following code in it,

<style>
.StarsBloggingSocialButtonsBorder {
margin:0 auto;
padding:5px;
width:auto;
border-radius:5px;
border: 1px #BBBBBB solid;
}
#StarsBlogging-SexySocialButtons{
list-style:none;
text-decoration:none;
font-size:0.9em;
font-family:trebuchet ms,sans-serif;
}
#StarsBlogging-SexySocialButtons a{
text-decoration:none;
font-family:trebuchet ms,sans-serif;
}
#StarsBlogging-SexySocialButtons li{
position:relative;
height:38px;
cursor:pointer;
padding: 0 !important;
}
#StarsBlogging-SexySocialButtons .facebook, .googleplus, .YouTube, .rss, .twitter{
position:relative;
z-index:5;
display:block;
float:none;
margin:5px 0 0;
width:210px;
height:38px;
border-radius:5px; background:url(http://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4/56i9phAS2do/s1600/NBT+Sprites+Social+Icons.png) no-repeat;
background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
color:#141414;
text-align:left;
text-indent:50px;
text-shadow:#333 0 1px 0;
white-space:nowrap;
line-height:32px;
-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#StarsBlogging-SexySocialButtons li:after{
position:absolute;
top:0;
left:50px;
z-index:2;
display:block;
height:38px; color:#ffffff;
content:attr(data-alt);
line-height:32px;
}
#StarsBlogging-SexySocialButtons .icon{
overflow:hidden;
color:#fafafa;
}
#StarsBlogging-SexySocialButtons .facebook{
width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;
}
#StarsBlogging-SexySocialButtons .twitter{
width:32px;
height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;
}
#StarsBlogging-SexySocialButtons .googleplus{
width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;
}
#StarsBlogging-SexySocialButtons .YouTube{
width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:-2px -95px;
}
#StarsBlogging-SexySocialButtons .rss{
width:32px;
height:32px;
background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;
}
#StarsBlogging-SexySocialButtons li:hover .icon,
.touch #StarsBlogging-SexySocialButtons li .icon{
width:210px;
}
.touch #StarsBlogging-SexySocialButtons li .facebook, #StarsBlogging-SexySocialButtons li:hover .facebook{
background-color:rgba(59,89,152,1);
}
.touch #StarsBlogging-SexySocialButtons li .twitter, #StarsBlogging-SexySocialButtons li:hover .twitter{
background-color:rgba(64,153,255,1);
}
.touch #StarsBlogging-SexySocialButtons li .googleplus, #StarsBlogging-SexySocialButtons li:hover .googleplus{
background-color:rgba(228,69,36,1);
}
.touch #StarsBlogging-SexySocialButtons li .YouTube, #StarsBlogging-SexySocialButtons li:hover .YouTube{
background-color:rgba(174,45,39,1);
}
.touch #StarsBlogging-SexySocialButtons li .rss, #StarsBlogging-SexySocialButtons li:hover .rss{
background-color:rgba(255,102,0,1);
}
</style>
<div class="StarsBloggingSocialButtonsBorder">
<ul id="StarsBlogging-SexySocialButtons">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/pages/Starsblogging/324532194302709">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/StarsBlogging">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/110363707893612306708">Follow us on Google+</a></li>
<li data-alt="Subscribe us on YouTube"><a class="icon YouTube" href="#">Subscribe us on YouTube</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://starsblogging.blogspot.com/feeds/posts/default">Subscribe with RSS</a></li></ul></div>

Now Make These Changes

• Now replace the red bold links with your own.
• Replace Facebook, Twitter, Google Plus URL, YouTube and RSS.
• Save your widget and view the widget that will attract you and force to click.

Posted in: Blogger-Widgets, Blogging-Tips