Cara Membuat Widget Popular Post Simpel Keren Tanpa Gambar

Widget artikel populer memang cukup penting keberadaannya. Selain mempercantik tampilan blog, widget ini juga berfungsi untuk kelengkapan navigasi blog dan memberi tahu pengunjung akan postingan-postingan favorit pembaca di blog tersebut. Widget ini biasanya diletakkan di bagian sidebar blog agar lebih mudah terlihat oleh pengunjung. Langsung saja, berikut ini kita akan coba belajar memodifikasi tampilan widget popular post simpel keren di blog. 

Memasang Widget Artikel Populer di Blogger

1. Buka akun blogger anda. 

2. Pilih menu layout (tata letak) dan klik tambahkan gadget untuk memasang widgetnya. 

3. Pilih widget Entri Populer atau Popular Post, kemudian silahkan atur seperti berikut ini:Bagi blogger yang ingin loading blognya terasa ringan dan cepat, ada banyak cara yang bisa dicoba. Salah satunya yaitu mendesain templatenya seminimalis mungkin sehingga beban loading blog lebih ringan dan lebih cepat saat diakses. Selain itu, mengurangi jumlah gambar juga dinilai cukup ampuh untuk membuat blog anda semakin ringan. Oleh karenanya, tidak heran jika kini banyak dijumpai template blog yang tidak menyertakan gambar pada tampilan muka beranda (home) nya.

Jika desain template blog anda kebetulan seperti itu, maka tampilan widget yang hendak anda tambahkan juga mesti disesuaikan agar tetap sesuai pakem yang ingin anda anut. Salah satu widget yang sering dipasang di blog yaitu widget artikel populer, bagaimana membuat widget popular post simpel tanpa gambar tapi tetap keren dan menarik?. Pada postingan kali ini, saya akan coba berbagi cara membuat/ memodifikasi widget popular post agar tetap keren meski tanpa gambar. Tampilan widgetnya akan seperti di bawah ini:

popular post simpel keren

Widget artikel populer memang cukup penting keberadaannya. Selain mempercantik tampilan blog, widget ini juga berfungsi untuk kelengkapan navigasi blog dan memberi tahu pengunjung akan postingan-postingan favorit pembaca di blog tersebut. Widget ini biasanya diletakkan di bagian sidebar blog agar lebih mudah terlihat oleh pengunjung. Langsung saja, berikut ini kita akan coba belajar memodifikasi tampilan widget popular post simpel keren di blog. 

Memasang Widget Artikel Populer di Blogger

1. Buka akun blogger anda. 

2. Pilih menu layout (tata letak) dan klik tambahkan gadget untuk memasang widgetnya. 

3. Pilih widget Entri Populer atau Popular Post, kemudian silahkan atur seperti berikut ini:
setting widget
Keterangan:
  • Title: silahkan anda isikan dengan Artikel Populer, Popular Post, atau semacamnya. 
  • Most Viewed: silahkan pilih sesuai jangka waktu yang anda inginkan. 
  • Show: kotak dikosongkan saja, untuk display pilih sesuai jumlah judul artikel yang anda kehendaki. 
4. Silahkan simpan. 

Modifikasi Tampilan Widget Popular Post Agar Lebih Keren

Setelah widget popular post terpasang, langkah selanjutnya yaitu tinggal memodifikasinya agar terlihat keren seperti tampilan pada gambar ilustrasi di atas.

1. Pada dashboard blogger, pilih menu tema dan klik edit html. 

2. Cari kode ]]></b:skin> atau kode </style> kemudian letakkan kode berikut ini di atasnya.

/* Popular Post */ #PopularPosts1 ul{list-style-type:none;margin:0;padding: 0} #PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display: block;transition:all .3s ease-in-out} #PopularPosts1 ul li {padding:8px 0 11px !important;margin:0; list-style: none; border-bottom: 1px solid #e9e9e9;font-size:11px;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:13px; color: #016FBA !important;  display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.4em} #PopularPosts1 a:hover {color:#c00 !important;  text-decoration: none;} .PopularPosts h2 {padding:10px;margin:-15px 0 0 0;background:#222;color:#ff9;} .popular-posts ul{padding-left:0;counter-reset:trackit} .popular-posts ul li{border-bottom:1px solid #f0f0f0;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all .25s linear 0;counter-increment:trackit} .PopularPosts ul li:before{content:counters(trackit, “.”);padding:0 .1em 0 10px;font-size:20px;font-weight:700;color:#F66;float:left;margin-right:10px} .PopularPosts li:first-child{border-top:1px solid #f0f0f0} .PopularPosts li:nth-child(odd){background:#f5f5f5} .PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important} .PopularPosts a,.PopularPosts a:hover{color:#959595;font-size:.9rem} #PopularPosts1 li{padding-right:1em!important;padding-left:1em!important} .widget.PopularPosts{padding:1.2em 0 0!important;background:#fafafc}
3. Simpan kembali template anda dan lihat hasilnya.
Sebagai tambahan, untuk tampilan judul widget biasanya akan bentrok dengan bawaan template anda. Silahkan edit dan sesuaikan settingannya pada kode yang diberi warna merah di atas. Atau kalau ingin agar tampilan judul widgetnya sesuai bawaan template blog anda, silahkan hapus saja kode untuk judul widget tersebut. Semoga bermanfaat.

Artikel Terkait