Cara membuat popular post keren warna-warni dengan CSS di blog

Cara membuat popular post keren warna-warni dengan CSS di blog - Widget popular post atau yang biasa di sebut entri populer ini sering kali dipasang disetiap situs atau blog,karena memang wiget popular post ini adalah salah satu widget paling penting yang wajib di pasang di setiap situs atau blog yang ingin menampilkan entri atau postingan mereka yang paling populer dan paling banyak di kunjungi dalam kurun waktu tertentu.Dengan menggunakan widget populer post juga dapat membantu kita dalam meningkatkan trafik blog karena dengan adanya populer post atau entri populer dapat membuat pengunjung penasaran untuk melakukan klik terhadap postingan blog kita karena rasa penasaran mereka yang sangat kuat.Jadi usahakan untuk bisa membuat judul postingan yang berkualitas untuk menarik perhatian para pengunjung untuk klik artikel tersebut,jadi antara popular post dan judul postingan yang menarik itu sangat berdampingan bahkan tidak bisa dipisahkan antara satu dengan yang lainnya.

Selain widget popular post yang keren alat navigasi lainnya yang sangat di butuhkan dalam sebuah struktur blog adalah seperti menu bar yang responsive dan Related post yang responsive juga.Jadi tunggu apalagi segeralah pasang idget penting ini di blog anda karena dapat meningkatkan daya trafik klik pengunjung di blog anda.Untuk kali ini saya hanya akan membahas tentang cara membuat widget popular post atau entri populer dengan CSS di blog dan berikut tutorialnya.

Cara Membuat Popular Post Keren Di Blog

1. Silahkan anda masuk dan login ke blogger anda kemudian masuk pada menu Template > Edit HTML dan cari kode ]]></b:skin> atau jika tidak ada maka cari kode </style>.Kemudian anda copy script di bawah ini dan pastekan tepat di atas salah satu kode itu.

/* CSS Popular Post */
.PopularPosts{ color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0; padding}
.popular-posts{line-height:1.6; font-size:100%; border-radius:0; color:#fff}
.popular-posts a{color:#fff}
.popular-posts a:hover{color:#fff}
.PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-reset:popcount}
.popular-posts ul li:before{list-style-type:none;margin-top:10px;margin-right:15px;margin-left:5px; padding:0.3em 0.8em; counter-increment:popcount; content:counter(popcount); font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff;border-radius:100%}
.PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px; display:block; clear:both; overflow:hidden; list-style:none; font:13.5px/140%;border-bottom:none}
.PopularPosts li:hover{background:#0FB9BB}
.PopularPosts li a{text-decoration:none}
#PopularPosts1 .widget-content{padding:0px 0 0 17px; margin-bottom:-2px}
  .PopularPosts ul li{padding:3px 7px;border:none}
.PopularPosts ul li:nth-child(1){background-color:#F48067;margin-right:0}
.PopularPosts ul li:nth-child(2){background-color:#2ba6e1;margin-right:0}
.PopularPosts ul li:nth-child(3){background-color:#718397;margin-right:0}
.PopularPosts ul li:nth-child(4){background-color:#11b7b5;margin-right:0}
.PopularPosts ul li:nth-child(5){background-color:#d9ba71;margin-right:0}
.PopularPosts ul li:nth-child(6){background-color:#d9ba71;margin-right:0}
.PopularPosts ul li:nth-child(7){background-color:#2ba6e1;margin-right:0}
.PopularPosts ul li:nth-child(8){background-color:#718397;margin-right:0}
.PopularPosts ul li:nth-child(9){background-color:#11b7b5;margin-right:0}
.PopularPosts ul li:nth-child(10){background-color:#d9ba71;margin-right:0}

2. Silahkan anda save template blog anda tapi ingat sebelum melakukan ini anda harus back up template blog anda dulu untuk menghindari EROR nantinya.

Baiklah sekarang widget popular post warna-warni telah terpasang dengan rapi di blog anda,tapi sebelumnya perlu anda ketahui jika widget popular postnya tidak muncul maka silahkan anda masuk dulu ke menu Tata Letak > Add Widget/Tambah Widget > Kemudian cari popular post atau entri populer dan klik tanda + dan Save.Semoga artikel saya tentang cara membuat widget popular post keren warn-warni dengan CSS di blog ini bisa bermanfaat untuk anda dan bisa membantu anda.

Share this :