Saturday, August 18, 2012

Premium Email Subscription Box For Blogger

Adding Email Subscription Box to blogger

 
Now For Adding this box to blogger you don't need to spend money just follow below steps-


  • Go To Blogger Dashboard
  • Click On Layout Tab
  • Now Click On Add Gadget>>HTML/JavaScript
  • Paste below code there


<div class="subscribe_outer">
<div class="subscribe_wrapper">
<h5>Subscribe Via Email</h5>

<p>Enter your email to get free Updates of Lord HTML</p>
<div id="btntEmailsub">
<form class="btntEmailform" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=lordhtml', 'popupwindow', 'scrollbars=yes,width=300,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="lordhtml" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input class="emailText" type="text" value="Enter your email..." onfocus="if (this.value == " enter your email...") {this.value="" }" onblur="if (this.value == " ") {this.value="enter your email..." ;}" name="email" />
<input class="emailButton" type="submit" value="Signup Now! (FREE)" title="" />
</form>
</div>
</div>
</div>

<style>

.subscribe_outer {
    background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/color-chronicl.gif") repeat scroll 0 0 transparent;
    margin: 0 -10px;
    padding: 5px 0;
}
body {
    color: #272727;
    font-family: Georgia,"Times New Roman",Times,serif;
}
body {
    color: #272727;
    font-family: Georgia,"Times New Roman",Times,serif;
}
.sidebar .subscribe_wrapper h5 {
    color: #FFFFFF;
}
.sidebar h5 {
    color: #272727;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-size: 15px;
    font-weight: normal;
    padding: 4px 0 10px;
}
h5, h6 {
    letter-spacing: 2px;
    text-transform: uppercase;
}
.sidebar .subscribe_wrapper h5 {
    color: #FFFFFF;
}
.sidebar h5 {
    color: #272727;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-size: 15px;
    font-weight: normal;

    padding: 4px 0 10px;
}
h5, h6 {
    letter-spacing: 2px;
    text-transform: uppercase;
}
.subscribe_wrapper {
    background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/pattern-chronicl.png") repeat scroll 0 0 #333333;
    color: #CCCCCC;
    font-size: 14px;
    line-height: 20px;
    padding: 38px 50px 18px 38px;
}
.emailButton {
    background:#249334;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
.emailText {
    background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
    color: #444444;
    padding: 10px 40px;
    margin: 0 0 15px;

    text-decoration: none;
    width: 70%;
}
input, textarea {
    font-family: Georgia,"Times New Roman",Times,serif;
}
.subscribe_wrapper {
    color: #CCCCCC;
    font-size: 14px;
    line-height: 20px;
}
.post-body .emailButton {
    width: 300px;
}
.emailButton {
    background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
</style>

Customization

 
Now you need to replace
 lordhtml with your own username which you will find in line 7 and 8

ShareThis