As a blogger, Google Feedburner has a two major features that we like. It is the ability of Feedburner to allow visitors to easily subscribe to our blog via Email. And also Feedburner gives user a better place to view our RSS feed together with different social media sharing buttons.
The Subscription Form
- It is simple, but presentable.
- It can modify easily according to your template design.
- It will load faster on any browser.
- Attractive to visitor.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
<div id='Subscription'> <div class='heading'>
Sign Up in Seconds</div> <p>Sign up with your email address to receive hot updates straight in your inbox.</p><div class='emailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Internetsmash', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type='text' name='name' placeholder='Your Name' /><input type='text' name='email' placeholder='Your Email' /><input type="hidden" value="Internetsmash" name="uri"/><input type="hidden" name="loc" value="en_US"/><input value="Sign Up Now!" class="button" type="submit" />
</form><p id='credit'>Powered By: <a href='http://www.internetsmash.com'style="color:#F4836A" rel='nofollow'>Internetsmash</a></p></div></div>
<style type='text/css'>
#Subscription { width: 313px; height: 290px; border: 1px solid #51C0F9; border-radius: 5px 5px 0px 0px; }
#Subscription .heading { padding: 10px 20px; line-height: 20px; font-size: 20px; font-weight: 600; font-family: open sans; color: rgb(38, 38, 38); text-align: center; text-shadow: 0px 1px rgba(255, 255, 255, 0.75); background: none repeat scroll 0% 0% rgb(81, 192, 249); }
#Subscription p { font-family: open sans; font-size: 13px; color: rgb(12, 12, 12); line-height: 25px; padding: 5px 15px 0 15px; margin: 0; }
#Subscription .emailsub { padding: 0px 20px 10px 20px; }
#Subscription .emailsub input { color: rgb(170, 170, 170); padding: 10px; margin-top: 10px; font-size: 15px; font-family: open sans; width: 92%; border: 1px solid #ccc; border-bottom: 2px solid #ccc; border-radius: 5px; transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; }
#Subscription .emailsub input:focus { border-color:#F4836A; outline: none; box-shadow: 0 0 2px 1px #F4836A; }
#Subscription .emailsub .button { background: #F4836A; color: white!important; border:none; outline: none; border-bottom: 3px solid #B3614E; transition:background .4s linear; width: 90%; margin-right: 5%; margin-left: 5%; font-weight: 600; cursor:pointer; }
#Subscription .emailsub .button:hover{background: #DD7761;}
#credit {margin: -5px 0 0px 15px!important;text-shadow:none; opacity:.6;}
</style>
Customize the Subscription Form
Red Color: Just replace the text with your own Feed Address. For example your Feed Address is "http://feeds.feedburner.com/Internetsmash" just copy only the Internetsmash text and rewrite the color red text above.Purple Color: You may also change the text if you are not confortable with it.
Blue Color: To change the width and height of the subscription form just change its value.
Optional
If you don't want to make a multiple CSS file on your template you may put the subscription form CSS file together with your Template CSS. To do this just follow the steps below.Cut the codes between <style type='text/css'> and </style> and go to your Blogger Dashboard->>Template->>Edit HTML->> just above this code
]]></b:skin> paste the CSS code you copied between <style type='text/css'> and </style> and click Save template.Note: Delete the code <style type='text/css'> and </style> after you cut the codes between them because it's no longer using.
