Cara Pasang Widget Random Post Warna Warni

Kali ini ChekMad akan berbagi bagaimana membuat/memasang widget Random Post yang berwarna-warni atau istilah kerennya Multi Colour.

Widget Random Post yang akan kita buat ini ChekMad temukan dari Bloggnya Net OOPS, dan karena menurut ChekMad ini menarik maka Chekmad coba dan Posting cara memasangnya di sini.

Sebelum Memulai Silahkan Sobat Paste dulu kode yang akan kita gunakan, dan bi bagian bawah akan ChekMad tuliskan petunjuk untuk memasang kode tersebut.

<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: 90%; }
.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: 90%;}
.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: 90%;}
.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: 90%; }
.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: 90%; }
.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: 90%; }
.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: 90%; }
.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: 90%; }
.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: 90%; }
.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://chekmad.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>

Berikut cara untuk memasang Random Post Article :

1. Masuk ke Blogger ini yang paling utama dan penting
2. Pilih TATA LETAK  > Buat Widget Baru / Add Widget / HTML/Javascript 
3. Masukan kode yang kita copy diatas tadi kedalam HTML/Javascript
4. Silahkan Simpan dan Lihat Hasilnya.