After releasing our first widget which was "Socializer Widget" here we're back with our second widget. Socializer Widget was ...
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.
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/AVvXsEhkpPa3VR3nRDmkjlQAIeJuQsPlc1UWOZlhIsDF09WtuzV2DRMrG56XADXj3MIPh6gyzZyDAjmlxcgY-hmz8ClrlIF2HTMs0qy3CsB_mRnfvlskAH3OWLeOnBFUl7trfMkrlotUeKQ55qE/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/AVvXsEhmQhz-9xguJF583jRrt4Gd3MIBZRcXeBhaBEUJxTCAmRPeG_vLACZJbhQXV4cowA0QuHVreyI9FVA82XWUFaY-E38lJxhIpP6Wstd-5jYFnGSqXxa4_g-7REuESXUv3HRvgdZaOfVF8qA/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/AVvXsEgsjO5FxKqX_ItzvXb3aihBvGCRmspHEkP_MXGCT9NAW47Kd0ypsQyw9iqp9ulqkdvOa1GJt9fM1ADjA5DJJ04P1DMAn9GNre8-wJlYpHCE62rFGHpUbMVh0vqHG_2FJJY4N9EhkjQRis0/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!
COMMENTS