How To Add BluePrint Subscription Widget In Blogger

Last time we meet with Abdul Wali in our previous post and I also told you all that we've designed another widget which I'm going to share here. Subscription widgets are important for every blog to increase the subscribers and fans. There are tons of designs for free that can be used by anyone but here we're giving a professional widget to you all. This is the stylish design in which we've added the title at the top, secondly it is having impressive social icons which can help in getting more social fans. In third portion, there is a little message for subscription that what they will get after subscribing. In the last, it is having responsive subscription form with name, email and button field. Input fields are having stylish effect when someone comes to write or focus on it and it's button is also styled.

See Live Demo

Why To Use This Widget?

If you want to make your blog even more responsive and stylish then use it. This can help you gaining social followers along with email subscribers. This is build with pure HTML and CSS3 and it also works in almost all browsers.

Credits

This widget is designed by Blogger Yard so all the credit goes to us. Even this time we're not asking for any credit link in the widget so this is hundred percent free. But if you're sharing this in your blog then you'll need to link back us. One thing I want to tell you that please respect the efforts of the designer and don't violate. Thanks.

Tutorial

Go To Blogger >> Layout >> Add a Gadget
Choose "HTML/JavaScript"
Paste The Following Code In The Content Box

<link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />

<link href='//fonts.googleapis.com/css?family=Source Sans Pro:200,200italic,300,300italic,regular,italic,600,600italic,700,700italic,900,900italic&subset=latin' rel='stylesheet' type='text/css'/>

<style>
#byard-socialsub {
width:300px;
height:350px;
background:whitesmoke;
border:1px solid #eaeaea;
box-shadow:0 0 2px 2px #ccc;
}
.byard-socialsub-title {
font-size:20px;
font-family: 'Oleo Script', cursive;
background:hsl(198, 100%, 49%);
padding:5px;
border-bottom: 2px solid #444;
color:white;
text-align:center;
}
#byard-socialsub-icons{
padding-top: 8px;
padding-left: 4px;
padding-bottom: 15px;
border-bottom: 2px dotted hsl(0, 0%, 27%);
}
ul.byard-socialsub-icons{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;

-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.byard-socialsub-icons li{
display: inline-block;
width: 55px;

height: 50px;
margin-right: -px;

background: none;
font: bold 36px Arial;

text-transform: uppercase;
text-align: center;
cursor: pointer;
padding-left:10px;
}
ul.byard-socialsub-icons li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;

-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.byard-socialsub-icons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;

display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.byard-socialsub-icons li a img{
border-width: 0;
}
ul.byard-socialsub-icons li:hover a{
-moz-transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: none;

}
ul.byard-socialsub-icons li:hover a span{
-moz-transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.byard-socialemailsub {
font-size:14px;
padding:5px;
color:#444;
font-family: Arial;
font-family:bold;
}
.byard-socialemailsubname {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxjkT6ezjbuGnjERdBdRSAJ2hNueuOohrTCnDy06rd1uMjEzQjoVK8RGC1Gie46_4tSNaq2LB7-NcvnjD0Q32WWiHyOocQerH8XG-h7LFFU4RNtz3bwU56S_z21EIX65-szgMJPfD-sDU/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:225px;
height:25px;
padding:5px 15px 5px 28px;
margin-left:10px;
display:inline-block;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

}
.byard-socialemailsubemail {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9gh5vgHzlQLO3FRNI7tgO9NxQFszII6D1AQWJY-2crTyVrh5nqXpA0o4vVhKZM9_y9LrOrxXJtic7-jYXI80vwAn_KbVqR021nbc8bgN0mgpk6O9LM5qDB-r85Xe9l-YgPCD8jpegkQ/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:225px;
height:25px;
margin-top:10px;
padding:5px 15px 5px 28px;
margin-left:10px;
display:inline-block;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

}
.byard-socialemailsubname:hover,.byard-socialemailsubemail:hover {
border:1px solid #bebebe;
box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);
}
.byard-socialemailsubname:focus, .byard-socialemailsubemail:focus{
border-color: hsl(198, 100%, 49%);

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);

-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);

outline: 0 none;

}
.byard-socialemailsubbutton {

-moz-box-shadow: 3px 4px 0px 0px #1564ad;
-webkit-box-shadow: 3px 4px 0px 0px #1564ad;
box-shadow: 3px 4px 0px 0px #1564ad;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);

background-color:#79bbff;

-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

border:1px solid #337bc4;

display:inline-block;
color:#ffffff;
font-family:arial;
font-size:17px;
font-weight:bold;
padding:8px 70px;
text-decoration:none;
margin-top:10px;
margin-left:35px;
text-shadow:0px 1px 0px #528ecc;

}
.byard-socialemailsubbutton:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);

background-color:#378de5;
}
.byard-socialemailsubbutton:active {
position:relative;
top:1px;
}

</style>

<div id='byard-socialsub'>
<div class='byard-socialsub-title'>
Get In Touch With Us
</div>
<div id='byard-socialsub-icons'>
<ul class="byard-socialsub-icons">
<li>
<a href="http://www.facebook.com/BloggerYard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eo0daX7m2I2zzo4uutfz5iGMXF_143ArZNQCgM_MEJmAUfAXSf4ZDcjpPy8G6KV14AuIaWiQiEK4EjfJ0PKt6yXe8Hz-3Dl1Md3eJ2tfEBSc_HqzEk6dmXMP_P7jH6Cj3JRe-Y8qNqs/s64/blueprint-social-03.png" title="Add to Facebook" />
</a>
</li>
<li>
<a href="https://plus.google.com/101996924620264617682">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_DMzDm_ew6PaPFbeiQOKdecDSUPyr9Xy3uXVymx95wq-lzsiZQ5MNuQzovX8hLfSr5gldOCDfKj205SwtESGDlKIHr33kq7sGaispSFM0U-DTIQnk8JTF0tEujqajljxQkEEYAQZMpac/s64/blueprint-social-04.png" title="Google plus" />
</a>
</li>
<li>
<a href="http://www.twitter.com/BloggerYard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEejwgL-PMs8f_xnSIz5PsvhrzSRKGpBaXFDa0p0UHkkFhflO_rPhBdjUrXE7DszFrKGhsVLtOxpRVbyB3BuotSkik1dtcjeKMtFH9pe3SHDvVQu3oaU4jN9ULx0OXu9bsi8sRiCtQIOI/s64/blueprint-social-01.png" title="Add to Twitter" />
</a>
</li>
<li>
<a href="http://feeds2.feedburner.com/BloggerYard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieaWwr28HLSUU-pFUWqFfIkZTK5zFIDXaZDvrTpS3lsHHF9Iexm69stPqZWE1CSm0Bjlp5nTzB4mGwu541nIQjmyJ3Pjx1UjcYRYK6qewCgb3sxWNwHTd3BiuTPOH4mHy8vZb2wuaWLf4/s64/blueprint-social-10.png" title="Add RSS Feed" />
</a>
</li>
</ul>
</div>
<div class='byard-socialemailsub'>
<p style='padding-top:5px;padding-bottom:10px;font-size: 14px;padding: 10px;font-family:Source Sans Pro;'>
Sign Up For Free To Get Blogging Tips, Blogger Resources, Search Engine Optimization Tips, Templates and Widgets Straight In Inbox.
</p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=BloggerYard' class='byard-subsbox-form' method='post' target='_new'>
<input class='byard-socialemailsubname' name='name' placeholder='Your Name' type='text'/>
<input class='byard-socialemailsubemail' name='email' placeholder='Your Email Address' type='text'/>
<input class='byard-socialemailsubbutton' type='submit' value='Sign Up!'/>
</form>
</div>
</div>

Replace Highlighted Links With Yours
Replace Sign Up Message With Yours
Replace BloggerYard With Your Feedburner Name.
Finally, Click "Save" Button.

Need Help?

So friends, how was this widget ? I hope this is gonna help you. If you need any kind of help in implementing this widget then feel free to ask in comments. I'm always here to help you. Also share your views about this in the comment area. Get connected with us for more and also subscribe us. Take Care. Happy Blogging!