Attractive Subscribe Section For Blogger

Save on Delicious

In this article i am going to explain how to add a attractive subscribe section in your blogger blog. This subscribe section is included Feedburner feed and Email subscriptions, Twitter and Digg follow option. So let see how to add this social subscribe section in blogger blog.

Step 1 :

         1. Log in to your dashboard--> Layout - -> Edit HTML
         2. Click on "Expand Widget Templates"
         3. Find this Code: You can use browser search function by just pressing Ctrl+F and Use Ctrl+C to Copy and Ctrl+V to Past.
         4.Now add this code given bellow before ]]></b:skin> and Save it after done.

.subbox{width:280px;border:0 solid #141414;overflow:hidden}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:105px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:105px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:105px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.diggbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:105px}
.diggbox:hover{border:1px solid #92aed1}
.diggbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.diggbox a:hover{color:#7c8a9b;text-decoration:underline}

Step 2: Add a HTML/Javascript in your blogger blog right side bar from the Page Element Under Design and past the bellow code in this box and save it.

<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/techwev" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkN-giH58_CAMEAe2YXsdtrRAdk3QvCs6xOvGuu1v4mPDgV2rEUurBV5N_EtdqJA5yfmPFCMXQySya_N9lMU9IK0UOIUUyiy-SFql-bPdspTkBvrasmDvVGeh7c1RkoX350KaLULnIA_pP/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/techwev" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=techwev" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRBkXTRjdwHK696HRAp3N9UD2hlklF997im6Mw90GCOo2pd5PeCFjmOlx3C15W55IcpgWnaqk_m-MkW9J0FF3oelHguFI7OvuFi6kesvcPQs7W-2xvRY7T9K6yXMpvbDr1y88XdoQ5ebxv/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=techwev" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/techwev" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggblb7QDhPTXmxRCOTZgpo1yRyw71jzKKQDkbym83VMwVGIyfWs70Wfc-vUbHqjeNRpnpz0Y3i8LfAo2F1WUdp-1yA7vOUrWnHTCvcIMGYN-ho6kP-qToUX2v6nf7MQAxOZDQ85GNPSGjU/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/techwev" target="_blank" rel="nofollow">Follow Twitter</a>
</div></td>
<td><div class="diggbox">
<a href="http://www.digg.com/techwebd" target="_blank" rel="nofollow"><img src="http://img209.imageshack.us/img209/2774/digg.jpg" alt="Digg" title="Follow On Digg" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.Digg.com/techwebd" target="_blank" rel="nofollow">Follow On Digg</a>
</div></td>
</tr></table>