Jan 30, 2013

Add Unique and Stylish Email Subscribe Box to Blogger

 Add Unique and Stylish Email Subscribe Box to Blogger
Want to add a classic,Stylist and 100% Unique Email Subscribe Box below post to your Blogger Blog ?.if yes then this post is just for you.this Email Subscribe Box is simple but professional 3D look type as shown in above image.

How to add this Email Subscribe Box to Blogger below each post 

Follew below simple steps to add this Email Subscribe Box to Blogger
  • Login to Blogger > Click on drop down menu >then select "Template".
  • Now you will see  "EDIT HTML" Button ,Click on it >and then click on Proceed button .Now find code like this 
<div class='post-footer-line post-footer-line-1'>

or

<div class='post-footer-line post-footer-line-2'/>


Note:-Above code may be differ According to template try to Find your below post  code ,if you can send me your template to my mail.

Now After Finding your code ,Add the below Code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="newsletterbox" style="background-color: whitesmoke; border: 10px solid rgb(228, 228, 228); font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; margin-top: 30px;">
<div class="white-border" style="border: 1px solid rgb(255, 255, 255);">
<div class="newsletterbox-wrap" style="background-attachment: scroll; background-color: transparent; background-image: url(http://2.bp.blogspot.com/-WiuOwe2mRco/UQjqclhdplI/AAAAAAAAHro/GQBmA3cyfxQ/s1600/enews-ribbon.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; margin: -17px -18px; overflow: hidden; padding: 45px 30px 40px; text-align: center; text-shadow: rgb(255, 255, 255) 1px 1px;">
<h4 style="color: #333333; font-family: 'Droid Sans', arial, serif; font-size: 26px; font-weight: normal; line-height: 22px; margin: 0px 0px 10px; padding: 0px;">
Subscribe Our Newsletter</h4>
<div style="color: #666666; font-family: 'Droid Serif', arial, serif; line-height: 22px; margin-bottom: 20px; margin-left: 35px; margin-right: 35px; padding: 0px;">
Join over 5,000 people who get free and fresh content delivered automatically each time we publish.</div>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=egytricks&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input id="subbox" name="email" style="background-attachment: scroll; background-image: url(http://4.bp.blogspot.com/-xq7HS3I0USU/UQjqcsV3ItI/AAAAAAAAHrk/Q1ixljdLayg/s1600/enews1.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(204, 204, 204) 0px 0px 5px inset; color: #999999; font-family: proxima-nova, sans-serif; font-size: 12px; line-height: 22px; margin: 0px 5px; padding-bottom: 15px; padding-left: 45px; padding-top: 15px; width: 292.796875px;" type="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;;}' value='Enter Your Email'/>&nbsp;<input name='uri' type='hidden' value='egytricks'/><input id="subbutton" style="background-color: #407ab4; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; border: 5px none rgb(236, 234, 229); box-shadow: rgb(162, 74, 29) 0px 1px 1px; color: white; cursor: pointer; font-weight: bold; line-height: 22px; margin: 10px 10px 10px 0px; padding: 10px 15px; text-transform: uppercase;" type="submit" value="Sign Up" /></form>
</div>
</div>
</div>
</b:if>

Replace the highlighted word egytricks from above code.

You can also add this Email Subscribe Box as Widget.

Now all done if get any Problem adding this then comment below .
Also Try this Hover Red Css Email Subscribe Box to Blogger

Subscribe Updates, Its FREE!

2 comments:

  1. @Mehul Mohan just copy the above code in notepad and save it as .html extension and open this file with any browser to see like demo

    ReplyDelete

 

Copyright @ 2013 EgyTricks.

Designed by Vikash | EgyTricks