Friday, August 2, 2013

Email Subscription Box Below Blogger Post

14 comments Follow us on twitter
Hai Today I Am going to explain about the email subscription box below every blogger posts and the codings for adding it in your blog . Many of you will see 10 to 20 times different types of blog and you might wonder what is this email subscription box,So here am i to explain to you the email subscription box.Follow the steps and codings correctly them only you will get it guys so be attentive.

How Does Email Subscription Box help us?: Here Is the explanation to you guys email subscription the box helps you too subscribe if you write a new post or an new widget or anything this is helps you to subscribe the readers of your blog who have been subscribed to your blog.You need to ave an email subscription box in your blog definitely guys.


Follow these steps to add email subscription box guys :-
  • Blogger Dashboard 
  • Overhead key
  • Template 
  • Edit Html 
  • Search This code      <data:post.body/>     by pressing (Control+F) To search It easily 
  • Now Paste The Following code Css Code below it guys.
  • After the <data:post.body/> Below it paste this code.
<style>
#bt-subs-box {
background: #F1F1F1;
margin: 0 auto;
padding: 10px;
border: none;
border-radius: 10px;
width:350px;
height:270px;
}

#bt-subs-box h2 {
font-size: 27px!important;
text-align:center;
font-style: italic;
font-variant: small-caps;
}

#bt-subs-box h3 {
font-size: 15px;
font-family: arial, sans-serif;
text-align:center;
font-style: italic;
font-variant: small-caps;
}

#bt-subs-box div.row {
text-align:center;
margin-bottom:10px;
}

#bt-subs-box img{
display:inline-block;
border:none;
}

#bt-subs-box .email {
clear:none;

}

.email {
clear: both;
width: 100%;
margin: 10px 0;
}

.emailform {
position: relative;
width: 300px;
background:#FFF;
margin: 0 auto;
-webkit-box-shadow: 1px 1px 2px #dfdfdf;
-moz-box-shadow: 1px 1px 2px #dfdfdf;
box-shadow: 1px 1px 2px #dfdfdf;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #ddd;
}



.emailinput {
height:30px;
margin: 0 auto;
padding: 8px 40px 8px 10px;
border:none;
background: none;
font-family: georgia;
font-style: italic;
font-size: 16px;
color: #666;
}

.emailinput {
padding-right: 30px !important;
width: 260px !important;
}

.emailbutton {
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-top-right: 4px;
-moz-border-radius-bottom-right: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-top-left: 0px;
-moz-border-radius-bottom-left: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
padding: 9px;
position: absolute;
right: -3px;
top: -1px;
bottom: -1px;
display:block;
line-height:16px;
}

.emailbutton {
padding: 14px !important;
}


.emailbutton, .formbutton {
background: #f7f8f9;
background: -webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9", 
endColorstr="#e9e9e9",GradientType=0 );
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 6px 12px;
margin:0;
-webkit-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color: #888 !important;
text-shadow: 0 1px 0 #fff;
line-height: 1.2;
cursor: pointer;
font-size: 13px;
font-weight: bold;
text-decoration: none !important;
}
.emailbutton:hover, .formbutton:hover {
background: #f1f1f1;
background: -webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -ms-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1", 
endColorstr="#e0e0e0",GradientType=0 );
text-decoration:none !important;
}
</style>



<div id='bt-subs-box'>
<h2>Do you Like this Article</h2>
<div class='row'>
<div class='fb-like' data-href='https://www.facebook.com/hari.vignesh.9678' data-send='true' data-width='300' data-show-faces='false'></div>
</div>
<div class='row'>
<a href="http://feedburner.google.com/fb/a/myfeeds?gsessionid=u0r8Z9GWvpEGj1XgZ0HsqQ" title="Suscribe to RSS feed"><img class='middle' src="http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaXDrh48I/AAAAAAAAAVM/zLmcNtCgi9Y/s40/w2bRSS+.png" alt='rss'/></a>
<a href="https://twitter.com/HariRockstar007"><img class='middle' src="http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaUf7v0CI/AAAAAAAAAU8/7vfe8Iw3ohc/s40/w2bTwitter.png" alt='twitter'/></a>
<a href="" title="Became Fan on Facebook"><img class='middle' src="http://1.bp.blogspot.com/_nDNgmK8FIyI/TUJaWNBkZnI/AAAAAAAAAVE/nZ0byXaqur8/s40/w2bFaceBook.png" alt='facebook'/></a>

<a href="http://www.stumbleupon.com/stumbler/bl0ggertricks/"><img src="http://1.bp.blogspot.com/_nDNgmK8FIyI/TUJaXqfx60I/AAAAAAAAAVQ/CmNcj4VJjns/s40/w2bStumbled.png"alt='stumbleupon'/></a>
</div>

<div class='row'>
<h3>Get Subscribe to Free Email Updates!!</h3>
</div>

<div class='row'>
<div class='email'>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' target='popupwindow' onsubmit='window.open("http://feedburner.google.com/fb/a/myfeeds?gsessionid=u0r8Z9GWvpEGj1XgZ0HsqQ", "popupwindow", "scrollbars=yes,width=550,height=520");return true' class='emailform'>
<input type='hidden' value='Hari Vignesh' name='uri' />
       
<input type='hidden' name='loc' value='en_US' />
       
<input type='text' 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...' name='email' class='emailinput' />
       
<input type='submit' class='emailbutton' value='SignUp' title=""/>
      
</form>
</div>
</div>
</div>
After  Doing This Replace with With your following facebook codes and twitter and search for Http Alone where and all http delete that sentence and replace with yours  after doing it you have search for value and replacw with your feed Burner user name.You can also adjust with the width and height guys so place it now and enjoy with your new email subscription box and you will subscribed. Bye Dudes catch you all in another post.


14 comments:

  1. Replies
    1. Hi Ajay Surya Thanks Dude Happy Blogging

      Delete
  2. Nice share Hari, i will optimize this on my various blogger blogs

    ReplyDelete
  3. E-mail Subscription is a Great way to gather alot of Visitors and Genuine Readers to your Blog and this Blox below everyblog Post can potentially increase the number of Reader !!
    Thanks for this Great Post@
    Keep Up the Good Work !

    ReplyDelete
    Replies
    1. Hi Arjun Thanks Dude thank you for your comment too anyway

      Delete
  4. Hi Hari,
    This is really a good post. And the widget you have provide is really awesome. As it is cool in look. I am really impress by your site.
    Regards
    BloggingGuru

    ReplyDelete
    Replies
    1. Thanks dude Thanks Bro Really thanks Happy Blogging :-D

      Delete
  5. Really useful post,i appreciate it sir

    ReplyDelete
    Replies
    1. Sir Call me Dude Or buddy Ok Thanks man

      Delete
  6. Wow...pretty interesting and good one Hari....keep up! You're a little champ blogger

    ReplyDelete
    Replies
    1. Hi Nitin Bro Thanks For Your Comment..

      Delete