Blog Tricks Center: Style your Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
Multi colored random posts Widget for Blogger </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik-1AEsocz0kE6rvmk6SLPyoBIHo92kXVoX4UCDtOKnxYB2duwZnpl6paR-aYd0Y_kncoIIDhw81k_xjRDAh3IVEap_5LRvYib5KjXarIf0vq6K87SaI8JkFEwC9Nf8FtZ1AYWIegfTGTz/s1600/1G0vbXl.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik-1AEsocz0kE6rvmk6SLPyoBIHo92kXVoX4UCDtOKnxYB2duwZnpl6paR-aYd0Y_kncoIIDhw81k_xjRDAh3IVEap_5LRvYib5KjXarIf0vq6K87SaI8JkFEwC9Nf8FtZ1AYWIegfTGTz/s1600/1G0vbXl.gif" width="351" /></a></div>
<div style="text-align: center;">
 </div>
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... 
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-format="auto" data-ad-slot="6504860932" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<div style="text-align: center;">
Features of This Widget</div>
<div style="text-align: center;">
 Flat UI colors used (it will attract users attention)</div>
<div style="text-align: center;">
Automatic Post Numbering</div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
Sign In to Blogger Dashboard</div>
<div style="text-align: center;">
Go to Layout</div>
<div style="text-align: center;">
Click on Add Gadget and look for HTML/Javascript and select it</div>
<div style="text-align: center;">
Copy the below code inside it and click save</div>
<div style="text-align: center;">
 </div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="6839278135" style="display: inline-block; height: 90px; width: 728px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<style type="text/css"> 
.noop-random-posts ul li { 
    list-style-image:none; 
}.noop-random-posts ul { 
list-style-type: none; 
margin: 0; 
padding: 5px 0; 
} 
.noop-random-posts ul li { 
border: 0 none; 
margin: 5px 0; 
padding: 10px; 
position: relative; 
} 
.noop-random-posts ul li:first-child { 
background: none repeat scroll 0 0 #FF4C54; 
width: 97%; 
} 
.noop-random-posts ul li:first-child:after { 
content: "1"; 
} 
.noop-random-posts ul li:first-child + li { 
background: none repeat scroll 0 0 #FF764C; 
width: 87%; 
} 
.noop-random-posts ul li:first-child + li:after { 
content: "2"; 
} 
.noop-random-posts ul li:first-child + li + li { 
background: none repeat scroll 0 0 #FFDE4C; 
width: 84%; 
} 
.noop-random-posts ul li:first-child + li + li:after { 
content: "3"; 
} 
.noop-random-posts ul li:first-child + li + li + li { 
background: none repeat scroll 0 0 #C7F25F; 
width: 81%; 
} 
.noop-random-posts ul li:first-child + li + li + li:after { 
content: "4"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li { 
background: none repeat scroll 0 0 #33C9F7; 
width: 78%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li:after { 
content: "5"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li { 
background: none repeat scroll 0 0 #7EE3C7; 
width: 75%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li:after { 
content: "6"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li { 
background: none repeat scroll 0 0 #F6993D; 
width: 72%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after { 
content: "7"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li { 
background: none repeat scroll 0 0 #F59095; 
width: 69%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after { 
content: "8"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li { 
background: none repeat scroll 0 0 #C7F25F; 
width: 66%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after { 
content: "9"; 
} 
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-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; 
} 
.noop-random-posts ul li a { 
color: #444444; 
font-size: 13px; 
text-decoration: none; 
} 
</style> 
<div class="noop-random-posts"><script type="text/javascript"> 
    var randarray = new Array();var l=0;var flag; 
    var numofpost=5;function nooprandomposts(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://netoopsblog.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=nooprandomposts"></script></div></div>

Multi colored random posts Widget for Blogger Random Posts widget is an awesome widget for your Blogger Blog.We posted about How to ...