Add Beautiful Subscribe Box v3 To Blog

In This Tutorial You Will Learn How To Add Beautiful Subscribe Box v3 To Blog. This Subscribe Box Is Design Like Subscribe Box In Wordpress Blogs. This Widget Also Supports Hover Effect On Almost All Latest Web Browsers.Recommended: Add This Beautiful Subscribe Box Below The Post. You Can Also Check My Previous Design On Subscribe Box v2. Follow Steps Below To Add v3 To Your Blog :)

1. Login To Blogger Account.
2. Click Blog Title → Template → Edit HTML.
3. Click Proceed Button.
4. Search For The Following Code Using Ctrl+F.

]]></b:skin>

5. Replace The Above Code With The Following Code.

#Subscribe{background:#0D0 url(https://lh4.googleusercontent.com/-rlmc0ojAP6w/UEBbz7z4kvI/AAAAAAAABAU/YuSXNdMxB6U/s72/email.png) no-repeat 98% center;border-radius:5px;box-shadow:0 0 30px #600 inset;height:100px;margin:5px auto 0;padding:10px}
#Subscribe form input.Text{background:#FFF;border:1px solid #800;border-radius:5px;box-shadow:0 0 5px #600 inset;color:#333;float:left;padding:5px 10px;width:145px}
#Subscribe .headline{color:#FFF;font-size:28px;margin:5px 0 0 40px}
#Subscribe table{margin:15px auto;}
#Subscribe form input.Button{background-color:#148314;background-image:url(http://lh4.googleusercontent.com/--9RbYGLhmI8/UAp2hm47JEI/AAAAAAAAAxI/t_neer3k3IM/s36/Subscribe.png);border:1px solid #7a7a7a;border-radius:5px;color:#fff;padding:5px 10px;position:relative;width:125px}
#Subscribe {filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter: gray;-webkit-filter: grayscale(1);}
#Subscribe:hover {filter: none;-webkit-filter: grayscale(0);}
]]></b:skin>

6. Search For The Following Code Using Ctrl+F.

<data:post.body/>

7. Paste The Code Below After Above Code In Your Template.

<!--NewsLetter Starts-->
<div id="Subscribe">
<p class="headline">Subscribe Updates, Its FREE!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Tin24h.us&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <table><tr><td><td><input name='Name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Name&quot;;}' onfocus='if (this.value == &quot;Enter Your Name&quot;) {this.value = &quot;&quot;;}' class="Text" type='text' value='Enter Your Name'/></td><td><input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email&quot;;}' onfocus='if (this.value == &quot;Enter Your Email&quot;) {this.value = &quot;&quot;;}' class="Text" type='text' value='Enter Your Email'/> <input name='uri' type='hidden' value='Tin24h.us '/><input name='loc' type='hidden' value='en_US'/></td><td><input type='submit' class="Button" value='Subscribe Now'/></td></tr></table></form>
</div>
<!--NewsLetter Ends-->

8. Replace  Tin24h.us  With Your Feed Name.
9. Click Save Button To Save Code.
10. You Are Done And Check Demo Below.

Subscribe Updates, Its FREE!

Categories: css , Javascript