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 ...

- Login To Blogger Account.
- Click Blog Title → Template → Edit HTML.
- Click Proceed Button.
- Search For The Following Code Using Ctrl+F.
]]></b:skin>
- 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>
- Search For The Following Code Using Ctrl+F.
<data:post.body/>
- 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('http://feedburner.google.com/fb/a/mailverify?uri=Tin24h.us', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <table><tr><td><td><input name='Name' onblur='if (this.value == "") {this.value = "Enter Your Name";}' onfocus='if (this.value == "Enter Your Name") {this.value = "";}' class="Text" type='text' value='Enter Your Name'/></td><td><input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email";}' onfocus='if (this.value == "Enter Your Email") {this.value = "";}' 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-->
- Replace Tin24h.us With Your Feed Name.
- Click Save Button To Save Code.
- You Are Done And Check Demo Below.
Subscribe Updates, Its FREE!
No comments: