Stylish Email Subscription Box Widget For Blogger

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.
Add Stylish Email Subscription widget to 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 in below <data:post.body/>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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:&#39;Merienda&#39;;,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:&#39;Marmelad&#39;,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/AVvXsEjr40JFtUqmqhAiAw-srUDAuIDBN8kYTlrfuLH-dC1uBMX2QUyNbBOefUb0HFn1695WET93UUYS3uhpncaPgJGgvfprdFBvfdtVsocqoKyYV7k3mjd9QiTAS5bqYv-FlMTHiMcKLHAmrJA/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/AVvXsEhrYu-j3B3hv6zabfrfj41cJoI0VkgcItxptXwDz016eRyDwq_eP33OUV9-dINp7WZ8G-vYjXBI6bGVoEAOt82TRDVC3gApQv3cRO4YxHBFh0wRyYri2so6LfWclR8QOLQMT9szS3dH9AU/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=&#39;#ededed&#39;,endColorstr=&#39;#dfdfdf&#39;);
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=&#39;#dfdfdf&#39;,endColorstr=&#39;#ededed&#39;);
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/AVvXsEgxCsHUJZIK9nXFi1xOYNbfOHxQaaZgFtArc0EqIppwikUa_vcckS-LvLNxpIVT4Gdvwh7lTkGXbHBxJW3hJtmDzbynnQOZk0wH3bZ8xtZvHdSvFldAJhKt-xGJ8rfYQlOf9c1rHWYKJJA/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&#39;s 100% Free!
</p>
</div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=TechTrickHub' class='byard-subsbox-form' method='post' target='_new'>
<input class='byard-subsbox-name' name='name' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Your Name&apos;;}' onfocus='if (this.value == &apos;Your Name&apos;) {this.value = &apos;&apos;;}' value='Your Name'/>
<input class='byard-subsbox-email' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Your Email Adress&apos;;}' onfocus='if (this.value == &apos;Your Email Address&apos;) {this.value = &apos;&apos;;}' 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&#39;s terrible and we never do it.
</p>
</div>
</center>
 </b:if>

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

 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

    Comments

    Post a Comment