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.
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 == "item"'> <div id='rbfblikebox'> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F
nairotech&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23e1e1e1&stream=false&header=false&' 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/AVvXsEiusCRBYsVgNt4JQK0EWfzefOb2g8_ZX-MTzgM716_M5PmdNKOfZL758GvQ8yzJqh6JcmIf-MlCJhbdmBPQ9rOfmF7trhhoDI0bqVxZCuOTZ_s731PdWdsv8qur6FSuy0G7jCJBEJcTSU-J/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/AVvXsEhKwVBiwvwzkpSkUZdCZcogc0zNjfOLVyUuI5Z-YOT6EsE3dOkzaXnbvXzFfPEXbVYW3agayd9qe9YGVBhMUEGmSYA3sBDAb3WdU6gMaDnqQ86zj_Opbwjg9D__ZnoKpzczEoSF0t3WKmJg/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/AVvXsEhbt2YI-x8jGjsx4posyQMBd19tuyZlSrgp-WmNcde_kXXVeDCti3TGKJIflAB1_4RveWSA9MMNw38ZFgFBpQtodAhHB7I7lyN3leOIGjuKEM5Al_zdNvH2E4Vdxp0U71UvJqKfpodDeGdk/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('http://feedburner.google.com/fb/a/mailverify?uri=
Nairaharotech', 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' 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.
