Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot

Tutorial Go Blog

Cara Membuat Popular Post Warna-Warni - Kali ini pembahasan dari Tutorial Go Blog tentang popular post di blog. Widget popular post atau widget entri populer ini sangat berpengaruh besar pada sebuah website/blog yang sedang di kelola. Jadi, jika anda sebagai blogger pemula maupun kolotan yang masih belum memasang widget popular post di blog, alangkah baiknya anda segera membuatnya agar tampilan blog semakin menarik perhatian pengunjung.

Cara membuat popular post di blog itu bagaimana..?? Mudah kok, dan anda tidak akan mengalami kesusahan dalam membuat widget popular post tersebut. Tapi, tinggal bagaimana anda memilih model atau jenis macam apa yang ingin anda tampilkan widget popular post di blog anda.

Model pembuatan widget popular post itu apa saja sih..?? Lumayan banyak, namun saya sebutkan yang inti-intinya saja ya, misalnya ada yang membuat popular post sederhana, cara membuat popular post bergerak, ada juga cara membuat popular post slide dan yang akan dibahas oleh Tutorial Go Blog ialah cara membuat popular post warna-warni di blog.

Baiklah, sebelum itu anda harus copy terlebih dahulu kode yang ada di bawah ini.Toh juga nanti kode tersebut akan anda paste-kan di salah satu element pada dashboard blog anda.

/* Popular Post */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:normal;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
display:block;
position:absolute;
background-color:#333;
color:#fff !important;
width:22px;
height:22px;
line-height:22px;
text-align:center;
top:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed
}
.widget-content ul li:last-child{border-bottom:medium none !important
}
.widget-content ul li a{color:#333
}
.widget-content ul li a:hover{color:#C80441
}
.item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00
}

Catatan :

1. Warna merah adalah kode warna.
2. Warna biru adalah urutan warna/postingan.

Cara Menambahkan Widget Popular Post di Blog

1. Buka browser. Masuk ke alamat blogger.com, kemudian login dan masukkan email serta kata sandi blog anda.

Gambar 1

2. Masuk ke dashboard blogger, lalu pilih menu element "Tata Letak".

Gambar 2

3. Kemudian langsung anda tekan element "Tambahkan Gadget" atau "Add Gadget" dari sisi mana saja. Tapi disarankan, ambil sisi kanan depan layar anda.

Gambar 3

4. Carilah menu gadget yang yang bertuliskan "Entri Popular" atau "Popular Post". Kemudian anda setting dan setelah itu "Simpan".

Gambar 4

Nah, jika anda sudah selesai menambahkan widget popular post di blog, kini saatnya anda untuk melakukan langkah berikutnya agar popular post yang anda buat bisa menjadi warna-warni.

Cara Membuat Popular Post Warna-Warni

1. Anda masuk ke element/editor "Template". Kemudian, anda masuk dan tekan ke elemen/editor "Edit HTML".

Gambar 1

2.. Klik sembarang, kemudian tekan CTRL+F. Setelah itu, cari kode </style> atau ]]></b:skin>. Kenapa saya suruh tekan ctrl+f, karena supaya lebih mudah untuk mencari kode yang saya sebutkan tersebut.

Gambar 2

3. Selanjutnya, anda paste-kan kode css yang telah anda copy sebelumnya, lalu letakkan di atas kode </style> atau ]]></b:skin>. Setelah itu anda "Simpan".

Gambar 3

Seperti itulah kira-kira Cara Membuat Popular Post Warna-Warni tersebut. Kini anda tinggal lihat hasilnya saja di blog/website. Jika tidak sesuai dengan gambar atau lainnya, anda bisa ulangi kembali atau cari cara lainnya. Terima kasih banyak...