How To Add Cool All In One Subscription Box

Written explanation 

1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)
 

]]></b:skin>

3) Now Paste the Code Shown Below just Before it.

.strip{
    margin-top:-12px;
    width:100%;
    margin-bottom:-6px;
}
#socialsub {
    width:300px;
    padding-bottom:10px;
    background:#f9f9f9;
    border:1px solid #eaeaea;
    -webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
  }
  .socialsub-title {
       font-family: Verdana;
    font-size:25px;
    background:#16a085;
    padding-top:10px;
    padding-bottom:14px;
    color:#fff;
    text-align:center;
    margin-bottom:5px;
  }

  .socialemailsub {
    font-size:14px;
    padding:5px;
    color:#444;
    font-family: Arial;
    font-family:bold;
  }
  .socialemailsubname {
    background:#fff url(https://lh4.googleusercontent.com/-R2ZgitgwE_4/UoSzzv7pWLI/AAAAAAAABnY/BOqk3x4hpks/h120/name.png) no-repeat 7px 8px;
    border:2px solid #dbdad9;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:#dbdad9;
    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;
  moz-box-shadow: 1px 1px 3px 0 #ddd;
-webkit-box-shadow: 1px 1px 3px 0 #ddd;
box-shadow: 1px 1px 3px 0 #ddd;

  }
  .socialemailsubemail {
    background:#fff url(https://lh3.googleusercontent.com/-NMuqSpxkt3E/UoSz59sv2qI/AAAAAAAABng/ZHvc4x7fHXM/h120/email.png) no-repeat 7px 10px;
    border:2px solid #ddd;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:#ddd;
    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;
     -moz-box-shadow: 1px 1px 3px 0 #ddd;
-webkit-box-shadow: 1px 1px 3px 0 #ddd;
box-shadow: 1px 1px 3px 0 #ddd;

    -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;


  }
  .socialemailsubname:hover,.byard-socialemailsubemail:hover {
    border:2px solid #bebebe;
    box-shadow:0.5px 1.5px 2px #ddd;
     moz-box-shadow: 1px 1px 3px 0 #ddd;
-webkit-box-shadow: 1px 1px 3px 0 #ddd;
box-shadow: 1px 1px 3px 0 #ddd;
  }

  .social89button {
      box-shadow:none;
   background:#e74c3c;
    color:#ffffff;
    font-family:arial;
    font-size:20px;
    font-weight:bold;
    padding:10px 0px;
    text-decoration:none;
    margin-top:15px;
    margin-left:6px;
  width:280px;
border-radius: 8px;
  }
  .socialemailsubbutton:hover {
  opacity:0.9;
  }
  .socialemailsubbutton:active {
    position:relative;
    top:1px;
  }
.text5{
    margin-top:8px;
    color:#ddd !important;
    font-size:12px;
    padding-right:2px;
    padding-left:2px;
    font-family:verdana;
}
#flipboard_btrix{ width:300px;}
ul.flipboard_btrix{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_btrix li{
display: inline-block;
width: 55px;
height: 50px;
margin-right: -px;
background: white;
font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_btrix 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.flipboard_btrix 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.flipboard_btrix li a img{
border-width: 0;
}
ul.flipboard_btrix li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
ul.flipboard_btrix li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
form#btrix-searchform {
    display: block;
    padding: 7px 16px;
    margin: 0;
}
form#btrix-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}

4) Now save your template.

5) Go to Blogger Dashboard → Layout → Page Elements.

6) Add a HTML/JavaScript Gadget.

7) Paste below code in it.

<div id='socialsub'>
<div class="strip">
<img src="http://3.bp.blogspot.com/-NIiNPD-EDM4/UoS0DSwYevI/AAAAAAAABno/yxFXK837b-4/s1600/strip.png" height="5" width="100%"/>
</div>
<div class='socialsub-title'>
Sign Up In Seconds
</div>
<div class='socialemailsub'>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=USERNAME1' class='subsbox-form' method='post' target='_new'>
<input class='socialemailsubname' name='name' placeholder='Your Name' type='text'/>
<input class='socialemailsubemail' name='email' placeholder='Your Email Address' type='text'/>
<br/> <br/>
<input class='social89button' type='submit' value='Sign Me Up!'/>
</form>
</div>
<br/>
<div id="flipboard_btrix">
<div class="text5">
<font size="2"> <font color="#bdc3c7"> .or you can connect through our social sites </font></font>
</div>
<br />
<center>
<ul class="flipboard_btrix">
<li><a href="http://www.pinteresr.com/USERNAME4" target='blank'><img src="https://lh6.googleusercontent.com/-d2gUwraeKsw/UoS0Rf9o_UI/AAAAAAAABn0/nUP3wuiY6J0/h120/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/USERNAME3" target='blank'><img src="https://lh3.googleusercontent.com/-vKNjbYyERyA/UoS0ambAHXI/AAAAAAAABn4/Xmb3-yQjwvU/h120/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="G+ URL" target='blank'><img src="https://lh3.googleusercontent.com/-BBFlDMS1RCY/UoS0h5rTzJI/AAAAAAAABoA/a7e4fv5Jepo/h120/google%2B.png" title="Google plus" /></a></li>
<li><a href="http://twitter.com/USERNAME2" target='blank'><img src="https://lh6.googleusercontent.com/-9Je_pYE7Plg/UoS0pkZz1nI/AAAAAAAABoI/7Uighq892xw/h120/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/USERNAME1" target='blank'><img src="https://lh6.googleusercontent.com/-1qL41vxLzpQ/UoS0wz520tI/AAAAAAAABoQ/79D4sLqh5UA/h120/rss.png" title="Add RSS Feed" /></a></li>
</ul>
</center>
</div>
</div>

8) Customize your setting.Find any word click F3 or Ctrl+F. 

♥ Replace it USERNAME1 with your Feedburner Username. 

♥ Replace it USERNAME2 with your Twitter Username. 

♥ Replace it USERNAME3 with your Facebook Username. 

♥ Replace it G+ URL with your Google+ Page url . 

♥ Replace it USERNAME4 with your pinteresr Username.

9) Save your Widget.

Socializer Widget By PatTakha ZOne

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →