02 August 2017

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.
Cara Membuat Widget Random Post Warna Warni dengan Counter di Blog

(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.
    Cara Memasang Widget Random Post di Blog
(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.

29 comments

Kirain perlu download template ternyata dicutom bisa juga ya, makasih gan

tambahkan gadget doang ya. ane pikir di edit html gitu, kan ribet. ternyata praktis. dicoba dulu ya

yup
terima kasih sudah berkunjung :)

warna widgetnya seperti pelangi :D

makasih gan tutorial nya banyak banget variasi warna nya gan hehe

untuk mempercantik tampilan blog
ijin bookmark dulu

teryata mudah jugaa yaa wah

Mirip Evomagz Warna-warni (Y) Nice

Keren gan :D thanks tutorialnya

cocok sekali bisa nambah pengalaman baru sip buat artikelnya

memang sengaja di buat seperti pelangi
terimakasih sudah berkunjung :)

kalo evo magz popular post
kalo ini random post gan :)

wah bagus nih, buat rame2in warna di blog , makasih kang

Makasih banyak scriptnya gan

Apakah di WordPress bisa gan?

Nah ini yang saya cari selama ini

Izin copy script mau diterapin

Woh mantep gan, keren banget dah

sama-sama kang
terima kasih sudah mau berkunjung di blog saya

kenapa ya habis kasih script random post edit html ane jadi lelet..

Tanks info buat masukan blog juga ni

keren gan lumayan nih buat di terapi di blog saya

Om bikinin tutorial untuk memasukan kode html di dalam postingan supaya bisa terbaca seperti tulisan biasa tanpa harus parse kodenya terlebih dahulu dong om.

iya itu kekurangan dari random post gan, rata2 random post memang error pas di edit htmlnya

masukin kode html tanpa harus di parse?

ya tinggal masukin aja di entri baru

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon