Chronicl Thesis Skin's Social Media Listing Widget For Blogger

Few weeks ago we published Chronicl free responsive blogger template which was converted from the chronicl thesis skin. From that many people asked me How to add the social media widget which is in the sidebar of the wordpress chronicl thesis skin. That widget was also powered by the the web symbols regular font which uses the @font-face property in CSS3. I already mentioned in the previous post(DIY Buttons Pack-Free CSS3 Buttons For Blogger) that the font-face property was not work on blogger. So I have replaced the font with png icons and converted the widget to blogger. I hope you all like this lets see how to add this widget.

Before that you can see the live demo of the widget.

Live Demo:-

Live Demo

Add Social Media Listing Widget

1. Go to Layout >> Add A Gadget, then choose HTML/JavaScript
2. Paste this code inside it.
3. Replace the highlighted codes with your profile url.
   
   <div class="btnt-chronicl-social">
   <ul>
   <li><a class="rss" href="http://feeds.feedburner.com/chandeepsBlogTips">Subscribe to the RSS Feed</a></li>
   <li><a class="twitter" href="https://twitter.com/chandeeban">Follow me on Twitter</a></li>
   <li><a class="facebook" href="https://www.facebook.com/blogtipsntricks">Find me on Facebook</a></li>
   <li><a class="google" href="https://plus.google.com/u/0/b/101110372634917065358/">Join me on Google+</a></li>
   <li><a class="linkedin" href="http://in.linkedin.com/in/blogtipsntricks">Connect with me on LinkedIn</a></li>
   <li><a class="youtube" href="http://www.youtube.com/user/chandeep10">Watch me on YouTube</a></li>
   </ul>
   </div>
   <style type='text/css'>
   /*<![CDATA[*/
   .btnt-chronicl-social {  width: 320px;  margin: -10px;  }
   .btnt-chronicl-social ul {  margin: 0;  padding: 0;  }
   .btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }
   .btnt-chronicl-social ul li a {   color: #fff;   display:block;  }
   .btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }
   .btnt-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; }
   .btnt-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;}
   .btnt-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; }
   .btnt-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; }
   .btnt-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; }
   .btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; background-size: 20px;  padding: 17.5px 45px; }
   /*]]>*/
   </style>
4. Now save the widget and See your blog.

Please share this widget if you like it and give your feedback about the widget. We want to hear from you. :)