Home »

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/AVvXsEhMdHPqYZWBtY9fc-iOZ4lqNfVif3OiLkC3lmYZqDg1KCUNMBZFxcksQwc7PMHu0Bu1v-2WZOoXMBoHqN9bTxxI9t5Fh4WoVPeSkvBSlRRDS5fTwsDX2vqieuHchxK8Lh7fTvKrmwYBNng/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/AVvXsEgiqvXneO8kBzW_MGgSaI4crV6JwWZVFv4llJ8G6sWm_ZZiD2nJwq2yHGQpGcj_t06FCanIH1g2RlMtEY6AewWLl4zsqu-CjQyRQVdaqZ8eu06inAvVTjG5K84cRegeqwviMrb6Iwv7PPw/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/AVvXsEjtfYogmMB9Clls1_ygQBB0nJHpm8YQHXUx29t3tt-IIRaxJrdSGZXPBWMi_AWCBA1te8d2pezzWJUDF5yowBep4QWPBxy0sX0xS_rCxmIR1dBypCvP7WhBxl2i3S3VZFckDsG87LQeguc/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/AVvXsEjAaJItMZOfIlw5-7DBt6t3AI5ylHIaAXO0GW3G7RY4SBFsT2BDlzwtgLxK1bVMhxZianN4SzNtF0N1D9fvx-odWTv8py6pRvt3d5PX_9t6Al0aAyz4-iiofSR2hK45tO0IRcS8QneLSHc/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/AVvXsEg2ONF1Pctsuu1gpthMX2FsDKLUr_W5h78PX3J5abng_LaXhXPp_TKOstIn5u6YUaKSXD2GuBrdfftxlRcPnFe5itS7e3REoyVAEBY2dMNnz6f3811-AcdO903i4TSpsg4DV7EggnEXcFc/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/AVvXsEg6LJ4GURANMuBIgP-KJ1f9hSgbjXZO2ByowXYEDrIgKwpDmKDxnOocgJwHGMXGayBP2oAT7WcxEFNu5GmybwMNCG6oqwUSTMYLGEsQWjefjWVzzR3wGvmQ6T7eK10rAvA36NO95jApzNA/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/AVvXsEiMaTohe7G8Zxnb7hbuE344m5rLnIUhTeUnkDwm-ThNLYgh5HUMfDVxxWDGIlrW-ezsvsAHhA0IpFcOFNffFpOGaoFQUGhkNqyftmak2unch95amJSTzPazfSJMIamBOVs1v33r9dsKDWM/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/AVvXsEhbZLs5zOYK0xnfENCjnQa-pV4LV1X2kF-RupUXNCPIetO3FTGgzjzMe2M7SRSa8HsVjsQl0FTRLXXeNN-VCJ7ofHPzsxz8WoepFyFh6oxePPklRlSV4fDye6_Ds1zoVVd6ArupVzFFIPc/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.



Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

name is full abdelali tibicht, my country is morocco, care techniques and the development of blogging, my goal through this blog, is to help bloggers develop their blogs through my modest experience gained during my career blogging can.

Follow Me On Twitter Or Facebook

Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.


Did you like Thread ؟
Tags:

Comments (2)

Loading... Logging you in...
Dashboard | Edit profile | Logout
  • Logged in as
0 Vote up Vote down
Sandra's avatar

Sandra · 594 weeks ago

So if I don't have a feedburner account what do I do?
1 reply · active 594 weeks ago
Loading...
+1 Vote up Vote down
abdelali10's avatar - Go to profile

abdelali10 29p · 594 weeks ago

It doesn't matter but it is better to have an account in feedburner

Post a new comment

Comments by