Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

Chronicl Thesis Skin's Social Media Listing Widget For Blogger

On By // 5 comments
Advertisement
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:-

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. :)

5 comments:

  1. very nice widget. Thanks a lot chandeep bro

    ReplyDelete
  2. Hi, Chan Deep

    I’m currently using Chronicl on my blog but I couldn't find my blog RSS feed in view source. Because of this I’m having problem while submitting my blogs on RSS sites.
    Please have a look.

    http://www.ashrafulayan.com/

    Thanks…

    ReplyDelete
  3. thanks for sharing kind of information.

    ReplyDelete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep