How to Add Email Subscription Box With Follow us Icons :-
Email subscription box is a great way to incline your loyal readers who are interested in your content and want to stay updated in future.Today in this post i will show you how you can get one for blog.
Features :-
1.The subscription box not only provides Email subscription facility but it also provides the users to follow the blog on different platforms like :-
1.Facebook
2.Twitter
3.Pinterest
4.Google plus
5.Rss Feed
2.The style of this subscription box is pretty simple and it will suite almost every template.
Screenshots of this Email Subscription Box :-
Let's Get Started :-
1.Go to your blogger dashboard and select your desired blog.
2.Get to the template section of your blog and click on edit template icon.
3.Press Ctrl + F to get the search bar.
4.Now search for this tag ]]></b:skin> & add the below code just above it.
5.Now hit the save template icon and head back to layout section of your blog.
6.Click add a gadget anywhere you want the Subscription box to appear.
7.Now add the ' HTML javaScript ' gadget and add the following code in it.
8.Now replace the 'xxxx' with your facebook pages , twitter profiles and Google + pages url's.
9.Now just save the gadget and you are all done.Just refresh your blog and check the new Subscription Box on your blog.
#socialbox{box-shadow: 0 5px 5px -5px #999;background:
-webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9),
to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%,
from(#f9f9f9), to(#f1f1f1));border-radius:4px;border:1px solid
#aaa;padding:5px;text-align:center;width:300px}img.beintouch:hover{background:none
repeat scroll 0 0 #ffbc99;border-radius:10px;box-shadow:0 0 10px
#ffbc12}.emailtext{background:#fff
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy62-RA1-jc43SUBs2CmhNs8tXLjEzF59vWDLC3RY-vm7yjxopGRt__GTPMMa804nzEPL4igKHZWAVsYc4B6Hr298OAwftlcY7NroG-X16E-6Rha7RfUmVjvqgLZpKVYEV1pjUQbMS3Is/s1600/mailbox.png)
no-repeat scroll 4px center;border:1px solid #7E4E27;border-radius:4px
4px 4px 4px;box-shadow:1px 1px 4px #7E4E27
inset;color:#444;font-weight:700;padding:7px 15px 7px
35px;width:180px}.ebutton{background:#D55959;border:1px solid
#D3D3D3;border-radius:4px 4px 4px
4px;color:#FFF;cursor:pointer;font-weight:700;margin-left:-18px;margin-top:5px;padding:6px
15px;text-decoration:none;text-shadow:1px 1px 0 #000}rn
5.Now hit the save template icon and head back to layout section of your blog.
6.Click add a gadget anywhere you want the Subscription box to appear.
7.Now add the ' HTML javaScript ' gadget and add the following code in it.
<div id="socialbox"><center><table align=""
cellpadding="1px" cellspacing="0px" style="width:
290pxpx;"><tbody><tr><td><a
href="http://facebook.com/xxxxxx"
rel="nofollow" target="_blank"><img class="beintouch"
src="http://i.imgur.com/xbHHy64.png"/></a></td><td><a
href="http://twitter.com/xxxxxx"
rel="nofollow" target="_blank"><img class="beintouch"
src="http://i.imgur.com/CH75kL3.png"/></a></td><td><a
href="http://pinterest.com/xxxxxx"
rel="nofollow" target="_blank"><img class="beintouch"
src="http://i.imgur.com/umdZC07.png"/></a></td><td><a
href="https://plus.google.com/xxxxxx"
rel="nofollow" target="_blank"><img class="beintouch"
src="http://i.imgur.com/BD3OXI1.png"/></a></td><td><a
href="http://feeds.feedburner.com/xxxxxx"
rel="nofollow" target="_blank"><img class="beintouch"
src="http://i.imgur.com/cjWAl2Z.png"/></a></td></tr></tbody></table></center><div></div><form
action="http://feedburner.google.com/fb/a/mailverify" class="emailform"
method="post"
onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=xxxxxx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow"><input name="uri" type="hidden" value="xxxxxx"/><input
name="loc" type="hidden" value="en_US"/><input class="emailtext"
name="email" onblur="if undefinedthis.value==""){this.value="Enter your
email...";}" onfocus="if undefinedthis.value=="Enter your
email..."){this.value=""}" type="text" value="Enter your
email..."/><input alt="" class="ebutton" title="" type="submit"
value="Subscribe"/></form></div>rn
8.Now replace the 'xxxx' with your facebook pages , twitter profiles and Google + pages url's.
9.Now just save the gadget and you are all done.Just refresh your blog and check the new Subscription Box on your blog.
Need Help ???
If you are having any trouble with it, then you should feel free to comment and contact me to get your problems solved.Keep sharing your views about this post by commenting and you can always share it to help others.I will be posting more like these in these in the future so do subscribe to stay updated , Happy blogging.
Thanks for being there Asad, Stay tuned for more!
ReplyDelete