Simple and Beautiful Related and Random Posts Widget for Blogger's Blog

For every bloggers the main problem in blogging is to make their visitors stay on their blog more and more. There are differnet methods that are widley used by bloggers to do so. Some of them are beautiful blog templates, easy navigations, low loading times, cross-browsers support, powerful and well structured articles and different widgets to give veiwers what they want at their finger tips.

Related posts widget is one of those techniques that are used by a large number of bloggers today to increase their visitors. Related posts are actually randomly selected posts with same tags and labels as the post is. Different related and random posts widgets are available in market with different visual styles. Use of these related post widgets can surely have a positive effect on one's blog.

The related posts widget shared below is a small size JavaScript widget with no links of any external files, therfore you don't have to worry about its loading time and 24 hour uptime. Features and Installation method with Codes are as follows:

Features

• Installation as easy as 123.
• CSS3 animations.
• Fully customizable.
• No Jquery only JavaScript.
• No Extrenal file linked.

Installation

1. Go to Dashboard > Template.
2. Click Edit HTML.
3. Search for </head>.
4. Copy paste the CSS code just before the </head>.
5. Search for id='post' var='post'.
6. Copy paste the HTML/JavaScript code just before </b:includable>.
7. Save Template and you are done.

CSS Code

<style type='text/css'>
#random-posts{
padding: 5px;
}
#random-posts li{
float: left;
list-style: none;
position: relative;
}
#random-posts li:last-child{
margin-right:0;
}
#random-posts li img{
width: 72px;
height: 72px;
padding: 6px;
}
#random-posts li img:hover{
background-color: #46a5b7;
}
#random-posts li .rp_animation{
position: absolute;
width: 250px;
top: -100px;
z-index: 2;
background-color: #fff;
padding: 5px;
border: 1px solid #ccc;
transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
visibility: hidden;
opacity: 0;
}
#random-posts li:last-child .rp_animation{
right: 0;
}
#random-posts li:hover .rp_animation{
top: 61px;
opacity:1;
visibility: visible;
}
.rp_animation span{
color: #333;
}
.rp_animation p{
font-size: 14px;
}
</style>

HTML/JavaScript Code

<b:if cond='data:blog.pageType == "item"'>
<ul id='random-posts'>
<h2>Random Posts...!!!</h2>
<script type='text/javaScript'>
//<![CDATA[
var rdp_numposts = 7; //Number Of Random Posts
var rdp_snippet_length = 110; //Length Of Description Text, 0 To Hide
var rdp_datecomment = 'no'; //Show Date And Comment 'yes/no'
var rdp_comment = 'Comments'; //Text For Comment Count
var rdp_disable = 'Comments Are Off Here...'; //Text If Comment Is Disabled On Post/Blog
var rdp_current = [];
var rdp_total_posts = 0;
var rdp_current = new Array(rdp_numposts);
function totalposts(a){
rdp_total_posts=a.feed.openSearch$totalResults.$t
}
document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"></script>');
function getvalue(){
for(var b=0; b<rdp_numposts; b++){
var d=false;
var c=get_random();
for(var a=0; a<rdp_current.length; a++){
if(rdp_current[a]==c){
d=true;break
}
}
if(d){
b--
}
else{
rdp_current[b]=c
}
}
}
function get_random(){
var a=1+Math.round(Math.random()*(rdp_total_posts-1));
return a
};
//]]>
</script>
<script type='text/javaScript'>
//<![CDATA[
function random_posts(n){
a=location.href;
y=a.indexOf("?m=0");
for(var f=0; f<rdp_numposts; f++){
var l=n.feed.entry[f];
var m=l.title.$t;
if("content" in l){
var o=l.content.$t
}
else{
if("summary" in l){
var o=l.summary.$t
}
else{
var o=""
}
}
o=o.replace(/<[^>]*>/g,"");
if(o.length < rdp_snippet_length){
var k=o
}
else{
o=o.substring(0,rdp_snippet_length);
var b=o.lastIndexOf(" ");
k=o.substring(0,b)+"…"}
for(var e=0; e<l.link.length; e++){
if("thr$total" in l){
var h=l.thr$total.$t+" "+rdp_comment
}
else{
h=rdp_disable
}
if(l.link[e].rel=="alternate"){
var d=l.link[e].href;
if(y!=-1){
d=d+"?m=0"
}
var g=l.published.$t;
if("media$thumbnail" in l){
var c=l.media$thumbnail.url
}
else{
c="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0
/s400/noimage.png"
}
}
}
document.write("<li>");
document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');
document.write('<div class="rp_animation"><h4>'+m+"</h4>");
if(rdp_datecomment=="yes"){
document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")
}
document.write("<p>"+k+"</p></div>");
document.write('<div style="clear:both"></div></li>')
}
}
getvalue();
for(var i=0; i<rdp_numposts; i++){
document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=' + rdp_current[i] + '&max-results=1&callback=random_posts"></script>')
};
//]]>
</script>
</ul>
<div style='clear:both'/>
</b:if>

If you have any quries feel free to ask.