Home » Blogger Tutorials, Tricks and Hacks » Chronicl Thesis Skin’s Social Media Listing Widget

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Chronicl Thesis Skin’s Social Media Listing Widget

Chronicl Thesis Skin’s Social Media Listing Widget

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

997 views

Would you like to have another different way of showing and sharing your social sites to your site visitors? Try out this social media widget from BlogTipsNTricks. Its design and appearance was based on the WordPress Chronicl Thesis skin. You can find the live demo here.

Read and follow the instructions below.

  • In your Blogger dashboard’s “Design” section, go to “Layout”.
  • Click on “Add a Gadget” and then choose “HTML/JavaScript”.
  • Copy/paste the code below:
<div>
<ul>
<li><a href="http://feeds.feedburner.com/chandeepsBlogTips">Subscribe to the RSS Feed</a></li>
<li><a href="https://twitter.com/chandeeban">Follow me on Twitter</a></li>
<li><a href="https://www.facebook.com/blogtipsntricks">Find me on Facebook</a></li>
<li><a href="https://plus.google.com/u/0/b/101110372634917065358/">Join me on Google+</a></li>
<li><a href="http://in.linkedin.com/in/blogtipsntricks">Connect with me on LinkedIn</a></li>
<li><a 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>     
  • Replace the highlighted portions with that of your own corresponding profile URLs
  • Save the widget and you’re done!

Hope you enjoy your new social media widget.

Liked It ? Please Share

Comments

2 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. dely says:

    not working…is the code right?

  2. dd says:

    not working

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here