You would always agree with me that apart from good content, good design is another factor that keeps people to stay on your blog.

With a good RSS subscribing form, it can also lure people to subscribe for your feeds, thus giving a larger and wider outreach. Here a beautiful design Email subscription form to put on your blog

beautiful feedburner form

– Log in to your blogger account, go to Design >> Page Element.

– Click Add Gadget and select ‘HTML/Javascript’

– Paste the code below.


<div class="rss_box">Sign up to receive latest Update free</div> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= YOUR FEED BURNER ID ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" id="rss_form"> <input type="text" name="email" id="email_rss" value="Enter your email!" onblur="if(this.value == '') {this.value = 'Enter your email!';}" onfocus="if (this.value == 'Enter your email!') {this.value = '';}" /> <input type="submit" name="subscribe_email_btn" id="subscribe_email_btn" value="" /> <input type="hidden"value="technology/tricks" name="uri"/> <input type="hidden"name="loc" value="en_US"/> <div align="center"><small><a href="http://oscarmini.com/2012/07/beautiful-rss-feedburner-form-design-for-blogger.html" rel="dofolow" target="_blank">Get this Widget</a></small></div> </form><style>.rss_box { /*in content */ display: block; background-image:url(http://www.technologytricks.com/themes/techified/wp-content/themes/techified/images/rss_icon.jpg); background-repeat:no-repeat; padding-left: 40px; height: 40px; border: 0;}#sidebar #rss_form { /*in content*/}#rss_form #email_rss { background: none; border: 1px solid #CCCCCC; margin: 0px 0px 0px 7px; padding: 2px 3px 0px 30px; width: 182px; height: 18px; outline: 0; color:#666666; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; font-size:12px; background-image:url(http://www.technologytricks.com/themes/techified/wp-content/themes/techified/images/email.png); background-repeat:no-repeat; background-position: 5px 3px;}#rss_form #subscribe_email_btn { width:50px; height:21px; border:none; background:url(http://www.technologytricks.com/themes/techified/wp-content/themes/techified/images/go.png) no-repeat; cursor:pointer; margin-left: 7px;}</style>

– Replace YOUR FEED BURNER ID with your Feed URL

– You can save to enjoy the pleasant design.

9 COMMENTS

  1. Hi Oscar,

    Your form looks really nice. Thank you!

    I was wondering how to I add a different “Go” image for hover effect? I have already created the image. I just need the CSS code to add it.

    Please advise.

    Thanks,
    Sze

LEAVE A REPLY

Please enter your comment!
Please enter your name here