Sunday, September 2, 2012

Add Beautiful Email Subscription Box V2 In Blogger Blog

Author: Gagan Masoun
How to Add Beautiful Email Subscription Box V2 In Blogger BlogYour blog readers are not joining your RSS feed.Then try this beautiful Email subscription box V2 in your Blogger blog.You may seen Email Subscription box on many blogs it help readers to stay connected with blog's updates. In This Tutorial You Will Learn How to Add Beautiful Email Subscription Box V2 In Your Blogger Blog.

You can also increase your readers by adding Premium Subscribe Box to your Blogger or WordPress blog.I have also shared tutorial about small size Beautiful Email Subscription Forms.Let's start the tutorial:

Add Beautiful Email Subscription Box V2 In Blogger Blog

You May Like to Read:

How to Add Beautiful Email Subscription Box V2 In Blogger Blog

  • Go To Blogger Dashboard > Click Blog Title → Template → Edit HTML → Proceed
  • Checked The "Expand Widget Templates" Box.
  • Search For The Following Code Using Ctrl+F
]]></b:skin>
  • Add The Below Code Above/Before ]]></b:skin>
 #Subscribe{background:#D00 url(https://lh4.googleusercontent.com/-rlmc0ojAP6w/UEBbz7z4kvI/AAAAAAAABAU/YuSXNdMxB6U/s72/email.png) no-repeat 98% center;border-radius:5px;box-shadow:0 0 30px #600 inset;height:100px;margin:5px auto 0;padding:10px}
#Subscribe .Arrow{background:url(https://lh6.googleusercontent.com/-GpemTsHpc4w/UEBbgb44xHI/AAAAAAAABAE/mDTUyfvnksg/s72/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:10px 0 0 100px;}
#Subscribe form input.Button{background-color:#148314;background-image:url(http://lh4.googleusercontent.com/--9RbYGLhmI8/UAp2hm47JEI/AAAAAAAAAxI/t_neer3k3IM/s36/Subscribe.png);border:1px solid #7a7a7a;border-radius:5px;color:#fff;padding:5px 10px;position:relative;width:125px}
]]></b:skin>
  • Search For The Following Code Using Ctrl+F.
<data:post.body/>
  • Paste The Code Below After Above Code In Your Template. 
<!--NewsLetter Starts-->
<div id="Subscribe">
<p class="headline">Subscribe Updates, Its FREE!</p>
<span class="Arrow"></span>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <table><tr><td><input 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;;}' class="Text" type='text' value='Enter Your Email'/> <input name='uri' type='hidden' value='BlogsDaddy'/><input name='loc' type='hidden' value='en_US'/></td><td><input type='submit' class="Button" value='Subscribe Now'/></td></tr></table></form>
</div>
<!--NewsLetter Ends-->

Remember Notes 

  • Replace BlogsDaddy (Yellow Highlighted) With Your RSS Feed Name.
  • Click Save Button To Save Code.
  • Its All Done, Check Your Blog Now...
If you need any help, ask via comment.Blessings and Peace... :) Happy Blogging!

AuthorAuthor - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.

0 comments:

Post a Comment