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. 

ARTIKEL TERBARU