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!