Cara Membuat Widget Populer Pos Warna-Warni Dengan Angka

Cara Membuat Widget Populer Pos Warna-Warni Dengan Angka – Populer Pos adalah sebuah widget yang menampilkan artikel yang paling banyak di lihat oleh pengunjung di suatu situs blog atau website. Populer Pos adalah salah satu widget yang wajib sobat pasang di situs milik sobat. widget ini sangat berguna bagi pengunjung untuk mengetahui pos terbaik dari semua pos di sebuah blog sehingga pengunjung akan berminat untuk membacanya. Dengan tampilan warna-warni dengan angka yang keren akan lebih menarik dan meyakinkan minat pengunjung untuk membacanya.

Widget ini saya dapat dari blognya bungfrengki yang saya lihat sangat menarik untuk di bahas kembali di blog milik saya.widget Populer Pos ini sudah valid CSS 3 dan HTML 5 yang tidak akan memberatkan blog atau memberi beban sehingga dapat mengakibatkan loading menjadi lama. Bagi sobat yang tertarik untuk mencobanya atau tertaruk untuk mempelajari nya silahkan simak cara membuatnya berikut ini.

Baca juga : Cara Membuat Halaman Daftar Isi Menurut Label

1. buka Blog Sobat > masuk menu “Template” > Edit HTML > salin kode CSS di bawah ini dan letakkan di atas kode </style>

</style>

/* 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. simpan template. Sekarang kita akan membuat pengaturan widget Poppuler post di Tata Letak

buka Blog Sobat > masuk menu “ Tata Letak” > Tambah Widget baru  > Entri Populer.

3. terakhir simpan setelan dan lihat hasilnya. Saya yakin jika sobat mengikuti tutorial di atas dengan benar maka Populer pos warna dengan angka sudah tampil dengan sempurna.

Baca juga : Cara Mencari Gambar Berkualitas untuk Blog di pexels.com

Demikianlah tutorial mengenai Cara Membuat Widget Populer Pos Warna-Warni Dengan Angka, yang harus di ketahui. jika sobat ada masalah atau sudah berhasil jangan lupa untuk mengisi Kotak komentar di bawah ini. Semoga artikel ini dapat menjadi ilmu yang bermanfaat.

sumber : http://www.bungfrangki.com/2015/02/membuat-popular-post-warna-warmi-versi-2.html