Cara Mengubah Tampilan Homepage Blog List Menjadi Bentuk Grid

Santos el Salam

8 Desember 2020

Jika diperhatikan, tampilan halaman beranda (homepage) blog (versi desktop) masa kini kebanyakan menggunakan tampilan grid untuk daftar postingan, meski banyak juga yang masih menggunakan tampilan bentuk list. Para desainer template pun banyak juga yang mendesain tampilan blog pada daftar postingan homepage menjadi bentuk grid untuk menarik minat customernya.

Kalau anda tidak ingin ribet mengubah sendiri tampilan homepage list menjadi bentuk grid, mengganti template blog dengan template yang baru mungkin menjadi cara termudah untuk dilakukan. Namun bagi anda yang suka mengutak-atik tampilan blog, mengubahnya sendiri juga tidak masalah. Mungkin sayang jika harus ganti template baru padahal kinerja template lama anda sudah cukup baik. 

Nah, bagi anda yang kebetulan tampilan homepage listnya ingin diubah menjadi bentuk grid, pada postingan kali ini saya ingin berbagi caranya untuk anda. Memang masing-masing template blog berisi kode-kode yang berbeda. Namun jika homepage blog anda sudah diatur auto read more, insya Allah cara simpel ini berhasil diterapkan. Cara ini juga hanya menggunakan CSS semata sehingga tidak perlu mengutak-atik yang lain.

Sebagai contoh, saya ilustrasikan dengan tampilan salah satu blog saya yang memiliki tampilan halaman beranda bentuk list seperti di bawah ini:

Bagaimana cara mengubah tampilan bentuk list di atas menjadi bentuk grid?. Caranya cukup mudah, silahkan anda sesuaikan dengan tempate blog anda dan ikuti langkah-langkahnya berikut ini. 

Cara Mengubah List Style Homepage Menjadi Grid Style

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode </head> dan letakkan kode berikut ini di atasnya. 

<b:if cond='data:blog.pageType == &quot;index&quot;'> <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'> 

<style type='text/css'>

.post-outer{float:left;width:calc(50% - 2px);padding:10px}

.post{height:340px}

.post-thumbnail img {display:block;float:none;width:100%;height:180px;margin-bottom:10px;padding:0px 0} 

</style>

</b:if>

</b:if>

Kode CSS di atas menggunakan kalkulasi 50 persen untuk membuat tampilan postingan menjadi dua baris ke samping menyesuaikan lebar layar postingan. Anda juga bisa membuatnya menjadi tiga baris misalnya dengan mengubah kalkulasi menjadi 33%, tapi mungkin hasilnya akan kurang cocok. Namun tidak ada salahnya jika ingin anda coba. 

4. Simpan kembali template. 

Setelah berhasil diterapkan, silahkan lihat hasilnya. Untuk blog saya tadi, penerapan di atas akan membuat tampilannya menjadi seperti berikut ini:

Agar tampilannya lebih menarik, anda bisa tambahkan pengaturan lain contohnya untuk menambahkan background atau bingkai melengkung di masing-masing pojoknya. Untuk itu, anda bisa edit lagi kode CSS di atas misalnya menjadi seperti berikut ini:

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'> 

<style type='text/css'>

.post-outer{float:left;width:calc(50% - 2px);padding:10px}

.post{background:#f8f3cd;border:15px solid #f8f3cd;height:340px;border-radius:7px;margin-bottom:0px;}

.post-thumbnail img {display:block;float:none;width:100%;height:180px;border-radius:7px;margin-bottom:10px;padding:0px 0} 

</style>

</b:if>

</b:if>

Setelah tema disimpan kembali, maka hasilnya akan menjadi seperti berikut ini:

Lumayan keren bukan. Jika di blog anda tampilannya kurang rapi, sesuaikan lagi ukuran atau pengaturan kode-kode tersebut untuk mendapatkan hasil yang diinginkan. Kalau anda paham kode-kode script, tentunya anda bisa modifikasi lagi tampilannya dengan menambahkan kode-kode lainnya agar tampilan menjadi semakin menarik. 

Demikianlah cara mengubah tampilan homepage blog bentuk list menjadi grid dengan mudah. Mungkin tidak semua template bisa berhasil menggunakan cara di atas, tapi tidak ada salahnya jika anda ingin mencobanya untuk tampilan blog anda. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Mengubah Tampilan Homepage Blog List Menjadi Bentuk Grid. Please share...!

Facebook

Twitter