Cara Membuat Grid di Homepage Template Viomagz

Imamkunblog.com | Hallo teman-teman, pada kesempatan kali ini saya akan membagikan kepada anda semuanya tutorial cara membuat hompage menjadi grid pada template Viomagz. Menggunakan Grid pada template blog membuat blog kamu jauh lebih keren dan professional.

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;

4. Dan klik Simpan Template!!

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;
 }

2. Dan ganti kode tersebut dengan kode dibawah ini supaya responsive.

.img-thumbnail {
    width: calc(100% + 0px);
    margin: -5px 7px -5px 0px;
    height: 250px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

3. Simpan Template dan lihat hasilnya!!

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!!

Share this post