Wanna customize your feeds e-mail subscription look? Make it look nice and beautiful with some style. Try to change it into something like this :
But, for proceeding this, make sure have burnt your feeds with www.feedburner.com/. So let's start our customization. Follow this steps :
2. Choose HTML/JavaScript Widget
3. Put this code in it :
<div align="center"><a title="Subscribe to my feed" rel="alternate" type="application/rss xml" href="http://feeds.feedburner.com/howtohouse"> </a><a href="http://feeds.feedburner.com/howtohouse"><img style="border:0" src="http://feeds.feedburner.com/~fc/howtohouse?bg=FFCC00&fg=444444&anim=1" alt="" width="88" height="26" /></a><a href="http://feeds2.feedburner.com/howtohouse" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHs71QOYov8NOWH8OS1sO3Ra2hX3f0p7n_96ZoJ68hBH9AAuWvSenEZ3m6wxzn-A7oD8Fu08J4wgcpCoUlAOT8gzbZmPoj8t0KIOVIgAvrOja_hOuNAlj17sI0YGlEfdUCQYMI2_tBex_/s400/MBT-RSS-FEED.gif"/></a><p><a href="http://feeds2.feedburner.com/howtohouse" rel="alternate" title="Subscribe to my feed" type="application/rss xml">Subscribe HOW-TO HOUSE now! </a><span style="color: #006699; font-weight: bold;">Enter your email address:</span></p>
<style>
input.mbt1 {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;
}
input.mbt1hov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtohouse', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:#FFCC66; background: #fff; border:2px solid #FFCC66; width: 150px;" name="email" type="text"/><input value="howtohouse" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" value="GO!" class="mbt1" type="submit"/></form><br/></div>
4. Change howtohouse to your feeds name.
Change
http://feeds2.feedburner.com/howtohouse
to
http://feeds2.feedburner.com/YOUR FEEDS NAME HERE
5. Change #FFCC66 & #006699 the color based own your template theme.
6. You can change the icon image too by change this image URL. You can search icon at Google search engine, keyword = "RSS feed icon".
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHs71QOYov8NOWH8OS1sO3Ra2hX3f0p7n_96ZoJ68hBH9AAuWvSenEZ3m6wxzn-A7oD8Fu08J4wgcpCoUlAOT8gzbZmPoj8t0KIOVIgAvrOja_hOuNAlj17sI0YGlEfdUCQYMI2_tBex_/s400/MBT-RSS-FEED.gif
7. And, it's FINISH! WELL DONE!
Save it & preview your work!! Nicely done! :D
dude, this is awesome ! :q
ReplyDelete