Related posts widget is very important for a blog, because it improves the variety of web page opinions and also help the guest to perspective other content relevant to blog. Now here is wonderful trick to display links to related posts beneath each posts. Related posts link below every posts and have three to four linked pages with thumbnail pictures and send your guests to relevant content. By including relevant content below your Blogger posts you will get more page views. The gadget we have in this post is similar to the popular Link Within Related posts but with some great specs and choices.The gadget is 100 % free and ad-free. It takes a moment to get the widget up and running on your blog, no signup required. Display thumbnails of posts having same labels or categories at the bottom of each site involves people more and increases the pageviews.
Technically, there are a lot of ways of displaying related content or content but most of them are not extremely focused. Either they don’t entice individuals or they provide totally irrelevant results. This will make them feel happy after reading all your article. This feeling will create them check out again or even consistently on your weblog site. In this way, guests from google can become regular readers of your blog. So the point is, You should link 5-6 related articles in your blog post. Doing this will also help you to increase the page views of your weblog site and will also decrease the bounce rate of your weblog site.This relevant content gadget displays relevant posts using the labels, so it will list posts with the same labels as the posts it is below.You can add some extra customizations to this gadget. In this tutorial i will share how to add related link to below blog post in blogger.
#Add Related Links to Below Blog Posts
Step-1 Go to Blogger Dashboard >>Template>>Edit HTML.
.png "Related Links to Below Blog Posts in Blogger")
Step-2 Search ]]></b:skin> tag.
Step-3 Paste below code just above it ]]></b:skin>
/* The CSS Code for the menu starts here hackpower.org
<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;}
#related-posts a{color:#0c0080;}
#related-posts a:hover{color:#0ab0fd;}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:12px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://2.bp.blogspot.com/-Tx5vm6_cR5k/VVX1tXJQOFI/AAAAAAAAB2s/deJGJUfbw78/s1600/hacpower2.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;
height: 20px;
margin-top: -5px;}
#related-posts ul li:hover{
background:transparent url(http://3.bp.blogspot.com/-5fVR8y7S7XM/VVX1jKVUeLI/AAAAAAAAB2k/5U_MLqWfbHE/s1600/hacpower.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}</style>
Step-4 Now Search <div class='post-footer-line post-footer-line-3'>
Step-5 Paste below code just below it <div class='post-footer-line post-footer-line-3'>. In case, you are unable to find <div class='post-footer-line post-footer-line-3'>, then you can paste it just below <data:post.body/>.
<!-- hackpower Related Posts Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
</b:if>
<!-- Related Posts Code End-->
Step-6 You can change var maxresults=10; with the number of post you want to be displayed.
Step-7 Finally Save Template and You are Done.
We hope this tutorial has helped you in displaying related Link below posts in blogger. If you have any questions, then feel free comment.
ليست هناك تعليقات:
إرسال تعليق