25 Aug 2013

An Premium Awesome Subscription widget for blogger

Hello,friends, Today i'm going to share an awesome subscription box for blogger.You have seen it on professional blog now it's time to reveal it.and dreamed for making it for your own blog, Having difficulty , we are here to help you.





AWESOME FEATURES OF THIS SUBSCRIPTION BOX

  1. A top Broad message with different shade
  2. Points message to tell about all your specialties
  3. A cool and trendy flat style subscription box
  4. A colorful and and eye catching button
  5. Allover a Pleasing and eye catching color codes and design

LET START CODING HERE WE GO

Important Steps to Add this widget to blogger


  • Go to your blog
  • Go in layout 
  • Click on Add a gadget where you wanna add a box
  • Click on Html
  • Copy the below code and paste it all there
  • And then you are done

<div id="subscribers">
<div class="subscriptionboxtitle">
<h4><span class="thin">Want To Be</span> <b>Pro Blogger?</b></h4>
<p>Sign Up With Your Email Address and Get Free Tips To Be Professional Blogger!</p>
</div>
<div id="whatyouget">
<ul class="whatyougetwith">
<li>Get 
Professional Blogging Tips To Make Your Blog Pro.</li>
<li>Totally Newbie? Don't worry, We'll send newbies guide.</li>
<li>
Learn Search Engine Optimization To Drive Huge OrganicTraffic.</li>
<li>Ideal Tips To Be a Billionire With Your Blog.</li>
</ul>
</div>
<div class="subscriptionsingup">
<
form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open( &#39;http://feedburner.google.com/fb/a/mailverify?uri=mybloggerskills1&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input id='subscriptionbox' name='email' onblur='if ( this.value == &#39;&#39; ) { this.value = &#39;Enter your email address...&#39;; }' onfocus='if ( this.value == &#39;Enter your email address...&#39;) { this.value = &#39;&#39;; }' type='text' value='Enter your email address...'/>
<input name='uri' type='hidden' value='mybloggerskills1'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='subscribebutton' type='submit' value='Yes, I Want To Be Pro Blogger.'/>
</form>
</div>
<style>
.subscriptionsingup {
    padding: 20px;
}
#subscriptionbox {
    padding: 10px 15px 10px 15px;
    width: 223px;
    text-shadow: none;
    font-size: 16px;
    color: #666666;
    margin-bottom: 7px;
transition:background 400ms;
}
#subscriptionbox:focus{background:#fff47f;}
#subscribebutton {
    background: #F4836A;
    border: none;
    font-weight: 700;
    color: #fff;
    width: 256px;
    padding: 15px;
    text-shadow: none;
    font-size: 15px;
    cursor: pointer;
    padding-right: 10px;
    margin-left: 2px;
}
.thin {
    text-shadow: none;
    font-weight: 300;
}
#subscribers {
    float: left;
    width: 296px;
    background: #0091d6;
    border: 2px solid #03628f;
    
font-family:open sans;
}
#whatyouget {
    background: #03628f;
    padding: 10px;
}
ul.whatyougetwith li {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZfkMHjO6YsbEutQAY3LgwJMCPJ9JMhqNjlOrhXxHv3t6wKdF1GVXkh2oRnabq9FN5BGXk333OupkUKwEvcrlD_uu3vws5FZSLy_EfxxPeuhQJgsdgzcV3ACya8OPXMsoPRJUq9Em9kXU/s1600/checkmarkk.png) no-repeat;
    margin: 10px;
    padding-bottom: 10px;
    text-shadow: none;
    font-size: 14px;
    line-height: 20px;
    text-shadow: none;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    padding-left: 25px;
}
.whatyougetwith ul {
    margin: 30px 30px 0 25px;
    padding: 0 0 0 25px;
}
.subscriptionboxtitle {
    height: 110px;
    padding: 10px;
    background: #0091d6;
}
.subscriptionboxtitle p {
    text-shadow: none;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    line-height: 20px;
    color: #fff;
    margin-top: 5px;
    text-align: center;
}
.subscriptionboxtitle h4 {
    text-shadow: none;
    font-size: 23px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    line-height: 25px;
    color: #fff;
    padding-top: 15px;
    padding-bottom: 10px;
}
</style></div>
<div class='clear'></div>


Yipeee !!!! You are done
now save it,
Just check the live preview on your blog 
You can modify it as per you need or you can tell us it as a favor
If you still need any kind of  help you can contact me or comments here.

No comments:

Post a Comment

Ads Inside Post