Friday, April 13, 2012

Add Cool Email Subscription Box Below Blog Header

Again With A cool and Stylish Subscription Box Widget for your blog. You will really love this one. I have created this Subscription Widget for Blogger Blog. The main thing in this Subscription widget is its position. You can put this widget below your Blog Header. In this I used Name, Email ID and a Subscription button for it and also tried to give a awesome "Sign Up for Free Updates message" in the Widget so User can easily attract with Subscription box and try to be your subscriber. You may have seen this Subscription Widget in WordPress blog, I converted it for blogger  and Tried to use less code to give best look, so it does not effect your page loading time. Here is the simple step to add this widget in your blog.

Subscription Box Widget below Header






Features of This Subscription Box

  • Add it below the Header of Blog   
  • Two Input Fields Name and Email ID.
  • Attractive Message.
  • Fast loading

Steps to Add Subscription Box below Header [For Blogger]

  1. Go to Blogger > Design > Page Element
  2. Add a Gadget Below Header 
  3. Choose HTML/JavaScript Gadget
  4. Paste the Following Code in Gadget
<style type="text/css">
#pbt_feature_box{background:#f0f4f4; border-bottom: 1px solid #D4D4D4; padding:10px 15px 0px; height:55px;}
#pbt_sleek-subscribe{display: block; margin:0 auto; }
.pbt_newsheadline {color:#222; font-size:15px; line-height:50px; float:left; font-weight:bold;}
.pbt_newsheadline span{font-size:38px; color:#444; line-height:14px; font-family: "Droid Sans",arial,sans-serif; font-weight:normal;}
.pbt_newsheadline cite{font-style:normal; color:#f00;}
.pbt_signform{background:url('http://1.bp.blogspot.com/-fv7IquQ_wTA/T4g8RQRGHqI/AAAAAAAABP4/2D8nd4pAmbQ/s1600/arrow.jpg') no-repeat;padding:0 0 10px 100px; float:right; }
.pbt_txt2, .pbt_txt2:focus{width:140px; font-size:15px; background:#f7f7f7; color:#004B80; border:1px solid #E36B0A; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;}
.pbt_btn2, .pbt_btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #AD5513; color:#fff; font-size:15px; border-radius:10px;}
.pbt_btn2:hover{background:#6689b0; }
</style>
<div id='pbt_feature_box'>
<div id='pbt_sleek-subscribe'>
<div class='pbt_newsheadline'><span>Sign up</span> for <cite>FREE</cite> daily Updates.</div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=probloggingtools' class='pbt_signform' method='post' target='_new'>
<input class='pbt_txt2' name='name' onblur='if (this.value == &#39;&#39;) {this.value = &#39;your name...&#39;;}' onfocus='if (this.value == &#39;your name...&#39;) {this.value = &#39;&#39;;}' value='your name...'/>
<input class='pbt_txt2' name='email' onblur='if (this.value == &#39;&#39;) {this.value = &#39;your email address...&#39;;}' onfocus='if (this.value == &#39;your email address...&#39;) {this.value = &#39;&#39;;}' value='your email address...'/>
<input class='pbt_btn2' type='submit' value='subscribe me!'/>
</form>
</div>
</div>
     5. Change Feed Burner Subscription ID  probloggingtools to yours blog
     6. Save the Gadget and Enjoy.

Tip: You can adjust Font-size:15px, in case your blog header width is less then 910px.

Credit

This Subscription box is Developed by SML and Converted it for Blogger By PBT. If you want to share it with your readers, you have to give a link back to this Blog.

Need Help?

Yes, If you have any query regarding this Widget, Let`s discuss with Comment here.

Other Subscription Box Widget By PBT

7 comments :

confused??? Post a Comment

 

Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...