Add Facebook Like Box With Subscription Box Below Post

It's not new again, as there are several tutorials on Facebook like box and subscription box, all over the web, but this widget seems to stand out due to the combination of both Facebook like box and do you like this article subscription box, and it will appear at the end of each post. It tends to increase the number of your Facebook likes and subscribers due to his positioning.
Now follow the simple steps below.

How To Add Facebook Like Box & Subscription Box

• Go to your blogger dashboard
• Click on Template > Edit HTML > Proceed (Mark/Check Expand Widget Template)
• Use ctrl F to find ]]></b:skin> and paste the following code above ]]></b:skin>

#rb-likebox{
margin:10px 10px 0 0;
overflow:hidden;
text-align:center;
float:right;
max-width:250px;
min-width:250px;
min-height:250px
}
#rb-likebox h2{
font-size:25px;
font-style:italic;font-variant:small-caps
}
#rb-likebox h6{
font-size:1.1em;
font-family:"Myriad Pro",Helvetica Neue,Helvetica,Arial,sans-serif
}
#rb-likebox div.row{
text-align:center;
margin-bottom:10px
}
#rb-likebox img{
display:inline-block;
border:none !important;
}
#rb-likebox .email{
clear:none
}
#rbfblikebox{
margin:10px 10px 0 0;
text-align:left;
float:left;
overflow:hidden
}
.emailbutton{
background:#f7f8f9;
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-ms-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;
-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888 !important;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
font-weight:bold;
text-decoration:none !important
}
.emailbutton:hover{
background:#f1f1f1;
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-ms-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );text-decoration:none !important
}
.email{
clear:none
}
.email{
clear:both;
width:100%;
margin:10px 0
}
.emailform{
position:relative;
width:250px;
background:#fff;
margin:0 auto;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;border:1px solid #ddd
}
.emailinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;
border:none;
background:none;
font-family:georgia;
font-style:italic;
font-size:14px;
color:#666
}
.emailbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:-1px;
bottom:-1px;
display:block;
line-height:16px
}
.emailbutton{
padding:8px !important
}
.emailinput{
padding-right:70px !important;
width:170px !important
}
.emailform, .emailinput {
width: 245px !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
height:auto;
}

• Next search for <div class='post-footer-line post-footer-line-1'> and paste the following code above/before it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='rbfblikebox'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Frealcombiz&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23e1e1e1&amp;stream=false&amp;header=false&amp;' style='border:none; overflow:hidden; width:250; height:250px;'/>
</div>
<div id='rb-likebox'>
<h2>Do you Like this Article?</h2>
<div class='row'>
<div class='fb-like' data-href='https://www.facebook.com/realcombiz' data-send='true' data-show-faces='false' data-width='450'/>
</div>
<div class='row'>
<a href='http://feeds.feedburner.com/realcombiz' target='_blank' title='Suscribe to RSS feed'>
<img alt='rss' class='middle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOV5YmH0EpfwtqvkFQQ_PYx72lpgTIbCtouqa6U0gmVgBzf6xf3tJvVEQ8E1mz8iKsbo73oVWMlO5V_fcHoHpZIVFFqlO7BfYL01Ej034OQt6kSg5R7X8obP-MjsCplpMi1ysyeDEwX2AN/s1600/rbrss.png'/></a> <a href='http://twitter.com/realcombiz' target='_blank' title='Follow me on Twitter'>
<img alt='twitter' class='middle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHd-boC6zWH78EP8c1cEAtwEk3Is8si_mz9teJfHi0dDx-ppDWN8_w-0TjVCNmO52Na7194bSQmkwuQCd2J5CRAOnLRTgvVPd4vn7o6yOEwd1lvuYHtKeupe400lmAfsahcX55bzBWiecZ/s1600/rbtwitter.png'/></a> <a href='http://www.facebook.com/realcombiz' target='_blank' title='Became Fan on Facebook'>
<img alt='facebook' class='middle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNbl_yk3VbaJCS8jNnQQfLd_WPvFQkJoQdynUxLiodZUTLvK9KBoBs7c6v2cU0HD5sf9tgJ3jLhSdukIYsUo1mSENPCNs8efWdIDZd0YpUgZhVAjO0YKTiMQ7bqe4Uc_QyNzM_6wTphyphenhyphenz/s1600/rbfacebook.png'/></a>
</div>
<div class='row'>
<h6>Get Subscribe to Free Email Updates!!</h6>
</div>
<div class='row'>
<div class='email'>
<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=realcombiz&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='realcombiz'/>
 <input name='loc' type='hidden' value='en_US'/>
 <input class='emailinput' 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 class='emailbutton' title='' type='submit' value='SignUp'/>
</form>
</div>
</div>
<div class='row'>
<small>*Your email is secured</small>
</div>
</div>
</b:if>

• Replace realcombiz with your facebook fan page username
• Replace realcombiz with your with your feedburner Id
• Replace realcombiz with your twitter username

Finally Save your template and your are done.
Any queries or contribution is highly welcome, and feel free to share this post using the share buttons. 

Posted in: Blogger Widgets