Latest : What is Blog?

Ad 468 X 60

Saturday, 16 March 2013

Widgets

Add stylish email subscription box below posts in blogger

Posted by azad hussain , 4:12 pm Be the first to comment!
Email-subscription-box
One of the most attractive way to boost traffic is by email subscription.A subscription box usually have a link to your feed address which contain email delivery,when there is a new post made in blog/website.A blog with no subscription box is useless because most users who liked your content on any topic may wanted to subscribe to regular updates of your blog and when one cannot find any button to subscribe ,simply he will leave your blog silently.By any possible way try to attract visitors to subscribe to your blogs, this will increase your visitors.So to increase your visitors you need to have a eye catching design that can easily visible by a reader. So today we will learn how to easily add email subscription box to blogger below post body.Most chance of getting readers is to place subscribe box below post body because your visitors will end up with your content at lower part of the post body,so just after finishing his reading his attention will fall on subscribe box that we will add now and you have new reader.

How to add in blogger template?

1. Log in to your Dashboard--> Template- -> Edit HTML
2. Click on "Expand Widget Templates"
3. Search "Ctrl+F" and find ]]></b:skin> . Before it paste the below code:

#mbw-box{background: -webkit-gradient(linear, left top, left bottom, from(#00aeef), to(#00aeef));;border:1px
solid #00aeef;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #00aeef)}
#mbw-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbw-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbw-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #ff00ff, #ec008c) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbw-box .submit:hover{background: -moz-linear-gradient(center top , #9e005d, #9e005d) repeat scroll 0 0 transparent}
#mbw-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
4. Again Search "Ctrl+F" and find <data:post.body/> . After it paste the below code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mbw-box'><h1>Subscribe To Get FREE Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=mybloggingway&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='mybloggingway'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
</b:if>
  • Replace mybloggingway with your feed name.
Hope you enjoyed this new email box that will increase your reader and if you feel any problem in installing then comment below and don’t forget to subscribe to our Email updates.

Subscribe To Get FREE Tutorials!

Shares
Author: Azad
Azad is the founder of AFC Network which deals with online blogging,seo,gadgets,symbian and android phones. Read More →
Labels: , ,

Subscribe to: Post Comments (Atom)