Add Css Social Widget For Blogger

SOCIALIZE IT →

Tweet

Previously I was posted about CSS3 Widget With Zoom & Shrinking Effect And today we are going to post about New CSS social widget for blogger/blog.This widget is CSS powered social widget with RSS, Facebook, Twitter, Google+, And LinkedIn.This widget can attract your blog visitors easily i am sure.This CSS widget is  vertically and smooth.This widget is simple and clean.So, Let's see below how to add it on your blog.

Adding CSS Social Widget For Blogger

• Log In To Blogger.com
• Go To Your Blogger Dashboard
• Navigate To Layout And Add A Gadget
• Select "HTML/JavaScript" Gadget
• Now Copy The Below Code And Paste It In Inside The Box.

<style type="text/css">
.TechBlogGuide-chronicl-social {  width: 320px;  margin: -10px;  }
.TechBlogGuide-chronicl-social ul {  margin: 0;  padding: 0;  }
.TechBlogGuide-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }
.TechBlogGuide-chronicl-social ul li a {   color: #fff;   display:block;  }
.TechBlogGuide-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }
.TechBlogGuide-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.TechBlogGuide-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.TechBlogGuide-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.TechBlogGuide-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.TechBlogGuide-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
</style>
<div class="TechBlogGuide-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/Blogger widget">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/Blogger widget">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/Blogger widget">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/
111604591527304843321/">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/inBlogger widget">Connect with me on LinkedIn</a></li>
</ul>
</div>

Customization

• Replace The Highlighted text With Your Own Social Media Link.
• That's All

Get Free UpDates ?

If yes, Then enter your email below to get

more such great articles in your inbox

Powered By HAmza Gujjar Get Free !

SOCIALIZE and Widget By Hamza_Gujjar

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →