How To Merge Facebook Like Box And Subscription Box Below Blog Post

Having applied Facebook comment box and subscription box on Nairotech, but Facebook like box and subscription widget seems to be quite unique & stands out due to the combination of both Facebook Like Box & Rss Subscription Box which appears at the end of every post. Helps increase the number of Facebook likes and subscribers due to the special layout.

Follow the simple steps below.

Add Facebook Like Box & Subscription Box

Go to your blogger dashboard
Click on Template > Edit HTML > Proceed (Mark Expand Widget Template)

Use ctrl F to find ]]></b:skin>  & paste the following code above ]]></b:skin>

#nt-likebox{
margin:10px 10px 0 0;
overflow:hidden;
text-align:center;
float:right;
max-width:250px;
min-width:250px;
min-height:250px
}
#nt-likebox h2{
font-size:25px;
font-style:italic;font-variant:small-caps
}
#nt-likebox h6{
font-size:1.1em;
font-family:"Myriad Pro",Helvetica Neue,Helvetica,Arial,sans-serif
}
#nt-likebox div.row{
text-align:center;
margin-bottom:10px
}
#nt-likebox img{
display:inline-block;
border:none !important;
}
#nt-likebox .email{
clear:none
}
#ntfblikebox{
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;
}

Now, 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%2Fnairotech&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/nairotech' data-send='true' data-show-faces='false' data-width='450'/> </div> <div class='row'> <a href='http://feeds.feedburner.com/nairaharotech target='_blank' title='Suscribe to RSS feed'> <img alt='rss' class='middle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixZEEuFHyx7c6PritCILUYLJPyc4oZc9t_NoK_7Itq_kAgK2YclGujCzorzT16FiiiAi-lBIwSNQ7JtRCyIDtTe5nYF4iT54M49yynSBxq6xpjsKgDLERCCLdymZe_a0T9gA0ubHVnz_TN/s1600/rbrss.png'/></a> <a href='http://twitter.com/nairotechblog' target='_blank' title='Follow us on Twitter'> <img alt='twitter' class='middle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWTdR4ofmIqzM8Hm1BS8jx4XNYL0umKNo9h3Dh5oEB3oYcJCzgsTfFES6oLJL6tV1xvVROO-kDk4IeAkTzgfO8AkKdyQjlWDsYG0YMLB0l3IWZybsEiOZEaEGsJyY23wjWpsGsGvrGy8B-/s1600/rbtwitter.png'/></a> <a href='http://www.facebook.com/nairotech' target='_blank' title='Become  A Fan on Facebook'> <img alt='facebook' class='middle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTquEmnrwMehAlpfyt2qgltj0DQdNEcxbawq8oibpcz-vA_twB1iIK0aZTmhYnMx8IAn6Yx3ElOLlrkUoRFzG1LKdxMymW2ZnnXivD6rNblM1fqlgnjpBSIf5ifNyd3moLPj6B3frPwWwl/s1600/rbfacebook.png'/></a> </div> <div class='row'> <h6>Get Subscribed 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=Nairaharotech&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='Nairaharotech'/> <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 safe with us!</small> </div> </div> </b:if>
 

Change Nairotech with your facebook name

Change  Nairaharotech with your with your feedburner Id .

Change  Nairotechblog with your twitter username.

Now, Save your template and you are done.

Any contribution is welcome, and feel free to share this useful post using the share buttons.