How To Add Newsletter Email Subscription Box In Blogger

On : 1/25/2014

In : Feedburner, Widgets

In The Blogging World, The Most Important Need Of Every Blog Owner Is It's Traffic Because Without Traffic, Your Blog Is Nothing And Cannot Do Anything. There Are Thousands Of Things To Boost Up Your Traffic On Your Blog. But Today, I Will Give Your My First Widget, Which Is Email Subscription Widget Which Is Used To Subscribe To Feedburner, There Is Many Widgets With Many Styles Which Can Be Used For Blog Owner To Use, And When The Visitor Click On "Sign Up", It Will Go To Subscribe Feed. Email Subscribers Play Important Role For A Blog. They Help Your Blog In Getting High Number Of Page Views. Not Only In Traffic, It Will Also Help You In Getting Approvals From Advertising Websites e.g. Google Adsense, Buysellads etc. It Means That It Also Check The Subscribers Of Your Feed. So, This Is A Clean, Simple Widget For Blogger And The Steps Of Adding Is Also Very Simple You Just Have To Copy And Paste A Code And Than Your Widget Will Display.

Must Read : How To Setup Feedburner Email Subscription In Blogger?

Newsletter Email Subscription Box

As I Described Above That This Is A Clean, Simple And Attractive Widget For Blogger Which Will Help You Increase Your Email Subscribers Through Feedburner. The Widget Is Build With Simple Web Languages That Is HTML5 And CSS3. After Building It, We Have Tested On Many Websites And Browser To Check Whether It Is Working Fine Or Not. So It Works On All Browser. It Contains Of A Heading, A Simple Paragraph And Two Inputs, Name And Email Box To Enter Their Name And Email Address. Then In The Last, There Is A Beautiful CSS3 "Sign Up Now!" Box, Which Will Subscribe Your Visitor Through Feedburner. The Widget Is More Than 500 Pixels Width. So, The Best Place For Adding It To Blogger, Is Below Every Post Because If Once They Have Red Post, They Can Sign Up Through Their, But Now, We Will Add It On The Sidebar Of Your Blog, But If You Want Below Post, We Have Also Code Below. Before You Apply This Widget On Your Blog, You Must Have A Look By Pressing The Button Below:-

Live Demo

Adding Email Subscription Box Widget On Sidebar In Blogger

Go To Blogger.com >> Your Blog >> Layout >> Add A Gagdet.
Choose "HTML/Javascript".

After Choosing, Paste The Following Code Inside:-

<div id='btutorials-emailsubsocial'>
<div class='heading'>
Sign Up in Seconds
</div>
<p>Sign up with your email address to receive hot updates straight in your inbox.</p>
<div class='emailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggingTutorials', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type='text' name='name' placeholder='Your Name' />
<input type='text' name='email' placeholder='Your Email' />
<input type="hidden" value="BloggingTutorials" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input value="Sign Up Now!" class="button" type="submit" />
</form><div id='credit'>
Designed By <a href='
http://bloggingtutorials2.blogspot.com/' id='credits'>Blogging Tutorials</a>
</div>
</div>
</div>
<style type='text/css'>
#btutorials-emailsubsocial {
width: 300px;
height: 350px;
border: 1px solid #ddd;
border-radius: 5px 5px 0px 0px;
}
#btutorials-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
}
#btutorials-emailsubsocial .heading:before {
content: "";
position: absolute;
width: 302px;
height: 8px;
top: 15px;
left: 8px;
background: linear-gradient(to right, rgb(196, 225, 127), rgb(196, 225, 127) 12.5%, rgb(247, 253, 202) 12.5%, rgb(247, 253, 202) 25%, rgb(254, 207, 113) 25%, rgb(254, 207, 113) 37.5%, rgb(240, 119, 108) 37.5%, rgb(240, 119, 108) 50%, rgb(219, 157, 190) 50%, rgb(219, 157, 190) 62.5%, rgb(196, 156, 222) 62.5%, rgb(196, 156, 222) 75%, rgb(102, 154, 225) 75%, rgb(102, 154, 225) 87.5%, rgb(98, 194, 228) 87.5%, rgb(98, 194, 228)) repeat scroll 0% 0% rgb(196, 225, 127);
border-radius: 5px 5px 0px 0px;
}
#btutorials-emailsubsocial p {
font-family: open sans;
font-size: 13px;
color: rgb(170, 170, 170);
line-height: 25px;
padding: 10px 20px 0 20px;
margin: 0;text-align:center;
}
#btutorials-emailsubsocial .emailsub {
padding: 0px 20px 10px 20px;
}
#btutorials-emailsubsocial .emailsub input {
color: rgb(170, 170, 170);
padding: 10px;
margin-top: 10px;
font-size: 15px;
font-family: open sans;
width: 100%;
border: 1px solid #ccc;
border-bottom: 2px solid #ccc;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#btutorials-emailsubsocial .emailsub input:focus {
border-color:#F4836A;
outline: none;
box-shadow: 0 0 2px 1px #F4836A;
}
#btutorials-emailsubsocial .emailsub .button {
background: #0091d6;
color: white!important;
border:none;
outline: none;
border-bottom: 3px solid #0072A6;
transition:background .4s linear;
width: 90%;
margin-right: 5%;
margin-left: 5%;
font-weight: 600;
}
#btutorials-emailsubsocial .emailsub .button:hover{
background: #0072A6;
}#credit {
margin: 0 auto!important;
margin-top: -10px!important;
text-align:center;
}
</style>
<script src='https://googledrive.com/host/0B3Ztl1RRz6W7Q1lZWWs3UUxyT0E'/>
</div>

After Adding The Above Code Replace "Sign up with your email address to receive hot updates straight in your inbox." With Your Message.
Now Replace BloggingTutorials With Your Feedburner Feed Username.
Please Do Not Remove Credit Link.
And Don't Remove Any Thing, Otherwise It Will Not Work.
Click On "Save Template".
You've Done!.

Final Words!

So Friends, Now Your Widget Is Added On Sidebar, Now You Can Rearrange Your Widget To Anywhere. So This Is A Simple And Beautiful Widget. I Hope You Will Like This Widget. I Wish You To Share This Widget On Your Blog And Kindly Link Back To Original Post. If You Have Any Problem With This Widget In Adding Code, Please Ask In Comments. Please Share This Post With Your Blogger Fellows And Friends And On Social Networks. Many Widgets Are Coming Soon We Will Notify You. You Can Also Subscribe Us Now To Get Hot Updates From Us Straight In Your Inbox. So Get In Touch With Us. Take A Lot Of Care And Happy Blogging!.

728x90 Ad Space

Saturday 25 January 2014