21 February 2014

Email Newsletter Signup Box For Blogger

// // 3 comments
Email Newsletter Signup Box For BloggerIf you're a blogger and do have a blog you already know how much a daily blog visitor of your blog means to you.If you get some good number of daily blog visitor of your blog it will surely help your blog a lot to gain sucess into this blogging world.So it is always a good way to provide a beautiful email newsletter sign up box to your blog visitor,by which they will get informed every time you do add a new blog posts onto your blog.So here in this post we're going to provide such a beautiful stylish email subscription box for blogger blog.If you wish to see a demo before going for it,you can get it right above.



Add Email Subscription Box on Blogger



  • Login to your blogger account.
  • Click Template as shown in figure.


Email Subscription Box Below The Blog Post In WordPress Style



  •  Download full template of your blog before making any changes in it.


    Email Subscription Box Below The Blog Post In WordPress Style




    • Search for </b:skin>. code in blogger template.



    • Now expand the code by clicking on the arrow

    • Paste the following code just above the ]]></b:skin>.



    #Subscribe{background:#D00 url(http://4.bp.blogspot.com/-dNXIw_83Ljs/UNbTlQJ_kWI/AAAAAAAABig/K65wcKzaVwI/s1600/email.png) no-repeat 100% center;border-radius:5px;box-shadow:0 0 30px #600 inset;height:100px;margin:5px auto 0;padding:10px;width:550px;} #Subscribe .Arrow{background:url(http://3.bp.blogspot.com/-OC8emvYfAeI/UNbT7DreDTI/AAAAAAAABio/x4LfcEmAA48/s1600/Left.png) no-repeat;float:left;height:70px;margin:0 0 0 10px;width: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 60px} #Subscribe table{margin:30px 0 0 10px;} #Subscribe form input.Button{background-color:#148314;background-image:url(http://3.bp.blogspot.com/-eZ4JBwu2lVU/UNbUJ-2sKZI/AAAAAAAABiw/e_qFP8pAWaQ/s1600/Subscribe.png);border:1px solid #7a7a7a;border-radius:5px;color:#fff;padding:5px 10px;position:relative;width:125px}





    • Now paste the following code just below <data:post.body/>.



    <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='Subscribe'> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify? uri=techtrickhome&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550, height=520&apos;);return true' target='popupwindow'> <table> <tr> <td> <input class='Text' name='Name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Name&quot;;}' onfocus='if (this.value == &quot;Enter Your Name&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter Your Name'/></td> <td><input class='Text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email&quot;;}' onfocus='if (this.value == &quot;Enter Your Email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter Your Email'/> <input name='uri' type='hidden' value='techtrickhome'/><input name='loc' type='hidden' value='en_US'/></td> <td><input class='Button' type='submit' value='Subscribe Now'/></td> </tr> </table></form> </div> </b:if>






      • Finally click Save template and see the result on your blog.

      Customization




      Replace techtrickhome to the user name of your feedburner feed.(You can find feedburner username by login to feedburner account and then click Edit Feed Detail at top left position, the text wriiten in front of the Feed Addresses is username of your feedburner. )

      That's it.You're all done.

       Must Read : Open Heart Social Share Widget For Blogger

      Now take a look to your blog and test how's it working.If it's not working correctly ask us for help through the comment box below.Now just wait and watch your increasing of traffic in regular basis.

      Articles You May Like

      3 comments: Leave Your Comments

      1. This is a helpful tip for those planning to build their newsletter list. Hope you can make one for Wordpress! :)

        ReplyDelete