Thursday, February 16, 2012

RSS, Facebook, Twitter Subscription widget for blogger



This is the first blogger widget from me. Do you want add a RSS, Facebook, Twitter subscription widget to your blog. Then you will find how to do this on this tutorial.

You can see a picture at the left side. That is how the widget appears.

So how to do this? Simply follow my steps.





  • Go to Blogger>> Template >> Edit HTML (New Interface)
  • Find  ]]></b:skin>
  • Past the following code just above ]]></b:skin>

#subscription { list-style: none; margin-top: 0px; } #subscription li { padding: 5px 10px 5px 10px; height: 60px; } #subscription li a { color: #000; } #subscription li a:hover { color: #DC002C; } #subscription li h4 { margin: 0 0 0 45px; font-size: 18px; color: #000; font-weight: bold; border: none; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; } #subscription li p { margin: 0 0 0 45px; font-size: 13px; line-height: 1.4em; color: #666; } #subscription li img { float: left; padding: 0px; margin: 0px 10px 0px 0px; } #subscription li:hover { background-color: #ff4444; }
  • Now save your Template.
  • Then go to Layout >> Add a Gadget >> HTML/JavaScript
  • Then add the following code
 
 <div id="subscription"> <ul id='subscription'> <li> <a href="http://twitter.com/Your Twitter User Name "> <img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY4cgQtGVagLMKpHmamegtoaaYxRpA_ixIsDxgWBZ0wWv0uQxbpP0RPSVvcjHIlOEZKVjxR1qtf9EZi5tvdK3kkLIJfFttEz10a0fH_tCrobm65WP-0NGXv0o6Z-uJCkATZBT7AoGQmXYo/s64/mysinhalablog-twitter.png" /><b>Follow me</b></a> <p>You Can Follow Us on Tweeter</p> </li> <li> <a href="http://feeds2.feedburner.com/Your Feedburner ID"> <img alt="Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWryIrE1-qwStFXa0U6ovsoZgIWpvOehyphenhyphenvf59xAAEQh7aqG5xXZ-YNZzKlTOl35SVrwR3gOLk9IW_FnjaZT6Ey9pC2Np7Zr-uc4NYf6uJC1nhMUPOuxhvVIhXtlhbhjzDzaejxEOmRi0qE/s64/mysinhalablog-rss.png"/></a> <h4><a href="http://feeds2.feedburner.com/Your Feed Burner Id">Posts RSS</a></h4> <p>Read Latest Post By Feeds</p> </li> <li> <a href="Your Site Facebook Page URL here"> <img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiACq3xfVojjBZAjtAxnbYUJ52Vh_yAFji2BLRT1KCORVNfksooilEUbanukVamMg4PCZJ388HiDfqCp3M9ij7q04QGB-tGNFpCoYRslTmgvuE9wef1xaBiklwepN_PezgJPMSHeyy1zJqg/s64/mysinhalablog-fb.png"/></a> <h4><a href="Your Facebook Page URL">Facebook</a></h4> <p>Become a fan of Newbloggertricks on Facebook</p> </li></ul></div>
Change Blue color marked place with your details. Then Save.

That's it. If any problem feel free to comment.

1 comments: