This Tutorial will help you to add beautiful subscribe box for your blogger.This is WordPress style.You can add this subscribe box to end of the post.So, you can add this easily.
1. Log in to blogger account and Click drop down.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5. Find this tag by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> tag
#Subscribe{background:#D00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAoqBN6jVXxvrIBsJCFqTQk8EKrcQ-DW2ywDwWIc6-nMG0GTMFQh2u1NJobmuWGheOGICOGzORWft8P5EWvOOkkxm5wWi6qUmSg2J9kjXM0Ud6j1aL1wqwsuKipW5JqDMCUm7PL8qu53o/s1600/EM-brown-letter-256x256.png) no-repeat 98% center;border-radius:5px;box-shadow:0 0 30px #600 inset;height:100px;margin:5px auto 0;padding:10px;width:700px;}
#Subscribe .Arrow{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFtz25H4sVVxg77gTI0eCzYtKCQ11lnO7xYiQlDMN-mPINRF9GK-ZNcBZPVDx87Yj8lRtwd9Aimgk5j_FeebIQ0I47f4EtIJxXuUwmlW3kJbJDYLX8RS9eOqXv_JFeTSibk7R_CxEab7s/s1600/old_edit_redo1.png) no-repeat;float:left;margin:0 0 0
background-size: 80px;
}
#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:24px;margin:5px 0 0 80px}
#Subscribe table{margin:10px 0 0 100px;}
#Subscribe form input.Button{background-color:#148314;border:1px solid #7a7a7a;border-radius:5px;color:#fff;padding:5px 10px;position:relative;width:125px}
7. again Find this tag by using Ctrl+F <data:post.body/>
8. Paste below code after <data:post.body/> tag
<!--NewsLetter Starts-->
<div id="Subscribe">
<div class="Arrow">
<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=yourfeedname', '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='yourfeedname'/><input name='loc' type='hidden' value='en_US'/></td><td><input type='submit' class="Button" value='Subscribe Now'/></td></tr></table></form>
</div>
</div>
<!--NewsLetter Ends-->
Replace yourfeedname with your feed name
Save this Image For Your Back UP: If Image Host down ,Upload this image
in any image host Website And Then replace the link in Above Code
11. Now save your template.
You are done...
No comments:
Post a Comment