Blogger Related Post I- The Naked Script
>> Tuesday, March 16, 2010
Actually I had long enough to discuss about how to make a related posts widgets in blogger because of it's very useful function.
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[We can simply created Related Post Widget by putting this JS directly inside our HTML template codes...
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>');
}
//]]>
Go to your Dashboard >> Layout >> Edit HTML and check Expand Widget Templates.
Find this codes
]]></b:skin>and Put this simple display setting Script between it,
</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 { 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>Next search for <data:'post.body/>. In some templates this code may look like:
The Display Setting Script
Related Post JavaScript
</head>
<div class='post-body>
Add this folowing script just below <data:'post.body/>
<b:if cond='data:blog.pageType == "item"'>After finished all, Save Your Template and click View Blog.. there you go.. You have new related post widget in your blog.
<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>
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.
34 comments:
Thanks for this.
Its a great help for webmasters!
http://www.highprofitpoint.com
good news!i love this blog!!!china wholesale electronics
I know a better way to show related posts in blogger.com blog. Though thanks for share this tips.
Hi there, I found your blog via Google while searching for first aid for a heart attack and your post looks very interesting for me.
how to display related posts link in source code? currently it only appear if we point the link on browser but in the source code it shows /feeds/post/default only.. is there a way?
Really you have post very nice post on java script good sound.
Amazing script you have shared with us. it is better among my visited article. thank you for sharing.
Is there a method on trying to use other feeds such as the feedburner instead of the default feeds of blogger?
hanks for publishing relating to this. There?s a mass of important tech data on the web. A person?ve got lots of that data here on your site. I?michael amazed ? I try to keep a few weblogs fairly on-going, however it?utes a struggle occasionally. A person?ve carried out a great job with this one. How can you get it done?
I appreciate it very much, at least I know from it someone is reading the contents I have here.
we can find a lot of ways out there even displaying the related post with it's screenshot link.
if we point the link on browser but in the source code it shows /feeds/post/default only.. is there a way.
Wow It is nice info. Great helpful for me. thanks a lot!
Both long or short script related post widget that we find in the "blogger related post widget". This article helps me a lot of the things that I want to know. It provides information that is really applicable in some other terms.
I am please to find this opportunity to read a worth reading information. Thanks and keep it up..
Knowing this info. is really worth it.
I am glad to see that your blog share valued information that can help to many readers.
i have done every thing what you said exactly... template saved well, no errors. . but still i can't see the related posts in my blog posts.. i am very worried please help me how to fix it.. i shall be very very very thankful. i have tried with other scripts to from other websites but same problem . . template saves well but nothing appears in my posts. please help
my blog is
http://adilclinic.blogspot.com
I was desperately looking for such relevant and nice blog and you blog looks nice enough to deserve the nice information for all. I will definitely come back for more cool postings...
That was a really good article, thanks for taking the time to put it together! You have managed to point out some very good points. I can't say that I completely agree about some points, but you certainly have a unique perspective. Anyway, I like your post.
I never had visited a rare blog like this. I am very glad to read an interesting article with lots of knowledge shared by the blogger. I will be looking forward to this blog for my future reference. Thanks for posting.
Interface Network
Its a pretty useful information. Thanks:)
I’ve been traveling to your site for some time today and i also always locate a treasure with your brand new content. Appreciate your expressing!
best 42 inch tv 2011
Pretty good post! I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon.
car battery reviews
All the posts are fully informative and having very good themes. I love to visit your blog again and again it’s really increase my knowledge. Thanks for the awesome post.
car battery reviews
I have gone through the article and found interesting information helped me in getting the best answer that I am looking for.
schwinn recumbent exercise bike
Thank you for this article. That's all I can say. You most definitely have made this blog into something special. You clearly know what you are doing; you've covered so many bases. Thanks!
The site was so nice, I found out about a lot of great things. I like the way you make your blog posts. Keep up the good work and may you gain success in the long run.
I recently discovered your own write-up and possess been reading through coupled. I would like to show our appreciation of one's producing talent along with capacity to create readers examine right away on the finish.
There are certainly a bunch of details like that to consider. That happens to be a fabulous point to raise. I supply the thoughts earlier as routine encouragement however plainly there are questions like the one you raise where the most important activity is going to be working in sincere good faith. I ensure that your task is plainly ascertained as a fair game.
Here is the finest submit with this subject That i've ever study. We are truly quite impressed with it. Maintain writing a blog!
I have recently looking for this kind of post because I wanted to know how to create new and good comments for blogs. Thanks for sharing this out!
In fact your creative writing ability has inspired me. Really the article is spreading its wings rapidly.
What you're saying is completely true. I know that everybody must say the same thing, but I just think that you put it in a way that everyone can understand. I'm sure you'll reach so many people with what you've got to say.
Post a Comment