Add Email Subscription Box In Header With Social Icons

Previously, we've created some widgets which were Socializer Widget, Email Subscription Widget and we  released Tech Shadow blogger template. In that template we'd created the email subscription widget with social icons in header and here we're going to share that widget with all you guys. This is the best widget to increase the email subscribers instantly and the main thing is it's place. In header, it will be shown to every one and there will be a lot of chances that any visitor may subscribe you through that widget. Even you can see that we've also added the subscription widget in header. Installing this widget in your blog is not so difficult but before the tutorial let me tell you something about that widget.

• 
  

Header Email Subscription Widget With Social Buttons

This is the stylish and clean header email subscription widget in which social buttons or icons are also available for increasing social followers. This widget is divided into two sections. Left portion of this widget is having subscription form where Name and Email field are implement along with the subscribe button. Heading and a little spam message is also available in that area. While right portion of this widget is having the social buttons which are Facebook, Twitter, Google+, Feed burner and Pinterest. This widget is gonna obviously help you in increasing your email subscribers and social fans because this will be implemented in the header and header is the great place for attracting your visitors for subscribing you.

See Live Demo

Tutorial

Well, I've told you something about this widget and now you may be want to implement it in your blog. Don't worry you can do this just following the simple steps below.

• Go To Blogger >> Layout >> Add a Gadget (In The Header Area)
• Choose HTML/JavaScript and Paste The Following Code In The Content Box

<style>

 #byard-topsubsbox {background:#fff; width:940px!important; height:90px!important;margin-top:20px; padding:10px;box-shadow:5px 5px 5px #ccc; border:1px solid #ddd;overflow:hidden;}
  #subscriptionsection {float:left;border-right: 1px solid rgb(168, 168, 168);padding-right: 56px;margin-top: -10px;padding-top:9px;}
  .subsbox-heading {font-size:20px; font-family:&#39;Source Sans Pro&#39;; text-align:center;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;}
  .topsubsboxname {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5qLDm2armZgKsv-g41J4Q3vLwt41mYOAb1T0RfdtYduWIRXf2JFCE1juuffZX8IYQ6l1uVQ0XN_X32q7DYZpiuEdLIMDKLoeQzPgGetf78lSYNmY4fR8zkPDRToZx9BHsAdROlsek64/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:150px; margin-top:10px; height:24px; padding:5px 15px 5px 28px; vertical-align:top; display:inline-block;margin-left:15px;}
  .topsubsboxemail {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgR5tnogOPMf98WxrOAUf6Me5QqCpikqE0BPMpsQCqs3QGGCz-VWu3UFwL9MnTFLtF1mGKbArDLvJQJZSvQ-TBrH1aSutRqvrEOUzDVMbHcFNmH50yYjkw3fih_wS5wOnD8CSl7s1s0k4/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:150px; height:24px; margin-left:5px; margin-top:10px; padding:5px 15px 5px 28px;vertical-align:top; display:inline-block;}
.topsubsboxname:hover,.topsubsboxemail:hover {border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}
.topsubsboxbutton {-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;box-shadow:inset 0px 1px 0px 0px #bbdaf7;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00B3FF), color-stop(1, #349ECB) );background:-moz-linear-gradient( center top, #00B3FF 5%, #349ECB 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00B3FF&#39;, endColorstr=&#39;#349ECB&#39;);background-color:#00B3FF;  margin-top:12px;  margin-left:5px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #84bbf3;display:inline-block;color:#ffffff;font-family:arial;font-size:15px;font-weight:bold;padding:6px 10px;text-decoration:none;text-shadow:1px 1px 0px #528ecc;}.topsubsboxbutton:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #349ECB), color-stop(1, #00B3FF) );background:-moz-linear-gradient( center top, #349ECB 5%, #00B3FF 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#349ECB&#39;, endColorstr=&#39;#00B3FF&#39;);background-color:#349ECB;}.topsubsboxbutton:active {position:relative;top:1px;}
  #socialsection {float:left;margin-top:20px;}
  .socialheading{font-size:20px; font-family:&#39;Source Sans Pro&#39;; text-align:right;margin-right:20px;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;}
  .socialicons ul {list-style:none; display:inline;float:right;margin-top:10px;margin-right:10px;}
.socialicons li {opacity: 1;float:left;padding: 0px 10px 0px 0px;}
.socialicons li:nth-child(6) {padding: 0;}
.socialicons li a img{height:49px;width:49px}
</style>

<!-- Top Subsbox By Www.BloggerYard.Com Start -->
<div id='byard-topsubsbox'>
<div id='subscriptionsection'>
<div class='subsbox-heading'>Subscribe For Free Updates!</div>
 <form action='http://feedburner.google.com/fb/a/mailverify?uri=BloggerYard' class='byard-subsbox-form' method='post' target='_new'>
  <input class='topsubsboxname' 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='topsubsboxemail' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Your Email Address&apos;;}' onfocus='if (this.value == &apos;Your Email Address&apos;) {this.value = &apos;&apos;;}' value='Your Email Address'/>
  <input class='topsubsboxbutton' type='submit' value='Sign Up!'/>
 </form>
  <p style='margin-top: 8px;font-size: 13px;text-align: center;font-family: Source Sans Pro;font-style: italic;font-weight: 600;'>We&#39;ll not spam mate! We promise.</p>

  </div>
<div class='socialicons'>
  <div class='socialheading'>Become Our Fan on Social Sites!</div>

<ul>
<li><a href='https://www.facebook.com/BloggerYard'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb6YXoKEMJwN8siQMuc3JpZddx5LkAT7TZjIGRxqMN5H_ZSseenYc8jKfuyJ61MIeuXLY9dNE_uRVexPJNYd8-J_k5vUVJIOsaNXDPCzhbyZtBMBnRyEFMjz9LC7Jlbz86DqTiEb7_HHqg/s1600/facebook_64.png' title='Facebook'/></a></li>
<li><a href='https://twitter.com/BloggerYard'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTehHnyGi9aIAN6p1MbFnCs8YWFbKzJhxPMOWYCfMRgLLKucEUN6boftsmono3UBFaf45NCvoF1flAkhn_5GJ-b5vRHVEYtemBasSW8dKuaCDhfqtl4fP65eoGNEwzyr1WxejQTGJpOaB/s1600/twitter_64.png' title='Twitter'/></a></li>
<li><a href='https://plus.google.com/101996924620264617682/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-KFmXkwULzMAam7IsWqO-JCG1IJAMZoNHQmHpUAEZv1cp-AxMUOCFla9H8jOK0wyApPwg5ru1gB1a_E305mAV9iftUPlbF1WCRD-69rBDfu8Ie-LsNtl8RWygARHbS1HioLw3Y6kkJbZd/s1600/google-plus_64.png' title='Google +'/></a></li>
<li><a href='http://feeds.feedburner.com/BloggerYard'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUE2aKYDEAMd9aPq_ohYhOA0UUgknw92nCSRRBUe1E-Q0pMi2odeEdYT2beEncPfY67dbEVamHI83HRrYZyv5iVk8OZpW8h_86-9vTe1qouUnuCOpJBkv7_B6O2IKYaorRgNI4zSQF6zC/s1600/rss_64.png' title='Rss'/></a></li>
<li><a href='http://pinterest.com/yaqoobhisbani/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6TdjzBVGT7dZIz1iQyk5chETzFGuQ1TJqMg_UhgC9_-xRCxZ1pvMgS1rx1i9UZr5u2hsy5b2ge94jWexUA8b6P0_DMx5ekemk1vPjkY7FFs8UShQ8pAtZMxDNnWzRNLzacJbFwZpwl5pz/s1600/pinterest_64.png' title='Pinterest'/></a></li>
</ul>  </div>
    </div>
<!-- Top Subsbox By Www.BloggerYard.Com End -->

• Replace The Highlighted URLs With Yours
• Click "Save" and You've Done!