Newsletter Email Subscription Widget
This is a clean, simple and attractive widget which is obviously
going to help you in building the email subscribers list. This widget is
build with only two programming languages which are CSS3 and HTML.
After developing this, we’ve checked it in several most popular browsers
and we came to know that it’s working pretty cool in every browser. It
consists of a title on the top, little description along with cool icon
to tell the subscriber that what he will receive, two input fields which
are Name and Email Address, a little line for telling your visitors
that we’ll not spam and in the last, an awesome Sign Up button. This
widget is having 500 pixels width, So the best place for adding this
widget is below every post. There you have more chances of getting new
subscribers. Before you get this widget in your blog, have a live look
on this widget by pressing the below button.
LIVE DEMO
- Must Read : Submit Blogger Sitemap To Google
Adding This Widget In Blogger
- Go To Blogger >> Template >> Backup Your Template
- Click Edit HTML and Search For Below Code
<data:post.body/>
- After Finding The Above Code Paste The Following Code Below <data:post.body/>
<b:if cond=’data:blog.pageType == "item"’>
<!– Newsletter Widget By Www.BloggerYard.Com –>
<style>
#byard-subsbox {
height:300px;
width:500px;
background:hsla(0,0%,95%,0.4);
padding:10px;
border:5px solid hsla(0,0%,67%,0.19);
border-radius:10px 10px 10px 10px;
}
#byard-subsboxh3 {
text-align:center;
margin:10px;
text-transform:uppercase;
font-weight:bold;
font-family:'Merienda';,cursive;
font-size:1.4em;
letter-spacing:1px;
}
#byard-subsboxheader {
border-bottom:1px solid #ddd;
border-top:1px solid #ddd;
font-size:16px;
padding-bottom:10px;
font-family:'Marmelad',sans-serif;
text-align:left;
}
.byard-subsbox-form {
padding:20px;
}
#byard-subsboxheader img {
padding-right:10px;
}
.byard-subsbox-name {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAc1j56w65SVXZjHlRqxseY6T3LqEEAJnubrPg8-g6nVzpsVXxkQ5jUnqJA9DpH427lRFvVMAlFLeRHZn7vkP8986H7MUPF3KKBurHUKpPrgOWNA7IsQrvIHGNfXjjbZlfmMtFLbD7Odw/s320/name.png) no-repeat 7px 8px;
border:1px solid #ddd;
font-family:Arial,sans-serif;
font-size:13px;
font-weight:bold;
color:hsla(0,0%,27%,0.69);
width:90%;
height:24px;
padding:5px 15px 5px 28px;
vertical-align:top;
display:inline-block;
}
.byard-subsbox-email {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuHdcVqedXHUdXM4iZgRsiHhij1_s5QrQLhbVjvmW53mWuFgbq2jVz9KKzotoX7AB3qH3LzuCK-amX957WuEYW-Djcqu4MxFYlNetY6Avl55ensq7nzm8qyXReFCeyoRddWFJimtLeoBQ/s320/email.png) no-repeat 7px 10px;
border:1px solid #ddd;
font-family:Arial,sans-serif;
font-size:13px;
font-weight:bold;
color:hsla(0,0%,27%,0.69);
width:90%;
height:24px;
margin-top:10px;
padding:5px 15px 5px 28px;
vertical-align:top;
display:inline-block;
}
.byard-subsbox-name:hover,.byard-subsbox-email:hover {
border:1px solid #bebebe;
box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);
}
.byard-subsbox-submit {
float:right;
margin-top:20px;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) );
background:-moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
.byard-subsbox-submit:hover {
background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed) );
background:-moz-linear-gradient( center top,#dfdfdf 5%,#ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#ededed');
background-color:#dfdfdf;
}
.byard-subsbox-submit:active {
position:relative;
top: 1px;
}
</style>
<link href=’http://fonts.googleapis.com/css?family=Marmelad’ rel=’stylesheet’ type=’text/css’/>
<link href=’http://fonts.googleapis.com/css?family=Merienda’ rel=’stylesheet’ type=’text/css’/>
<center>
<div id=’byard-subsbox’>
<div id=’byard-subsboxh3′>
Subscribe To Our Newsletter
</div>
<div id=’byard-subsboxheader’>
<a href=’http://goo.gl/6rQJK’><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6OuNlcDQcdFHHRvRivvElD8IknA1XXsZ7RdBBLNPoMSxKMLMMCg-QZHJYR5Ht1aGKyq4ibKhgUu45jbvr8GYN0eITUPZ4dyEXDFaBf6atuxrFgjeY3nWYWozU2gU5drrE03D1a0rtbqA/s1600/mail-icon.png’ style=’float:left;’/></a>
<p style=’margin-top:13px;’>
Sign Up Now To Get Free Pro Tutorials About Search Engine Optimization, Blogging Guide, Making Money Online, Giveaways and Much More. It's 100% Free!
</p>
</div>
<form action=’http://feedburner.google.com/fb/a/mailverify?uri=BloggerYard‘ class=’byard-subsbox-form’ method=’post’ target=’_new’>
<input class=’byard-subsbox-name’ name=’name’ onblur=’if (this.value == '') {this.value = 'Your Name';}’ onfocus=’if (this.value == 'Your Name') {this.value = '';}’ value=’Your Name’/>
<input class=’byard-subsbox-email’ name=’email’ onblur=’if (this.value == '') {this.value = 'Your Email Adress';}’ onfocus=’if (this.value == 'Your Email Address') {this.value = '';}’ value=’Your Email Address’/>
<input class=’byard-subsbox-submit’ type=’submit’ value=’Sign Up!’/>
</form>
<p style=’font-family:times new roman;margin-top:10px;font-size:15px;’>
<b>We Hate Spam! </b>Really, It's terrible and we never do it.
</p>
</div>
</center>
</b:if>
- Replace Long Highlighted Message With Your Own.
- Replace BloggerYard With Your Feedburner Username.
- Press “Save Template“
- That’s All!
From The Editors Desk
So friends, How is this simple widget ? I hope you’ve liked it and
you’re using it in your blog. If you wish to share this widget on your
blog then kindly link back to original post. If you have got any problem
then leave a comment below and let’s discuss about it. Other many
amazing developments are coming soon. So get connected with us for and
don’t forget to subscribe us. Take care. Cheers!
Post a Comment