Showing posts with label below. Show all posts
Showing posts with label below. Show all posts
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
Thursday, September 22, 2016
How to Add Related Posts Below Your Blog Posts Using nRelate Blogger
How to Add Related Posts Below Your Blog Posts Using nRelate Blogger
Adding related posts beneath your blogs post pages has been very effective for every blogger. This tutorial is on "How to add "nRelate" related posts widget to your blogs". "nRelate" related posts widget is very easy to customize according to your blogs color scheme. You can also decide whether to show thumbnails or simple links as your related posts. Follow the following steps to add "nRelate" related posts widget to your blogs.
Note: I recommend registering to nRelate in order to customize your widget.
How to add nRelate widget?
- Go to nRelate website and click Partner Login
- Now hover over Install button and click Blogger. A field would appear where you have to provide you blog link where you want to add nRelate widget. Then click submit.
- Now click Advance version (to be able to edit the plugin later)
- Next it would ask you whether you want to add it to your post pages only or on main blog page too, I recommend you add it to your post pages.
- Next it would open up a widget called Add page element. There are 2 sections. Click on the section that says Edit Content as shown below.
- You have to delete the code in Red as shown below.
<style type="text/css">@import url(http://static.nrelate.com/common_b/0.01.0/nrelate-panels-default.min.css);</style><div id=nrelate_related_placeholder/></div>Click Add Widget button and its all done. :) Hope that was easy to follow.
Go to link Download
Subscribe to:
Posts (Atom)