How To Add Stylish Rss Email Subscription Widget With Social Icons

Want a professional stylish subscription widget for your blog . Here is the suitable widget which helps to update your blog with new look . My recommendation is better apply this widget under the body of post which gives really awesome look to your blog .If you want a Email subscription in side bar go for our previous widget tutorial .

Also Check : How To Add Stylish Rss Email Subscription Widget In Side Bar 

You Can Also Have Live Demo Click Below : 

Tutorial : How To Add Stylish Rss Email Subscription Widget With Social Icons 

1. Go to Blogger Dashboard .
2. Click on  the Template Section .
3. Now click on Edit HTML tab .
4. Now search for </head> just above it paste the below code .

<style type='text/css'>
.sub-box{
width: 600px;
background: #fff;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border-style:dashed; 2px solid: #389af2;
}
.followlinks h1{
font-family:Cabin Condensed;
font-weight: bold;
color: #000;
padding: 0px 0px 2px 40px;;
font-size:17px;
}
.followlinks ul{
font-family:Cabin Condensed;
font-weight: bold;
}
.followlinks ul li{
float:left;
width:90px;
padding-left:40px;
margin:0 0 0 5px !important;
line-height:35px !important;
}
.followlinks ul li a{
font-size:20px !important;
text-decoration:none;
font-weight:normal;
}
.followlinks ul li.otrss{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaDRWJlpNLhnWzV7_wDdgBs8Is36N4vbrzzKKKrRGvCvuHCWkDn5ltqwR83v39LLmyx4ezxD5QIpRmoOKkoHv8aYFTlyGltiw1X2Q_6Nqqhh-VAmm0noB5zeQ-_1lo0iIxj7x_LClQ3RlS/s1600/rss-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otgoogleplus{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuZ1f8qCBhfrHlpnKoVZNDqULOu9Dir8-FqJVXTQ-CW9qMv8ZPZmFsq0X2N0SPDVYAnKwtX7oLJL0ChhmuWud-DXHPBQcbsFztRt5_7W3TwwgTz4YpFZJ9vYQ71YH0HThFPEyhLda2UQ6T/s1600/googleplus-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.ottwitter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF7Wz1RkRQ-T88NDzaERMaDYbwQpycJUQ2khuhyphenhyphenHyEOgIbALE32aWBN4Y5RI1jlgP5iWoMbhnjAMhDFxjJ6qNVntF27Vo0ScU41f0gCJ0ZZBl44mCGejBD4wCrNt752tNfDAZUPVvI-xN7/s1600/twitter-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otfacebook{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcO8YPQZclrpLOSOViFryiMzptHnEhkirDH7HLOrGGuGV23x-GzDMZxiLjwQ7uI6d2h7ty8BRGby6qnoBEZwXtnREb2fXqviDwpRN2OdsT-pyUubYNZxBgs7c6L5c7up9d7dgYfoX28mNb/s1600/facebook-ot.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:5px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSrzt9sO8n5H3Kn7AaszHMo2CKf8YsgjdjDgsfOeJaCgrw85tFcZLlPvyU65QuPF8850ZF5-O_jPk7P535Cnp4K5t90_S-QK16demOJs_riI9eflWRL_reKXFUL2IT_VSC2St4LE0RHgq8/s1600/ot-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#444;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 550px;
}
.emailtext:focus{
outline: none;
}
.sub-button{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 10px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
.sub-button:hover{
background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#e7e7e7&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
}</style>
<script type='text/javascript'>
  WebFontConfig = {
    google: { families: [ &#39;Cabin+Condensed::latin&#39; ] }
  };
  (function() {
    var wf = document.createElement(&#39;script&#39;);
    wf.src = (&#39;https:&#39; == document.location.protocol ? &#39;https&#39; : &#39;http&#39;) +
      &#39;://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js&#39;;
    wf.type = &#39;text/javascript&#39;;
    wf.async = &#39;true&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Save Template .


How To Add Widget In Your Blog : 

#1. Log in to Blogger Dashboard .
#2. Now navigate to Layout Section .
#3. Now Click on Add A Gadget .
#4. Now scroll to HTML/Javascript and Paste the below code .

<div class='sub-box'>
<div class='followlinks'>
<h1>Get Free Email Updates or Like us on your favourite Social networking site</h1>
<ul>
<li class='otrss'><a href='http://feeds.feedburner.com/bloggerzlab' target='_blank'>RSS</a></li>
<li class='otgoogleplus'><a href='https://plus.google.com/+techrevert' target='_blank'>Google+</a></li>
<li class='ottwitter'><a href='http://twitter.com/bloggerzlab' target='_blank'>Twitter</a></li>
<li class='otfacebook'><a href='https://www.facebook.com/bloggerzlab' target='_blank'>Facebook</a></li>
</ul>
</div>
<br/>
<div style='text-align: left; display: inline-block;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bloggerslab&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Everfreetech'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailtext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input alt='' class='sub-button' title='' type='submit' value='SignUp'/>
</form></div></div>

Customizing The Widget :

Replace All Blogger The Url's with your desire blog Url's .


Don't Forget To Share Our Articles .

If you have any suggestions or query related please feel free to comment below .