HackingUniversity - Hacks . Tricks . How-To's

17 February 2013

Simple Footer Newsletter Subscribe Box for Blogger Blogs

Earlier I posted Awesome Colorful Newsletter Box and today I have found another footer feedburner subscribe box which you can use right below your posts so that people after reading your posts can subscribe to your blog. Well now you can see the image of what subscribe box looks like, so you can customize its appearance if you want too depends on your creativity. So now just follow below steps to add this subscribe box to your blog.

subscribe-box

  1. Open Blogger.com > Template > Edit HTML.
  2. Now press Ctrl + F and search for ]]></b:skin> tag & paste below code above it.

    #HU-Footer-Subscribe-Box{border:1px solid rgba(221,221,221,0.43);border-radius:10px 10px 10px 10px;box-shadow:0 0 30px #EEE inset;margin-bottom:10px;padding:2px;text-align:center}#HU-Footer-Subscribe-Box h1{color:#000;font-family:'Open Sans Condensed',sans-serif;font-size:24px;line-height:30px;margin-bottom:5px;margin-top:5px;padding:0}#HU-Footer-Subscribe-Box input{border:medium none;border-radius:5px 5px 5px 5px;box-shadow:0 0 5px #C2C2C2 inset;color:#666;font-family:georgia;font-size:14px;margin-bottom:5px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px}#HU-Footer-Subscribe-Box .submit{background:none repeat scroll 0 0 #Bf0100;border:0 none;border-radius:3px 3px 3px 3px;box-shadow:0 1px 2px #B6B6B6;color:#FFF;cursor:pointer;font-family:georgia;font-weight:700;margin:0 auto;text-shadow:1px -1px 0 rgba(0,0,0,0.4);text-transform:uppercase}#HU-Footer-Subscribe-Box .submit:hover{color:#FFF;opacity:0.8}#HU-Footer-Subscribe-Box .submit:active{background:0 repeat scroll 0 0 transparent}

  3. Now just navigate to Blogger > Layout > Add Gadget.
  4. Now add below code into HTML/JavaScript Gadget and hit Save. (you can put this code anywhere you want to display this gadget.)

    <div id="HU-Footer-Subscribe-Box"><h1>Subscribe our email newsletter for future updates :)</h1><p></p><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HackingUniversity', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><center><input name="email" size="30" type="text" required='required' placeholder="Enter your email address :)"><input name="uri" type="hidden" value="HackingUniversity"><input name="loc" type="hidden" value="en_US"> <input class="submit" type="submit" value="Subscribe"></center></form></div>

  5. So now just change the lines in blue with your personal feedburner username and now refresh your blog and see this subscribe box live.