Wednesday, August 22, 2012

Stylish Subscription Widget For Blogger and WordPress

Author: Gagan Masoun
Stylish Subscription Widget For Blogger and WordPress
Many of this blog readers asked me which plugin/code used in Chronicl Thesis Skin sidebar for stylish Subscription Widget. So today I decide to share this with you! This is my second tutorial for subscription widget in this month. Coming back to tutorial this widget is very easy to install on your blogger and WordPress blog.

It’ll make your sidebar more attractive! It contains RSS Feed, Twitter, Facebook, Google+,Pinterest and YouTube.

Live Demo

Before moving on, you may like to read:

Adding Stylish Subscription Widget 

You just need to place a code to your blog widget Follow following steps to add Customized and Stylized Subscription Widget to WordPress and Blogger both!

Adding Subscription Widget To Blogger
  • Go to Dashboard > Design > Page Elements.
  • Click Add A Gadget. In window, select HTML/Javascript .
  • Copy the code below and paste it inside the box.
  • Save The Gadget
Adding Subscription Widget To WordPress
  • Go to Dashboard > Appearance > Widgets > Available Widgets
  • Drag Text Widget Into a Sidebar.
  • Paste In The Code.
  • Save Widget & Its Done

Code For Stylish Subscription Widget

<div class="bd-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/BlogsDaddy">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/BlogsDaddy ">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/BlogsDaddy ">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/u/0/106217413057730068740">Join me on Google+</a></li>
<li><a class="pinterest" href="http://pinterest.com/gaganmasoun">Connect with me on Pinterest</a></li>
<li><a class="youtube" href="http://www.youtube.com/user/5abiRaag">Watch me on YouTube</a></li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/
.bd-chronicl-social {  width: 320px;  margin: -10px;  }
.bd-chronicl-social ul {  margin: 0;  padding: 0;  }
.bd-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }
.bd-chronicl-social ul li a {   color: #fff;   display:block;  }
.bd-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }
.bd-chronicl-social ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYXZN7zsLQzEiXvHntPsqpQhi85_rDDXFMbJ77un62pFw91wDOsQyjXtj6Ei3rld8wjvjM-sIqhvq0zIHS8rJrhoyn-5-8QA1w_pgNANdo0LnbZuP8ni9FDNf203OXWU0MLDG2n2HxZP4/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.bd-chronicl-social ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Bh6mzMNeRF23kwZ1SvJz8_wgmkm9KSNH7oLtI19pX2TRK4hoVy8Sye1C7NsGthNQGZPrN-hHyBBgpr30Jg59qcrVPmN1bmHN1iYsISOpl52yodb2e6WLKKTDl0cytaFTTAiMecfhWEw/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.bd-chronicl-social ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjraLplMHIbl2C7TqBhPYgorokz43Oa_KO4tOTzfh7NbLT9yr_WiS4yhI5of0T7QradCdGTehQDqSdSHMC-wn7f1X9KoekMzXEFBsXCtke0JajzOJciSvROW6cHyctMj_nfiZPOVfIFOtE/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.bd-chronicl-social ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT0q7pMs-djKG7wyE8SuIH3d48ODeiEKN-S2lf-xFy8FOC1CJnL-u1ajrk6kXoHPQtMTgTPLnlSFn-Dr0AHtbSos8MTEbO3vhGX8GzinHXaN9PT7mS2gm1oAQAUWqZT_D3BmJ-iyYeMD0/s1600/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.bd-chronicl-social ul li .pinterest { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdWLSXFAwWi1Xr11CIuOmCx4s6xaOPmhpuFFwPCGn-6hXiSzNkdirKOBOgA9TAFAgt56toXwGWeU2atZutadihIhH7XUsJhLL0irRbV3jWYGu3igiAkbysFVFHkl9E2NfOALnURCjS0O8/s1600/pinterest.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
.bd-chronicl-social ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEismWj5uRn5rzomvJRm3iW0ORxw5DkSd6G-dlv-WLf7uA3lj_s_mBMtQjwVrWW5mPkJwk4T-S6ZjaGG_40m42YeakrcBkWL5zDmqMPxEZ1H9BjrFOh_Psck4Y0PDOcD5Pzy2pGK_6XZG5I/s1600/Youtube-1.png") no-repeat scroll 10px center #C6312B; background-size: 20px;  padding: 17.5px 45px; }
/*]]>*/
</style>
Remember Notes : The social and feed links are highlighted in yellow, you need to change these to your own.

Share this widget if you like it and useful for you and give your feedback about the widget. We want to hear from you.Blessings and Peace :)

0 comments:

Post a Comment