Membuat Popular Post Warna-warni Versi 2

Popular post adalah salah satu widget blogger yang bagi saya patut terpasang di website/blog. Hal ini dilakukan untuk mempermudah pengunjung melihat topic apa saja yang sering dikunjungi pada blog tersebut. Dengan demikian blog terlihat seo friendly.
Popular post versi 2

Walaupun artikel ini sudah usang, apa salahnya dibagikan lagi tentu dengan kreasi terbaru dan unik. Style popular post ini makin hidup dengan modifikasi urutan nomor pada pojok kanan setiap linknya. Ditambah script popular post yang saya bagikan ini telah di validasi CSS3 dan HTML5, sehinggal sangat cocok digunakan bagi blog yang menerapkan mobile friendly pada templatenya.

Baca artikel tentang mobile friendly



Bagi yang tertarik ingin memasang popular post warna-wrani versi 2 seperti yang terlihat pada screenshot di atas berikut caranya.
1. Kopi paste kode CSS dibawah ini
/* Popular Posts Versi 2 */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}.PopularPosts ul{list-style:none;font-family:Oswald,Sans-Serif;font-size:13px;color:#fff;margin:.5em 0}.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:70px;height:70px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2)}.PopularPosts ul li img:hover{border:4px solid rgba(0,0,0,0.5);transition:all 400ms ease-in-out}.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:300;font-size:13px;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;font-size:40px;font-weight:700;color:rgba(0,0,0,0.2);bottom:11px;right:9px;}.PopularPosts ul li:nth-child(1){background-color:#83a4b9;margin-right:0}.PopularPosts ul li:nth-child(2){background-color:#7fbfbb;margin-right:2%}.PopularPosts ul li:nth-child(3){background-color:#84be9a;margin-right:4%}.PopularPosts ul li:nth-child(4){background-color:#cacd73;margin-right:6%}.PopularPosts ul li:nth-child(5){background-color:#cd9089;margin-right:8%}

2. Buat pengaturan widget popular post seperti ini
pengaturan

Semoga artikel ini membantu dan membuat blog anda makin menarik.

2 komentar

  1. Profil:https://draft.blogger.com/profile/10543250374328906670
    Wuih muantap popular postnya, mau coba praktekkan dulu ah
    • Profil:https://draft.blogger.com/profile/13162875744493565460
      silahkan dipraktekan gan :D
  • Gunakan fitur Format Kode untuk menulis atau menyisipkan kode dan gambar dengan format tertentu.
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi via Email ketika ada balasan.
  • Apabila ada pertanyaan diluar artikel silahkan buat topik baru di .
  • Untuk menyisipkan gambar, silahkan upload gambar terlebih dahulu. Lalu salin URL Gambar tersebut, paste ke kolom di bawah ini, lalu klik tombol Image.
  • Untuk menyisipkan Potongan Kode, atau Quote, paste kode tersebut ke kolom di bawah ini, lalu klik tombol pre, code, atau quote.
  • Untuk menulis kode dalam Syntax Highlighter gunakan format kode panjang.
  • Setelah itu, salin atau copy hasil parse dengan klik tombol icon Salin Kode! lalu paste ke kolom komentar.

image quote pre code