Many of my readers are asking help to add Related Posts Widget . I was confused because i have added all the code correctly then why my friends are not getting this hack working. So i looked the templates of all those who sent me error message . All their templates are of same structure ( labels line is appearing below post , see the screenshot below)
But the script i have included in the post is for those who have Label line below post title like this.
Bloggers with the above format are not getting this related posts hack because the script loads earlier than the Labels line. We can fix this error in Three methods.
Method One :
Login to your blogger account and navigate to Layout section of the blog. Then go to edit HTML page and check expand widgets box.
Now search this line : <div class=’post-header-line-1’/>
Now please copy and paste the code above that line.
<span class=’meta’>
<b:if cond=’data:post.labels’>
categories :
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><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=10"’ type=’text/javascript’/>
</b:if>
</b:loop>
</b:if>
<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′> 1 <data:top.commentLabel/> »<b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> »</b:if></a>
</b:if>
</span>
you can customize the text in red to display as many results you want.
Now add the below CSS code above ]]></b:skin>
.meta{float:left;width:480px;padding:3px; color:#111; font-size:12px; margin-bottom:8px; line-height:20px;border-bottom:1px dotted #cccccc;}
.meta a{color:#cc0000;}
.meta a:hover{color:#000000;}
.meta a{color:#cc0000;}
.meta a:hover{color:#000000;}
Please edit the text in red to suit your template.
After this you need to add the CSS code and javascript i provided in this post ” Related Posts Widget with custom CSS “.
Now add the script below this line <p><data:post.body/></p>
<b:if cond=’data:blog.pageType == “item”‘>
<div id=”related-posts”>
<h2>Other Recommended Posts</h2>
<script type=’text/javascript’>
removeRelatedDuplicates(); printRelatedLabels(); </script><div style=”display:none;”><a href=”http://www.techieblogger.com”>Techie Blogger</a></div>
</div></b:if>
<div id=”related-posts”>
<h2>Other Recommended Posts</h2>
<script type=’text/javascript’>
removeRelatedDuplicates(); printRelatedLabels(); </script><div style=”display:none;”><a href=”http://www.techieblogger.com”>Techie Blogger</a></div>
</div></b:if>
Thats it , now you will have related posts widget in your blog.
Method 2 :
If you follow step one then you will have two meta lines in your Blog. One below post title and one below post content. If you are happy with first method then stop or else do these steps to add related posts hack. ( don’t do both)
step 1 : First of all add the below code above </head>
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(“http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png”) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script type=’text/javascript’>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; 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(0);
var tmp2 = new Array(0);
for(var i = 0; 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 = 0; 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 = 0;
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 = 0;
}
i++;
}
document.write(‘</ul>’);
}
//]]>
</script>
step 2 :
Now search this text
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != "true"’>,</b:if>
</b:loop>
Now replace the above text with this code
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><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>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><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>
Now scroll down still you can find ending tag for either </div> or </span> . Now paste the following script below the ending div / span tag.
<b:if cond=’data:blog.pageType == “item”‘>
<div id=”related-posts”>
<h2>Other Recommended Posts</h2><script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>
<div id=”related-posts”>
<h2>Other Recommended Posts</h2><script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>
That’s it now you will have related Posts hack in your blog.
Third Method :
In my Blog I am using this method . It’s very simple. First do the step 1 from method 2 . ( adding script above </head> ) .
Now add the following tag below <p><data:post.body/></p> .
<b:if cond=’data:blog.pageType == “item”‘>
<div id=”related-posts”>
<h2>Other Recommended Posts on<div style=”display:none;”> <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></div> </h2> <script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>
<div id=”related-posts”>
<h2>Other Recommended Posts on<div style=”display:none;”> <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></div> </h2> <script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>
Now you will have related posts widget of my style.
I hope one of the above method will help you to add related posts widget to your Blog. Still if you have problem then please contact me through comments.
About the author /
Mohamed Rias
Popular
Editor’s Pick
-
April 16, 2010 35+ Breathtaking Digital Abstract Wallpapers
Digital abstracts represents the depiction of imagery in arts. Abstraction exists along a continuum. Even art that aims for verisimilitude of the highest degree can be said to be an abstract.
Artwork which takes liberties, altering the instance color and form in ways that are conspicuous, can be said to be digital abstracts.There is a wealth of potent, beautiful, digital art and fractal images on this collection, created by a vast array of inspired individuals. -
April 23, 2023 Mastering the Art of Timelapse Photography: Tips and Techniques
Timelapse photography is a technique that involves capturing a series of photos over a period of time and then combining them into a video sequence to create the illusion of time passing quickly. Mastering this art can add a unique dimension to your photography skills. The importance of mastering timelapse photography lies in the fact…
-
July 31, 2008 Page Navigation Menu Widget for Blogger
Yesterday I wrote How to add Page Navigation Menu hack by editing your blogger template. Now today I would like to use a different method to add this Page Navigation Menu to our Blogger Blog. Most Bloggers will prefer this method to add Page navigation Menu , because this method is very easy than editing…
-
April 7, 2023 10 Ways ChatGPT Can Boost Your Enterprise: From Customer Service to Personalized Learning
In today’s fast-paced business world, companies are constantly looking for innovative ways to improve efficiency, productivity, and customer satisfaction. One of the most promising tools for achieving these goals is ChatGPT, a powerful language model that can be integrated into a wide range of enterprise applications. From customer service to marketing, HR, and beyond, ChatGPT…
-
May 3, 2023 Mastering React Context API in 2023: Best Practices and Examples
React Context API is a feature in React that provides a way to share data between components without passing the props down manually at every level. It allows you to manage global states in your application and avoid prop drilling. Mastering React Context API in 2023 is essential for building scalable and efficient applications. It…
1 Comment
Hi,i just follow your 1 to 3 steps(without css).But my blog didn’t show up the effect after changing the code.
Could you help me with my problem?
Cheers
Tsai