How To Add Header Email Subscription Box Widget In Blogger

On : 1/25/2014

In : Feedburner, Widgets

Previously We've Discussed About How To Add Newsletter Email Subscription Box In Blogger, Now This Tutorial Is Also Like That, But In This, We Will Add Subscription Box (Widget) On The Header Of Your Blog Which Will Also Increase Your Traffic And Will Take Your Visitors Attention To Subscribe. This Widget Is Best To Used Because It Will Increase Your Subscribers And This Will Improve Your Traffic Rapidly. You Can Give Them Message To Subscribe To Get Latest News. I Have Shared Header Subscription Widget Because It Will Give You A Lot Of Chances To Subscribe Because When Your Visitor Visits Your Website, They Will First See Your Subscribe Box. Even You Can See That We Have Also Added In Your Header So You Can Subscribe Easily. Installing Widget In Blogger Is Always A Simple Method As Only A Few Simple Codes Have To Copied And Pasted.

Also Read : How To Upload Files For Downloading In Blogger?

Header Email Subscription Box

So This Is Also A Clean And Simple Widget Email Subscription Box. This Widget Is Divided Into Two Portions. The First Portion Is The Paragraph With An Image On The Left, And The Second Portion Is On Right Side With A Large Email Box With "Submit" Button On The End-Right Side Of The Widget. I Have Kept Only One Input Which Is "Email Address" Because The "Name" Input Is Not So Essential Because The Feedburner Doesn't Accept The Names Of The User. Heading And A Little Message Is Also Added On The Left Side Of The Widget As I Described. This Widget Will Help You In Increasing Your Email Subscribers Because This Will Be Implemented In Your Header Which Will Be The Max Attention By Your Visitors.

Instructions

The Instructions Of Adding Any Widget To Blogger Is Not So Difficult, This Widget Also Contains Some Codes Which Have To Be Pasted In Your Widget Area Or In Your Template. Just Follow The Simple Steps Below:-

Go To Blogger>> Your Blog >> Layout >> Add A Gagdet.
Choose "HTML/Javascript" In The Header Section (Below Header And Above Blog Posts".
Paste The Following Code Inside HTML/Javascript.

<style type='text/css'>
/* Header Subscription Box By Blogging Tutorials --------------------------------- */
#headsubbox{background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjan2d2i4dem7M5y0EOy-Z_vNVqreSUBpznYL3VAHoemje15M6A5aJz5U1vGyxKS5NdNUG_JUcCA_d3KI0I0B41oBjwL5USKTidQx-MOhElegMK9EnTnMZSPogACCOBQu-QvCneRV4kjyRZ/s1600/Head+Sub+Box+BG.png') no-repeat 20px;width:100%;height:auto;border-bottom:3px solid #0091d6;font-family:open sans;padding-bottom:10px}
.headsubboxleft{padding-left:130px;width:40%;padding-top:10px;float:left}
.headsubboxleft h3{color:#0091d6;font-size:18px;font-weight:700;font-family:open sans}
.headsubboxleft p{font-size:14px;line-height:25px;color:#000}
.headsubboxright{float:right;width:40%;padding-top:20px;padding-right:20px}
#subbox{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX4ah__M5_-OhITXwdI_yvMtshkUP1uU63CmPwLpHTcKZF-SsIygV1Zk0Lq1eou5mGI7OlWi3UCg8WGhGEjMziye0r70HCvxnM37urKlaMIndud3MbsMHq7y9znpd9PIiDcz4gx3C3_M7x/s1600/Email+Input+BG.png") no-repeat scroll 10px center #72C5EB;border:1px solid #0091d6;border-radius:4px 4px 4px 4px;box-shadow:0 0 3px rgba(0,0,0,0.05) inset;color:#FFF;outline:none;text-decoration:none;width:50%;font-size:17px;font-family:open sans;margin:0 0 15px;padding:13px 50px}
.headsubboxleft { display:none!important; }
.headsubboxright { width:90%; float:none; }
</style>
<div id='headsubbox'>

<div class='headsubboxleft'>
<h3>Sign Up To The Free Email Newsletter!</h3>
<p>Want to get notified whenever we produce the latest content ? Then subscribe now to start receiving hot updates from today.</p>
</div>
<div class='headsubboxright'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=blogspot/wRAyq', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input id='subbox' name='email' onblur='if ( this.value == '' ) { this.value = 'Enter your email address...'; }' onfocus='if ( this.value == 'Enter your email address...') { this.value = ''; }' type='text' value='Enter your email address...'/>
<input name='uri' type='hidden' value='blogspot/wRAyq'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='subboxbutton' type='submit' value='SUBMIT!'/>
</form>

</div>

After Adding The Following Code Replace blogspot/wRAyq With Your Feedburner Username.
If "Add A Gagdet" Option Is Not Available In Your Header, Then Find The Following Code In Your "Edit HTML" Section And Paste It Above.

<div class='outer-wrapper'> Or
<div class='content-wrapper'>

If You Find Any One Of The Codes Above, Paste The Email Subscription Box Widget Just Above The Above Codes.

Final Words!

So Friends That Was A Beautiful, Simple And Clean Email Subscription Widget Box For Blogger. I Hope Now You Will Increase Your Email Subscribers. If You Have Any Problem With This Post, Please Ask In Comments Because Comments Are Always Appreciated. Please Share This Post On Social Networks And With Your Friends And Blogger Fellows. Get In Touch With Us For More Updates. You Can Also Subscribe Us To Get Updates Straight In Your Inbox. Take A Lot Of Care And Happy Blogging!.

728x90 Ad Space

Saturday 25 January 2014