Add Cool All In One Subscription Box For Blogger

Monday, November 18, 2013

Today, my friends, I'll give you an excellent addition and beautiful, Characterized by the characteristics of the positive, which help in Earn Fans And keep track Add Stylish All In 1 Social/Email Subscription Box For Blogger and Add New Social/Email Subscription Box Widget For Blogger

How To Add Cool All In One Subscription Box For Blogger

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOAUvtx55Da9kpO1lqDNwl9rIwdUjVcTaIi58r7N0KzhEKLNzmqSnu1_vWUNiCNzoyXuTJAhkUlFouGpJ-KX4NOmPeMUgAjXJmfCBwTy50xaEm7o0Sfztn_fzjfCj9wNRPO_8u5_WvmyE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Yd0ehqPHrw5xkTNlZH-udXlw_3CPpCFML7zjZTtFOM6e6EQgsn_a9__MLK1WWnROcQpkVRWcGzCAMi8IdMRXVTm1TIcCeNLtcQVFxzvlZ7WFwVrCW5raX9QFFKoen-wfS84dSARgcRY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCFr3jYbadGwqZMUPisNtoKa1larUizX72L98Yn6nk8IiujM_B0XucFRxZJ73vpC3lLOzjBsr3OpEUKtbEH_jDEZPN8KhRFcFkJxn-UmwwTUvDoZfk2BrIcyZhh-CAS3XSFYiWaA7b5fc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheivQA5h2989Hlm5GEqNnZJ1yX9mh_FQv73PJ4Rxv4jkQ3mxMxyQABHzBZoxNW5Xf_3LtzvSgMMAqL9kqJmxrcQQKT8KcFO8rKIOmYHr5q7qXIWBTHwOHo-x0LCXHDs64mCZBMfrXGK8E/h120/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/USERNAME3" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2bAh0tbdumiXUsoMBqZ85wW_Q7EGzHb-icSIQz67sE03ustFaPMVHDZmfkm_UAT8pTbvuFLwaDTEBfnulX3t2hqEumWTEuZMytliOb4BUDhzqLieb2cAJYzSrXadBJQpCqofHYjPAa3k/h120/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="G+ URL" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtthDVl9MdFoxwGylQeFO2S9dFijtXBCOhydEKEtPUZiBmBsOMtBCZBS2e9UKPxx618WjxOSBTkgvcEqy2RKp_xHmKAVWVmFeWX6kSdCCvOyu32kbNMTYI4_K8UxPCjwlbuJvDjS4YgSk/h120/google+.png" title="Google plus" /></a></li>
<li><a href="http://twitter.com/USERNAME2" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuVE7N9eqD-rIfhaCpHBNOxloZRmQc_Xoj-Inmzj5m-4IGZw1bRMlt29RKtqg4d6km6Zaj57NFEqOY1xRBuhi1e3tPVzPvH_vO3WaZp0E3guchDRMLMTP6HJi6GfWTpbi4ozAZx3zSi_A/h120/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/USERNAME1" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB15CWk_tcVtsIBDJ0lYApvf4BT5O4KRLtbLnkVEJ0yqTx7QVpztqQoiGTGfZ8JEoQOLFY2ZBPe2QN_-8ztHoDdcYDTmXXLHYpx-tPD45tJfNxuLumzQBYQp_X9U7bd6bLIb8QrPg00iQ/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.