Cara Membuat Popular Post Keren Seperti Blog Nagalogia

Cara Membuat Popular Post Keren Seperti Blog Nagalogia


Cara Membuat Popular Post Keren Seperti Blog Nagalogia - Popular post adalah widget yang terdapat pada blog, setiap blog memiliki fitur popular post nya tersendiri, fungsinya cukup sederhana, dengan popular post para pengunjung bisa mengetahui postingan apa saja yang sedang populer pada sebuah blog. Keuntungan memakai popular post adalah bisa menambah page view dikarenakan setiap postingan yang cukup populer dapat menarik perhatian visitor sehingga dapat membuat visitor berlama-lama di blog kamu.

Dalam postingan ini saya ingin memberikan tutorial membuat popular post keren seperti blog ini, sebenarnya popular post ini terinspirasi dari web detikcom dan saya modifikasi sedikit. Berikut adalah penampakannya.
Cara Membuat Popular Post Keren Seperti Blog Nagalogia

1. Oke. Pertama-tama kamu buka dashboard blogger masing-masing, selanjutnya ke Tema Edit HTML.

2. Lalu, tekan CTRL+F untuk mencari kode ]]></b:skin>, setelah ketemu silahkan kopi kode di bawah ini lalu pasti di atas kode ]]></b:skin> yang sudah kamu cari tadi.

/*Widget Popular Post nagalogia.blogspot.com */
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:72px;display:block;transition:all .3s ease-in-out}#PopularPosts1 ul li{padding:8px 0 4px!important;margin:0;list-style:none;border-bottom:1px solid #fff;font-size:12px;line-height:normal}#PopularPosts1 ul li:first-child{border-top:none}#PopularPosts1 ul li:last-child{border-bottom:none}#PopularPosts1 a:link,#PopularPosts1 a:visited,#PopularPosts1 a:active{font-size:15px;color:#272727!important;display:block;font-weight:500;padding:0!important;margin-left:45px;line-height:1.2em}#PopularPosts1 a:hover{color:#B80103!important;text-decoration:none}.PopularPosts h2{padding-right:.4em;padding-left:1em}.popular-posts ul{padding-left:0;counter-reset:trackit}.popular-posts ul li{border-bottom:1px solid #fff;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all 0.25s linear 0s;counter-increment:trackit}.PopularPosts ul li:before{content:counters(trackit,".");padding:5px 12px 15px 10px;font-size:18px;font-style:italic;font-weight:700;color:#fff;float:left;margin-right:10px;width:13px;height:13px;border-radius:100%;background:linear-gradient(90deg,#1e88e5 0%,#5e35b1 75%,#3949ab 100%);-webkit-linear-gradient(90deg,#1e88e5 0%,#5e35b1 75%,#3949ab 100%)-moz-linear-gradient(90deg,#1e88e5 0%,#5e35b1 75%,#3949ab 100%);display:block}.PopularPosts li:first-child{border-top:1px solid #fff}.PopularPosts li:nth-child(odd){background:#fff}.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}.PopularPosts a:link,.PopularPosts a:visited{color:#2b2b2b;font-size:.9rem}.PopularPosts a:hover{color:#c00}#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}
3. Langkah terakhir, simpan template sobat.
4. Selanjutnya masuk ke Tata Letak, setelah itu tambah widget popular post, thumbnail gambar dan cuplikan jangan dicentang, lihat gambar di bawah, selanjutnya simpan, maka lihat hasilnya.

Cara Membuat Popular Post Keren Seperti Blog Nagalogia
Konfigurasi Popular Post
5. Ohya, kode CSS untuk popular post yang lama silahkan dihapus.

Yah, itulah sedikit tutorial Cara Membuat Popular Post Keren Seperti Blog Nagalogia, semoga bermanfaat, jika ingin bertanya silahkan berkomentar.
Selanjutnya
« Sebelumnya
Sebelumnya
Selanjutnya »
Silakan pilih sistem komentar Anda ⇛   

2 Komentar di "Cara Membuat Popular Post Keren Seperti Blog Nagalogia"

Kalau boleh tau, cara mengganti backgroundnya gimana gan?
saya pinginnya background warna teal bukan putih, trims.

Cari kode #PopularPosts1 ul li lalu tambahkan background:teal jadinya nanti gini #PopularPosts1 ul li {css lain;background:teal} setelah itu ganti juga warna link nya di #PopularPosts1 a:link,#PopularPosts1 a:visited,#PopularPosts1 a:active yg awalnya #272727 jadi #fff.

Berkomentarlah dengan bijak dan relevan, hindari hal-hal negatif seperti sara, rasis, atau membagikan url pornografi/malware.

Emoticon

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel