Multi Colored Latest/Random Posts Widget For Blogger

Random Posts and Latest Post 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 Latest/Random Posts widget will attract your readers to click on this widget that will increase your page views and keep your readers engage with your awesome content. So now use Blogger Random Post and Blogger Latest Post to show your posts in coloured style. Check out the live DEMO and give it a try.

Features:

1.) JavaScript Added.
2.) No JQuery File Added.
3.) Stylish CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.
6.) Work With Any Blogger Domain.
7.) Can See The Post Title and Post Thumbnails.
8.) Plain In Design.
9.) Fully Customizable With Your Design.
10.) Can Control Everything.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Layout”.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now “Copy” The Below Code And “Paste” It To There.
8.) Leave The “Title” Empty.
9.) Click “Save”, Now You Are Done.

CSS:

<style type="text/css">
.coloured_randomPosts ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.coloured_randomPosts ul li {
list-style-image:none;
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
height: 72px;
}
.coloured_randomPosts ul li img{
float: left;
margin-right: 5px;
}
.coloured_randomPosts ul li h2{
font-weight: normal;
margin: 0;
padding: 0;
}
.coloured_randomPosts ul li:nth-child(1) {
background: none repeat scroll 0 0 #FF4C54;
width: 97%;
}
.coloured_randomPosts ul li:nth-child(1):after {
content: "1";
}
.coloured_randomPosts ul li:nth-child(2) {
background: none repeat scroll 0 0 #FF764C;
width: 94%;
}
.coloured_randomPosts ul li:nth-child(2):after {
content: "2";
}
.coloured_randomPosts ul li:nth-child(3) {
background: none repeat scroll 0 0 #FFDE4C;
width: 91%;
}
.coloured_randomPosts ul li:nth-child(3):after {
content: "3";
}
.coloured_randomPosts ul li:nth-child(4) {
background: none repeat scroll 0 0 #C7F25F;
width: 88%;
}
.coloured_randomPosts ul li:nth-child(4):after {
content: "4";
}
.coloured_randomPosts ul li:nth-child(5) {
background: none repeat scroll 0 0 #33C9F7;
width: 85%;
}
.coloured_randomPosts ul li:nth-child(5):after {
content: "5";
}
.coloured_randomPosts ul li:nth-child(6) {
background: none repeat scroll 0 0 #7EE3C7;
width: 82%;
}
.coloured_randomPosts ul li:nth-child(6):after {
content: "6";
}
.coloured_randomPosts ul li:nth-child(7) {
background: none repeat scroll 0 0 #F6993D;
width: 79%;
}
.coloured_randomPosts ul li:nth-child(7):after {
content: "7";
}
.coloured_randomPosts ul li:nth-child(8) {
background: none repeat scroll 0 0 #F59095;
width: 76%;
}
.coloured_randomPosts ul li:nth-child(8):after {
content: "8";
}
.coloured_randomPosts ul li:nth-child(9) {
background: none repeat scroll 0 0 #e0c9ff;
width: 73%;
}
.coloured_randomPosts ul li:nth-child(9):after {
content: "9";
}
.coloured_randomPosts ul li:nth-child(10) {
background: none repeat scroll 0 0 #85ecf7;
width: 70%;
}
.coloured_randomPosts ul li:nth-child(10):after {
content: "10";
}
.coloured_randomPosts ul li:nth-child(1):after, .coloured_randomPosts ul li:nth-child(2):after, .coloured_randomPosts ul li:nth-child(3):after, .coloured_randomPosts ul li:nth-child(4):after, .coloured_randomPosts ul li:nth-child(5):after, .coloured_randomPosts ul li:nth-child(6):after, .coloured_randomPosts ul li:nth-child(7):after, .coloured_randomPosts ul li:nth-child(8):after, .coloured_randomPosts ul li:nth-child(9):after, .coloured_randomPosts ul li:nth-child(10):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;
}
.coloured_randomPosts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}
</style>

HTML:

<div class="coloured_randomPosts">
<script style='text/javascript'>
//<![CDATA[
/*
Latest/Random Post With Title And Default Thumbnail 1.0
Copyright (c) 2013 EXEIdeas International.
*/
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul>');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i
}
if (random_posts == true) {
indexPosts.sort(function() {
return 0.5 - Math.random()
})
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal = entry_gal.title.$t;
for (var k = 0; k < entry_gal.link.length; k++) {
if (entry_gal.link[k].rel == 'alternate') {
posturl_gal = entry_gal.link[k].href;
break
}
}
if ("media$thumbnail" in entry_gal ) {
var thumburl_gal = entry_gal.media$thumbnail.url;
} else {
var thumburl_gal = "http://1.bp.blogspot.com/-xu9A84sL4cU/VIb3a0QiHcI/AAAAAAAADhQ/jfVw08hHADk/s72-c/thumbnail-img.png";
}
document.write('<li><a href="' + posturl_gal + '">');
document.write('<img src="' + thumburl_gal + '"/>');
document.write('<h2>' + posttitle_gal + '</h2>');
document.write('</a></li>')
}
document.write('</ul>')
}
//]]>
</script>
<script style='text/javascript'>
var random_posts = true;
var numposts_gal= 10;
</script>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=999999'></script>
</div>

Customization:

1.) Edit Your JavaScript Options As Per Your Requirements.
2.) Change `true` to `false` in var random_posts = true; to switch to Latest Posts.
3.) Control your posts count by changing `10` in var numposts_gal= 10; but keep it under or equal 10 because we have CSS only for max 10 post.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…