Add Stylish Email Subscription Box to blogger andrey четверг, 15 января 2015 г. No Comment

Everybody knows the significance of RSS feeds. So it's more valuable to give the visitors an option to subscribe to your blog feed via email. Another email subscription Widget with stylish looks, as earlier I have also shared feed email subscription Widget for blogger user. But today In this post I discuss stylish email subscription box for blogger. In Email Subscription widget visitors can subscribe your blog’s daily updates. Attractive subscription box helps in increasing the number of your blog visitors. This is the best way to draw readers' attention. So here We give you step by step guide how to install the email subscription widget.
Read Also : Best Blogger Widgets & Gadgets

Read Also : How to add CommentLuv plugin for Blogger blogs

• 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 in below :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/AVvXsEjRpvhgNRwaoM9ROL8YUhZkgaAme8ls7lL5KMjAbYxb9SHYcyILrVgku7WTkCjty0gHMjqPtEDZdKxtkoOj34X1PvmUhEzwhlwy0kq7i3h3V9sTEghRWwtX0aIDb5kIfp7JL44KWbeS5ks/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/AVvXsEgH_jCtay06rxdFmAvA2L8MaEe-nArnrchuNWfhurJC1NaU0tLHxE3giMj6MxZYzm-VHMBul7XTpvzMsC8SG8HbZi8g2X7QVcXu5GhR85VLO7ZTpm_IhxKuQlbPuk5M7-3LHZeAcJFzkM4/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/AVvXsEh0V8UR9sQepE5ioKwixU4246znm_o2qhTva7xLZ6uir_3fPHJILcv6PEUPiGWay6byF1ssro3tBXUgJzrTUI9rarXlkaNpAjkVJrbBSLhSUN2SVZDbcvpXyKDvoFziDtqvmnDsQvkyYtE/s1600/mail-icon.png' style='float:left;'/>
<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!

div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=TechTrickHub' class='byard-subsbox-form' method='post' target='_new'>


<input class='byard-subsbox-submit' type='submit' value='Sign Up!'/>
form>

<b>We Hate Spam! b>Really, It's terrible and we never do it.

div>
center>
 b:if>

• Replace TechTrickHub With Your Feedburner Username.
• Warning : Don't remove the credits.
• Click Save! 

Read Also : How to integrate Disqus comment system to blogger blogs

• This widget is first shared on BloggerTipsTricks.net.Visit our blogs to see the new eye-catching change. I am sure this will extremely increase the number of your blog subscribers. Let me know if I missed anything or you face any issue!!! Thanks for reading our post. Happy Blogging :D

Everybody knows the significance of RSS feeds. So it's more valuable to give the visitors an option to subscribe to your blog feed via email. Another email subscription Widget with stylish looks, as earlier I have also shared feed email subscription Widget for blogger user. But today In this post I discuss stylish email subscription box for blogger. In Email Subscription widget visitors can subscribe your blog’s daily updates. Attractive subscription box helps in increasing the number of your blog visitors. This is the best way to draw readers' attention. So here We give you step by step guide how to install the email subscription widget.
Read Also : Best Blogger Widgets & Gadgets

Read Also : How to add CommentLuv plugin for Blogger blogs

• 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 in below :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/AVvXsEjRpvhgNRwaoM9ROL8YUhZkgaAme8ls7lL5KMjAbYxb9SHYcyILrVgku7WTkCjty0gHMjqPtEDZdKxtkoOj34X1PvmUhEzwhlwy0kq7i3h3V9sTEghRWwtX0aIDb5kIfp7JL44KWbeS5ks/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/AVvXsEgH_jCtay06rxdFmAvA2L8MaEe-nArnrchuNWfhurJC1NaU0tLHxE3giMj6MxZYzm-VHMBul7XTpvzMsC8SG8HbZi8g2X7QVcXu5GhR85VLO7ZTpm_IhxKuQlbPuk5M7-3LHZeAcJFzkM4/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/AVvXsEh0V8UR9sQepE5ioKwixU4246znm_o2qhTva7xLZ6uir_3fPHJILcv6PEUPiGWay6byF1ssro3tBXUgJzrTUI9rarXlkaNpAjkVJrbBSLhSUN2SVZDbcvpXyKDvoFziDtqvmnDsQvkyYtE/s1600/mail-icon.png' style='float:left;'/>
<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!

div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=TechTrickHub' class='byard-subsbox-form' method='post' target='_new'>


<input class='byard-subsbox-submit' type='submit' value='Sign Up!'/>
form>

<b>We Hate Spam! b>Really, It's terrible and we never do it.

div>
center>
 b:if>

• Replace TechTrickHub With Your Feedburner Username.
• Warning : Don't remove the credits.
• Click Save! 

Read Also : How to integrate Disqus comment system to blogger blogs

• This widget is first shared on BloggerTipsTricks.net.Visit our blogs to see the new eye-catching change. I am sure this will extremely increase the number of your blog subscribers. Let me know if I missed anything or you face any issue!!! Thanks for reading our post. Happy Blogging :D

Tweet

by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

Tags: Без рубрики