How To Add Related Posts Below Posts On Blogger Blogs
After spending lots of time searching for related posts for blogger blog most of the results are not perfect as expected. So I decided to update this article for people in need of related posts on their blogger blogs.
Having related posts is to help readers easily find the content relevant to the previous article they have read. Apart from that it also helps blog owners to improve internal links, decrease bounce rate, and have more page views. You’ll see the number of views increase significantly as the to display related posts on the blog
Add Related Posts without Thumbnail to Blogger Blogs
1. Signin to Blogger, from dashboard navigate to Theme >> Edit HTML then click anywhere inside the box and press Ctrl + F to find /head>
2. Copy and Paste the below code above /head>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<!—TechBlogNG.Net Related Posts Scripts and Styles Start—>
<style>
#related-posts {
float : left;
width : 100%;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 14px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 5px ;
padding : ;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px ;
padding : 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : ;
}
#related-posts ul li {
display : block;
background : url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat ;
margin : ;
padding-top : ;
padding-right : ;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script type=‘text/javascript’>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = ;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = ; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = ; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array();
var tmp2 = new Array();
for(var i = ; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length – 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length – 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = ; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length – 1) * Math.random());
var i = ;
document.write(‘<ul>’);
while (i < relatedTitles.length && i < 20) {
document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] + ‘</a></li>’);
if (r < relatedTitles.length – 1) {
r++;
} else {
r = ;
}
i++;
}
}
//]]>
</script>
<!—TechBlogNG.Net Related Posts Scripts and Styles End—>
|
3. Now to put related posts below the post find the line of code below.
|
1
|
<b:includable id=‘postQuickEdit’ var=‘post’>
|
4. Once gotten, click the just above arrow at the left side and paste the below HTML code above /b:includable> tag.
|
1
2
3
4
5
6
7
8
9
10
|
<!—TechBlogNG.Net Related Posts without Thumbnails Code Start—>
<b:if cond=‘data:blog.pageType == "item"’>
<div id=‘related-posts’>
<font face=‘Arial’ size=‘5’><b>You May Also Like: </b></font><font color=‘#FFFFFF’><b:loop values=‘data:post.labels’ var=‘label’><data:label.name/><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=5"’ type=‘text/javascript’/></b:if></b:loop> </font>
<script type=‘text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!— TechBlogNG.Net Related Posts without Thumbnails Code End—>
|
5. Save the theme and you are done.
How to Customize the Related Posts Widget for Blogger Blogs
– To change the heading text size ‘You May Also Like’. Change the 5 in ‘Arial’ size=’5′ to get required size of your heading.
– To change the text “You May Also Like” to something else just replace the text to what you want.
– To change number of related posts to show, change the max-results=5 in the second code to any number of your choice e.g. to change it to 10 you will now have max-results=10 instead of max-results=5
Now visit your blog from a computer to see related post widget without thumbnail below every blog post.
The widget is based on ‘labels’, so try to labels correctly before publishing the post.
