Cara Membuat Grid di Homepage Template Viomagz
February 04, 2020
Membuat Grid di homepage template VioMagz kali ini sudah responsive, simple dan tampilan menarik. Untuk anda yang sedang menggunaakn template VioMagz dan ingin mengubah tampilan homepage menjadi Grid maka artikel ini akan membantu anda.
Secara default tampilan pada homepage halaman blog adalah vertikal. Namun, anda dapat mengubah menjadi tampilan Grid. Tampilan Grid banyak sekali yang menggunakannya, karena menampilkan artikel lebih banyak dihalaman hompage dan lainnya.
Baikalah tidak perlu berlama-lama, langsung saja kita mulai tutorial mengubah tampilan homepage menjadi grid di template viomagz maupun di semua template.
Cara Membuat Tampilan Grid di Homepage Template Viomagz
1. Login ke Blogger.com dan pilih Theme/tema > Edit HTML.
2. Cari kode .post { (Gunakan CTRL+F Untuk mencari)
3. Copy dan paste kode dibawah ini tepat dibawah kode margin-bottom: 20px;
padding: 15px 30px 30px 30px;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04);
background-color: white;
border-radius: 5px;
padding: 10px;
Sampai disini telah selesai membuat grid pada home page, namun ada sedikit lagi langkah supaya tampilan grid di homepage menjadi Responsive untuk bersi mobilenya. Ikuti berikut ini.
1. Silahkan cari kode CSS berikut ini:
.img-thumbnail {
width: calc(100% + 30px);
margin: 0px 0px 15px -15px;
height: 160px;
position: relative;
overflow: hidden;
}
.img-thumbnail {
width: calc(100% + 0px);
margin: -5px 7px -5px 0px;
height: 250px;
border-radius: 10px;
position: relative;
overflow: hidden;
}
Begitulah cara mengubah tampilan homepage pada template Viomagz menjadi Grid. anda juga bisa mencobanya di template lain dan bisa menyesuaikan sendiri.
Baca Juga: Cara Membuat Efek Zoom pada Gambar artikel Blog
Baiklah sekian artikel kali ini semoga bermanfaat, dan apabila ada yang ingin ditanyakan bisa anda komentar dibawah ya!!
0 komentar