Mengubah Tampilan Postingan Terbaru di Template Wuzz Menjadi List

 

Hai teman-teman blogger! Hari ini saya punya tutorial seru nih buat kalian yang pakai template Wuzz dari Mas Sugeng. Kita akan belajar cara mengubah tampilan postingan terbaru pada template ini menjadi list yang keren saat dibuka di ponsel, seperti pada template LinkMagz.

Jadi, tampilan template Wuzz ini memang sudah modern banget dengan fitur-fitur lengkap. Secara bawaan, kalau dibuka di desktop, postingan terbaru tampil dalam bentuk kartu dengan 3 bagian, dan kalau di ponsel, dibagi jadi 2 kartu. Namun, ada yang kurang nyaman nih, terutama di mode ponsel yang terasa menyempit.

Maka dari itu, kita akan merubahnya agar tampilannya lebih mirip dengan LinkMagz, yaitu dalam bentuk list yang lebih nyaman dipandang di ponsel. Simak langkah-langkahnya ya:

1. Pertama-tama, buka dashboard blog.
2. Selanjutnya, klik menu Tata Letak.
3. Lalu, pilih Custom CSS.
4. Copy dan paste kode berikut ke dalam kotak Custom CSS:

   /*! Wuzz Posts List by Iskandar.blog */
   @media screen and (max-width:414px){
     .content-index .content{grid-template-columns: repeat(1, minmax(0, 1fr))}
     .content-index .post-container .post-thumbnail img{width:100%}
   }

1.  
2. Terakhir, jangan lupa klik Simpan.

Sekarang, cek hasilnya dengan membuka blog kamu di ponsel. Voila! Tampilan postingan terbaru di template Wuzz sudah berubah menjadi list seperti di LinkMagz. Seru kan?

Kode CSS tersebut akan membuat tampilan postingan terbaru pada template Wuzz menjadi list atau satu kolom saat dibuka pada perangkat gadget mulai dari resolusi layar 414pixel.

Selamat mencoba, dan kalau ada yang mau ditanyakan, langsung aja ya. Semoga berhasil dan happy blogging!

Go to Link