Cara Membuat Widget Random Post Warna Warni dengan Counter di Blog

Setelah sebelumnya saya memberikan cara membuat widget random post dengan thumbnail di blog & Widget Artikel Pilihan, kali ini saya akan membagikan widget yang sama tetapi dengan tampilan yang berbeda yaitu widget random post warna-warni.

(Baca juga : Cara Membuat Widget Random Post dengan Thumbnail di Blogger)

Widget random post ini berguna untuk menampilkan artikel di widget secara random, sehingga memudahkan pengunjung melihat artikel kita yang berbeda. Tidak hanya warna-warni, widget ini juga memiliki fitur counter atau tampilan nomor pada widget.

Widget random post ini sangat cocok di gunakan bagi sobat yang memiliki blog dengan niche campuran, karena bentuk artikel sobat yang bermacam-macam. Bagi sobat yang ingin memasang widget random post ini silahkan ikuti langkah-langkah dari saya berikut ini.

(Baca juga : Cara Membuat Widget Recent Post Multi Color Keren di Blogger)

Cara Memasang Widget Random Post Warna-Warni dengan Counter di Blog

• Langkah pertama masuk ke akun Blogger sobat
• Pilih menu Tata Letak, pilih lokasi yang sobat inginkan, Tambahkan Gadget, pilih HTML/JavaScript
• Masukan Judul widget, kemudian masukan kode di bawah ini tepat di kolom Konten

<style type="text/css">
.noop-random-posts ul li {
    list-style-image:none;
}.noop-random-posts ul {
list-style-type: none;
margin-top: -20px;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 0px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #e20403;
}
.noop-random-posts ul li:first-child:after {
content: "1";
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #ff8b00;
}
.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 #feed01;
}
.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 #8fa900;
}
.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 #008024;
}
.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 #428aff;
}
.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 #740585;
}
.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 #e20403;
}
.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 #ff8b00;
}
.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 + li + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #feed01;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li + li:after {
content: "10";
}

.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, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li + li:after {
position: absolute; */
    background: none repeat scroll 0 0 #000;
    font-family: arial, sans-serif !important;
    background-color: #000;
    font-size: 12px;
    font-weight: bold !important;
    display: block;
    position: absolute;
    top: -5px;
    right: -14px;
    border-radius: 16px;
    color: #ffffff !important;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    padding-right: 0px !important;
    border: 2px solid #fff;
}
.noop-random-posts ul li a {
    font-size: 13px;
    font-weight: bold;
    color: #000 !important;
    text-decoration: none;
    margin-right: 14px;
}
</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();
    var l=0;
    var flag;
    var numofpost=10;
    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="https://www.tutorialumum.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>

• Pengaturan :
• Silahkan ubah warnanya sesuai keinginan sobat.
• Silahkan ganti angka 10 dengan jumlah artikel yang ingin sobat tampilkan.
• Setelah selesai mengatur pilih Simpan
• Jika berhasil maka tampilannya akan seperti ini.
  

(Baca juga : Cara Mudah Membuat Widget Artikel Pilihan Di Blog)

Demikian tutorial singkat dari saya mengenai cara membuat widget recent post warna-warni dengan counter di blog. Jika ada pertanyaan mengenai cara memasang atau mengenai widget recent post ini, silahkan masukan ke dalam komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk Tutorial yang lainnya mengenai widget ataupun tutorial blog dari saya, silahkan tetap kunjungi blog Tutorial Umum.

Share this