Multi Colored Random Posts Widget For Blogger

Do you like this story?

Random Posts widget is an awesome widget for your Blogger Blog.We posted about How to add random posts widget, Most important feature of this widget is it lets your Blog visitors to surf more blog posts in your blog.Its let your users to spend more time in your Blog. Surely it increases your Blog's internal links that lets your blog higher traffic.This is the modified version of the Random posts widget we posted earlier, one of our visitor "Yogesh Gamer" asked me to make this widget like Multi colored Popular posts Widget. So after that I just tried and it got success. Please do check this widget and comment your suggestions...

Features of This Widget

•  Flat UI colors used (it will attract users attention)
• Automatic Post Numbering
• Sign In to Blogger Dashboard
• Go to Layout
• Click on Add Gadget and look for HTML/Javascript and select it
• Copy the below code inside it and click save

<style type="text/css">
.Rex-random-posts ul li {
    list-style-image:none;
}.Rex-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.Rex-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.Rex-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 97%;
}
.Rex-random-posts ul li:first-child:after {
content: "1";
}
.Rex-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
.Rex-random-posts ul li:first-child + li:after {
content: "2";
}
.Rex-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.Rex-random-posts ul li:first-child + li + li:after {
content: "3";
}
.Rex-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.Rex-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.Rex-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.Rex-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.Rex-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.Rex-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.Rex-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
.Rex-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.Rex-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
.Rex-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.Rex-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.Rex-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.Rex-random-posts ul li:first-child:after, .Rex-random-posts ul li:first-child + li:after, .Rex-random-posts ul li:first-child + li + li:after, .Rex-random-posts ul li:first-child + li + li + li:after, .Rex-random-posts ul li:first-child + li + li + li + li:after, .Rex-random-posts ul li:first-child + li + li + li + li + li:after, .Rex-random-posts ul li:first-child + li + li + li + li + li + li:after, .Rex-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .Rex-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.Rex-random-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}
</style>
<div class="Rex-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=5;function Rexrandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script><a href="http://rexhacker.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts"></script></div>