Actually I had long enough to discuss about how to make a related posts widgets in blogger because of it's very useful function.
According to the name -
related post - this widget provides information to visitors who are reading our articles that there are other articles that discuss the similar or related topic that maybe they will be interested with. The main goal is to make our guess visiting times become longer, this means making our blogs become more populair and for those who put some ad on their site / blog, it will give more chance that the ad will get attention from the visitors.
After a long search from internet about how to make it, I found quite a lot of tutorial on "blogger related posts". Almost all of them use external JavaScript, some working and some did not. Most of Not Working related posts widget because of it's server and the other because of it's wrong Script, it seems to be a little miss code when posting the article. ( please read
How To Posting Source Code in Blogger Post / Articles ).
Both long and/or short script related post widget that we find in the "blogger related post widget" Tutor, actually consist of two major parts. JavaScript Codes that serves to showing related post itself, and HTML / CSS Codes that used to set the display of related post.
In this article I will not discuss about setting the display of related post widget, because we can find a lot of ways out there even displaying the related post with it's screenshot link.
As I ever mention in
How To Make Recent Comment II. The use of external JavaScript (File JS stored on outside server) can speed up our web pages loading times. The problem is we often can not see directly the contents of those Java Script, because the server restrictions or by the owners file setting. This will lead us to fear of the presence of malicious script inside those "invisible" JavaScript.
So in accordance with the title
Blogger Related Post - The Naked Script, I will give a Related Post JavaScript -Naked- So you do not feel worry anymore cause you can see it's contents.
//<![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>');
document.write('<a rel="dofollow" href="http://doit2us.blogspot.com">Learn How To Make This Related Posts Widget [?]</a></font>');
}
//]]>
We can simply created Related Post Widget by putting
this JS directly inside our HTML template codes...
Go to your Dashboard >> Layout >> Edit HTML and check Expand Widget Templates.
Find
this codes
]]></b:skin>
</head>
and Put
this simple display setting Script between it,
<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 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGqvqR-bDh_nAOgr_pFA0bn85UUYp3T9Du4ap4fhObKxsZmLFCY0zatV3dnat2H0ZW_Y_bPZFBaqo_h-c6NQmZgvXfqPaeanBSh5mG5N4dByRpxZAeh85I19alDbwqJtoe-uOU5BQ0Azk/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style>
Next put the JavaScript right after (below) it. So the final Script will look like :
]]></b:skin>
The Display Setting Script
Related Post JavaScript
</head>
Next search for
<data:'post.body/>. In some templates this code may look like:
<div class='post-body>
Add this
folowing script just below
<data:'post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </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>
After finished all, Save Your Template and click
View Blog.. there you go.. You have new related post widget in your blog.
Note :
- To make this related post widget works.. then you must have more than one article with the same label/tag/catagories.
- This related post widget not work in your main page (home).
We will discuss more about this related post widget setting in the next artikel.
