Add stylish Premium Subscription box for Blogger

Here is an new stylish Premium Subscription box for blogger.This is an stylish subscription box for blogger.You can add this box to blog for free.Here in this article I am going to share this Premium box only and an clean explanation about how to add this Premium Box to Blogger for free.Just follow my simple tutorial to add this to your blog.

How to Add stylish Premium Subsription box for blogger

How to Add stylish Premium Subscription box for blogger?

  • Go To Blogger > Layout > Add A Widget > HTML/JavaScript
  • Then Paste the following code given bellow in that box,

<div class=”subscribe_outer”>
<div class=”subscribe_wrapper”>
<p>Subscribe Updates, Its FREE!</p>
<div id=”btntEmailsub”>
<form class=”btntEmailform” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=triposoft’, ‘popupwindow’, ‘scrollbars=yes,width=600,height=540’);return true” method=”post” action=”http://feedburner.google.com/fb/a/mailverify”>
<input type=”hidden” value=”triposoft” 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 == ” “)=”” ;}”=”” onclick=”value=””name=”email”>
<input class=”emailButton” type=”submit” value=”Signup Now!” title=””>
</form>
</div>
</div>
</div>
<style>
.subscribe_outer {
    background: url(“http://1.bp.blogspot.com/-R8OgBaEYEfQ/UHf_0V7jVjI/AAAAAAAAPJE/FDP4NWvVBhQ/s1600/color-chronicl.gif”) repeat scroll 0 0 transparent;
    margin: 0 -10px;
    padding: 5px 0;
}
.subscribe_wrapper {
    background: url(“http://1.bp.blogspot.com/-aJhnRZuZjyw/UHf_1zcxQtI/AAAAAAAAPJU/jJJEOM8J52s/s1600/pattern-chronicl.png”) repeat scroll 0 0 #333333;
    color: #CCCCCC;
    font-size: 15px;
    font-weight:bold;
    line-height: 20px;
    padding: 10px 50px 18px 38px;
}
.emailButton {
    background:#249334;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
.emailText {
    background: url(“http://4.bp.blogspot.com/-pphfyiwvVr8/UHf_1a5jAvI/AAAAAAAAPJM/cxbjM4o0crk/s1600/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;
    outline: none;
    text-decoration: none;
    width: 70%;
}
input, textarea {
    font-family:’Lora’,georgia,serif;
}
.subscribe_wrapper {
    color: #CCCCCC;
    font-size: 14px;
    line-height: 20px;
}
.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-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
</style>

  •  Enjoy Dudes!
If you like this article please share this with your friends and subscribe to get many latest blogger tricks via email for free.If you have any tips and tricks means share it with us through Guest Posting at Triposoft
About Harshit Jain

Harshit Jain is a passionate blogger, entrepreneur & digital marketer from India. He is founder of TripoSoft.com, He likes to share his knowledge through his own blog at TripoSoft & TechHug as well as by writing guest articles on other blogging sites.
Follow him on Facebook, Google+, Twitter.

2 Comments

  1. Apni Kahaani

    Thanks! I used it on my Hindi blog, please check at apnikahaani.blogspot.com .Thanks!

      
  2. You’re Welcome !

      

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge