A blog about technology, Internet, social media, blogging tips, seo tips, computer tips and tricks, earning money online, etc.
Adding Related Posts Below Blog Posts In Blogger
How about adding Related Posts below your blog posts? Advantage of adding Related Posts below your blog post is that your readers may find some of your Related Posts interesting and click on the link to read the post, thus your readers stay time on your blog increases and thereby increases your pageviews. So this tutorial will help you to add Related Posts below your blog posts.
Steps Of Adding Related Posts Below Blog Posts In Blogger:--
1--> Login to your Blogger Account.
2--> Go to Blogger Admin Page > Template > Click on Edit HTML.
3--> Check Expand Template.
4--> Ctrl + F and find </head>
5--> Above </head> , Copy and Paste the codes given below:
6--> Now press again Ctrl + F and Find <div class='post-footer-line post-footer-line-1'>
7--> Above <div class='post-footer-line post-footer-line-1'> , Copy and Paste the codes given below:
8--> Save your Template and Done.
Steps Of Adding Related Posts Below Blog Posts In Blogger:--
1--> Login to your Blogger Account.
2--> Go to Blogger Admin Page > Template > Click on Edit HTML.
3--> Check Expand Template.
4--> Ctrl + F and find </head>
5--> Above </head> , Copy and Paste the codes given below:
<!--Related Posts with thumbnails 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 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:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpiZNaEwLhWMkxU9Hv2QJ5gNKpnn7pCJqgyiaITNwUQ6TOU0UYpmSuW5dOj2iWTdTjGdkid30zZEwECaGCR-lrWXwqcFyssfKUkf0bS5gmLm-zA_jhkZOF1Xx2kgB-wc3zvFqIGOnS7d8/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js'
type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
6--> Now press again Ctrl + F and Find <div class='post-footer-line post-footer-line-1'>
7--> Above <div class='post-footer-line post-footer-line-1'> , Copy and Paste the codes given below:
<b:if cond='data:blog.pageType == "item"'>
<!-- Related Posts with Thumbnails Code Start-->
<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_thumbs&max-results=10"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="<b>Related Posts :</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
8--> Save your Template and Done.
Subscribe to:
Post Comments (Atom)
-
HeartATech
Copyright©2012 HeartATech. Articles cannot be reproduced without permission from the author.
Powered by Blogger
thnk you sooooooooooooooooo much!!!!!! It worked perfectly nd is super easy to do!! :)
ReplyDeletewelcome friend :)
Deletehi, it is not working for me... when you say to place the codes "above" something, do you mean to place it on an empty line of the html above the < / head > , or after whatever is on the line right before the < / head > ? please help!
ReplyDeletepaste the codes given in step5 right before the < /head > tag.
Deleteand paste the codes given in step7 right before the < div class='post-footer-line post-footer-line-1' > tag.
For any further help plz comment here.
i can't find < div class='post-footer-line post-footer-line-1' > anywhere, i don't know why because when i was trying to do this the other day i could find it.. i'll try to figure it out, thanks for the help!
Deleteit worked, thank you!
Delete100% working . thank . http://www.k2blog.biz
Deletethank . visit my blog http://www.k2blog.biz
ReplyDeleteDoes not work.
ReplyDeleteLet me try...
ReplyDeleteThank's man!!!
ReplyDeleteit doesn't work for me :( I can't find the div class='post-footer-line post-footer-line-1'
ReplyDelete