Monday, October 31, 2016
How To Merge Facebook Like Box And Subscription Box Below Blog Post
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;
}
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%2Fnairotech&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=http://3.bp.blogspot.com/-mOSvqawYcHk/URfqH7rzzjI/AAAAAAAADjc/33GRwq6jToU/s1600/rbrss.png/></a> <a href=http://twitter.com/nairotechblog target=_blank title=Follow us on Twitter> <img alt=twitter class=middle src=http://2.bp.blogspot.com/-_ENv9wTI9Uc/URfp_3wbONI/AAAAAAAADjU/mlzRXMHTTuE/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=http://3.bp.blogspot.com/-ynFsVtn-uLg/URfp1LX78VI/AAAAAAAADjM/NkQ1CwyrHUw/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>
Any contribution is welcome, and feel free to share this useful post using the share buttons.
Go to link Download
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment