Subscription box to blog is one of the best way to increase readers to your blog in the same way traffic is also going to increases.Subcription boxes will be used by many blogger in order to increase the readers and make a blog popularity.It is one of the best source to increase blog traffic.If you increase your blog traffic then you can make money blogging.Today in this article iam going to show you how to create a simple and smart email subscription box for blogger.I have previously shared a tutorials how to add sliding facebook like page to your blogger with images and how to add social sharing buttons to your blogger with images.Now in this tutorial iam going to show you how to create a smart subscription box to blogger styled with html and css.This widget is very simple and will blend in any template.You just follow the below steps to get subscription box for your blogger.
Steps to create subscription boxes for blogger
- Login to your blogger dashboard.
- Click on layout.
- Now click on Add Gadget and choose Html/Javascript.
- Now copy/paste the below code in a content space.
Code to Copy
<!--WWN Email Subscription Box http://worldwidenetworkings.in/ --><style>.mbw-email{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlXd6JxF_DB-CCw0FyQnkoULvabyd1JwHum6voOfNMmWQCGhXVWQXrNdlvWWkLaVnNl6AFH4QN6oqbVxXR8NbgyeexT5aUoexT20l3Dpv56s1rlLNFV6MI5wR4ZTx7JoTcofCnH-g3s6o/s1600/subscribe.png) no-repeat 0px 20px;width:300px;padding:10px 0 0 55px;float:left;font-size:1.4em;font-weight:bold;margin:0 0 10px 0;color:#686B6C;}.mbw-emailsubmit{background:#f5bb0d;cursor:pointer;color:#fff;border:none;padding:4px;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;font-size:12px;font-family:sans-serif;}.mbw-emailsubmit:hover{background:#df8228;}.textarea{padding:2px;margin:6px 2px 6px 2px;background:#f9f9f9;border:1px solid #e3e3e3;resize:none;box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);font-size:13px;width:170px;color:#555;}</style><div class="mbw-email">Subscribe Via Email<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feeds.feedburner.com/Worldwidenetworkings, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email here" type="text" /><input type="hidden" value="worldwidenetworkings" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="mbw-emailsubmit" value="Submit" type="submit" /><!--http://worldwidenetworkings.blogspot.in/--></form></div>
- Now search for http://feeds.feedburner.com/Worldwidenetworkings and replace it with your feedburner url.
- Now search for worldwidenetworkings and replace it with your feeburner title.
- Now click on save thats it friends now your smart email subscription box is ready to use.
Further modify your RSS subscription box
If you further want to change your RSS subscription box then make the following changes
- If you want to change button on hover effect you have to change #df8228.
- To change background of your subscription box change #f5bb0d.
- You can also change Subscribe Via Email as your wish.
If you have any queries feel free to ask through your valuable comments we appreciate your comments.
