Saturday 29 June 2013

// // Leave a Comment

How to add a subscription cool box in blogger.

Hey Guys you are very interested to know that how to add cool subscribe box in your blog.
Then do some work which helps you for gettind subscription box in your blog.


  1. Open blogger.com
  2. Layout
  3. Edit Html
  4. And paste the following code.

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<style type="text/css" media="all">
.pbtsidebar {
    display: inline;
    float:left;
    font-size: 14px;
    text-shadow: 1px 1px #fff;
    width: 300px;
    margin-left: 10px;  
}
.pbtsidebar .widget-wrap {
    padding: 30px;
}
.pbtenews #subbutton {
    -moz-border-radius: 3px;
    -moz-box-shadow: 0 1px 1px #a24a1d;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px #a24a1d;
    border-radius: 3px;
    box-shadow: 0 1px 1px #a24a1d;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwRF2g7qrk7P3Dx9uhFKX4rGhVhMhB3PO6XNiQsqwT0a0s60yJal00RUMuBnPDiqL0PvNSAefsYn_uyCw40vMxxl2HoZ9KB-IKINkxtaJc2Uj6K73yQGMJU0rAXep3Xr-HCZTKRZxQmf_w/s1600/button-light.png") 0 0;
    border: none;
    color: #333 !important;
    font-size: 14px;
    font-weight: bold;
    margin: 0 auto;
    padding: 10px 15px;
    text-shadow: 1px 1px #fff;
    text-transform: uppercase;
}
.pbtenews #subbutton:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwRF2g7qrk7P3Dx9uhFKX4rGhVhMhB3PO6XNiQsqwT0a0s60yJal00RUMuBnPDiqL0PvNSAefsYn_uyCw40vMxxl2HoZ9KB-IKINkxtaJc2Uj6K73yQGMJU0rAXep3Xr-HCZTKRZxQmf_w/s1600/button-light.png") 0 -40px;
}
#pbtsidebar .pbtenews {
    background-color: #e96a2a;
    margin: -30px;
    min-height: 201px;
    padding: 1px 20px 15px;
    text-align: center;
    }
#pbtsidebar .pbtenews p {
    color: #fff;
    text-shadow: 1px 1px #a1491d;
    font-family:'PT sans';
}
.pbtenews #subbox {
    -moz-box-shadow: 1px 1px 3px #ccc inset;
    -webkit-box-shadow: 1px 1px 3px #ccc inset;
    background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRZjkoiEvMnos7sSb1Cp1mov7P-ab0D229Pgjs7dRTsySyK0MPXW0UJnFQGyUALB2MDZK8eQ75kMTcElXhr6KTgQep_1DLo6AXD1cfsY-XL369ZHEkx71l1xl93Iygea5vOcfeE14UOZK1/s1600/enews.png") center left no-repeat;
    box-shadow: 1px 1px 3px #ccc inset;
    border-left: 1px solid #9e6e56;
    border-top: 1px solid #9e6e56;
    color: #aaa49f;
    font-size: 11px;
    font-weight: bold;
    margin: 0 10px 15px;
    padding: 14px 10px 12px 50px;
    text-transform: uppercase;
    width: 185px;
}
#pbtsidebar .pbtenews h4 {
    margin-bottom: 10px;
    text-shadow: 1px 1px #a1491d !important;
    margin-top:12px;
    line-height: 1.2em;  
}
.widgettitle{
font-family:'PT sans';
text-transform:uppercase;
background: none;
    color: #fff;
    font-size: 23px;
    padding: 0;
    text-align: center;
}
</style>
<div id="pbtsidebar" class="pbtsidebar widget-area">
<div id="pbtenews-12" class="widget pbtenews-widget"><div class="widget-wrap"><div class="pbtenews"><h4 class="widgettitle">Get latest posts straight to your Inbox!</h4>
<p>Take a tour of latest post as published(We respect your privacy and will never spam you). </p>
<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onSubmit="window.open( 'http://feeds.feedburner.com/BloggerWidgetshtmlCodesbeginnersGuideblogwordpresstemplatesthemes', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" value="Enter your email address..." id="subbox" onFocus="if ( this.value == 'Enter your email address...') { this.value = ''; }" onBlur="if ( this.value == '' ) { this.value = 'Enter your email address...'; }" name="email">
<input type="hidden" name="uri" value="mylabofblogger">
<input type="hidden" name="loc" value="en_US">
<input type="submit" value="Get Up" id="subbutton">
</form>    </div></div></div></div>

0 Peoples tell for us:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.