How To Add Subscribe Widget On Blogger Sidebar

Subscription widget is almost popular with all the blogs and its a common practice to have a subscribe widget on your blog’s sidebar to engage your visitors by following on Twitter and reading through RSS. So in this post, you will learn how to add a beautiful subscription widget on your blog’s sidebar. Before getting into the tutorial take a backup of your template for some good reasons.

subscribe widget for blogger

 

Live Demo 

Step 1: As usual login to your Blogger dashboard and navigate to Design > Edit Html and search for the code ]]></b:skin> and replace it with the below code

#subscribebox{list-style:none; margin:0px}
#subscribebox li{padding:10px 5px; position:relative; margin-top:0; margin-right:0; margin-bottom:5px; margin-left:0; height:64px; opacity:0.75; -moz-opacity:0.75}
#subscribebox li:hover{ background-color:#f4f4f4; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -khtml-border-radius:5px; opacity:1; -moz-opacity:1; -webkit-transition:opacity 1s ease-out}
#subscribebox li img{float:left; position:relative; padding:0px; margin:0px 10px 0px 0px}
#subscribebox li h4{margin:-6px 0 3px 83px; font-size:15px; line-height:26px; color:#8B3E2F; text-shadow:1px 1px 0px #fff; font-family:Helvetica,Arial,Verdana; font-weight:bold; clear:none}
#subscribebox li p{margin:0 0 0 0; font-family:Trebuchet MS,sans-serif; font-size:13px; letter-spacing:-0.02em; clear:none; text-indent:0px}
#subscribebox li a.link{background:none; border:none; top:0; left:0; right:0; bottom:0; width:100%; height:100%; position:absolute; z-index:50}
]]></b:skin>

Step 2: Go to Page Elements and click on Add a Gadget on the sidebar and paste this code

<ul id="subscribebox">
<li>
<a class="link" href="http://feeds.feedburner.com/YOUR FEED NAME" target="_blank"></a>
<img src="http://3.bp.blogspot.com/_ubwIhqPcR6M/TCHnmSM6jcI/AAAAAAAAA7A/z4X5p_TQt20/s1600/rss_48.png" alt="RSS Feeds" />
<h4>RSS Feed</h4>
<p>Subscribe To RSS Feed</p>
</li>
<li>
<a class="link" href="http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEED NAME&loc=en_US" target="_blank"></a>
<img src="http://1.bp.blogspot.com/_ubwIhqPcR6M/TCHna8KiyVI/AAAAAAAAA64/ACI622bhHTY/s1600/mail_forward_48.png" alt="RSS E-Mail Delivery" />
<h4>E-Mail Delivery</h4>
<p>Subscribe To Email for the latest updates right to your email</p>
</li>
<li>
<a class="link" href="http://twitter.com/YOUR TWITTER HANDLE" target="_blank"></a>
<img src="http://4.bp.blogspot.com/_ubwIhqPcR6M/TCHnQ2fRV0I/AAAAAAAAA6w/Kj8nwFNuT_A/s1600/twitter_48.png" alt="Follow Us On Twitter" />
<h4>Twitter</h4>
<p>Follow Us On Twitter to join the list of 1000  followers</p>
</li>
</ul>

Now save it and see the beautiful subscription widget on your blog. If you have any trouble in making it work, drop in your comments.

June 23, 2010. This entry was posted in Blogger, Facebook, Tutorials, Twitter and tagged , . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

22 Responses so far!

  1. Pingback: Tweets that mention How To Add Subscribe Widget On Blogger Sidebar | Bloggermint -- Topsy.com

  2. This is very useful for me..thanks

    I hope you can see myBlog

  3. @Damar – I am not able to see that on your blog

  4. This Script will be really useful for Bloggers!
    .-= Karthikeyan´s last blog ..Save Human Life With EPI Life =-.

  5. Nice demo blogger sidebar.

  6. I will try on my blog

  7. Didnt work 4 me it came in really big and when i copy the code on the second step the lil numbers on the side og the code picked up as well :(

  8. @Dee – This tutorial is for blogs which has two column template and you have a three column template with shorter width widgets. So this tutorial doesn’t fit your blog template.

  9. Nice screenshot but the code you give us.. hmmppp….!!! try it when you copy the code all the number at the side of the code are included.. anyway thanks..

  10. Nice man……..i m going to try on my blog…http://topblogger1.blogspot.com/
    .-= kbharathb´s last undefined ..If you register your site for free at =-.

  11. I think it’s good, but It would be better to see a live demo before installing it
    .-= speak_english´s last blog ..Next English Ebook =-.

  12. @Speak English – You can see the live demo link included in the post.

  13. Ok, thank you.
    .-= speak_english´s last blog ..Next English Ebook =-.

  14. Thanks so much, this is awesome!
    .-= Joey´s last blog ..Strange Spending- my new website =-.

  15. hello sir i need ur help.. i have mystique blogger template and i want to add boxtabs in it… but i dont know how to do that .. my email is rajendrakohinoor G mail

  16. I would really like a ‘subscribe’ gadget similar to what you’ve got on the top right of this site, can you add this code too? :)

  17. thanks Franklin Manuel for sharing this tips.

  18. Thank you for these tips!

  19. This looks neat on my site. Thanks.

  20. nice for sure i will use it in my personal blog ………and its easy to apply too.

  21. Aw, this was a really nice post. Taking the time and actual effort to produce a great article… but what can I say… I put things off a lot and
    don’t manage to get anything done.

Leave a Reply

Your email address will not be published. Required fields are marked *