Cara Mudah Mengubah Tampilan Home Page Menjadi Grid Style di Blogger

Cara Mudah Mengubah Tampilan Home Page Menjadi Grid Style di Blogger - Di dalam sebuah dunia blogger, Tampilan merupakan sisi yang paling penting agar Visitor semakin naik, sebab dengan tampilan blog yang minimalis dan dinamis beserta Seo Friendly daya tarik visitor akan semakin kuat.

Selain minimalis dan dinamis ternyata template Viomagz buatan Mas sugeng memiliki ciri khas tersendiri, dan mempunyai peminat yanng sangat banyak baik dalam negeri maupun luar negeri.

Sesuai tema kita pada hari ini adalah membahas bagaimana sih cara membuat tampilan Home page menjadi Grid dengan mudah ? Apa saja yang akan dilakukan agar bisa membuat tampilan blog tersebut menjadi setelan Grid, pastikan kamu Back up terlebih dahulu template kamu agar apabila terjadi kesalahan kamu masih mempunyai template back up awal.

Cara Mudah Membuat Tampilan Home Page Menjadi Grid Style

• Buka Dashboard Blogger
• Masuk kedalam Tema
• Klick Tombol Edit HTML
• Cari kode Berikut </head> Untuk mempermudah pencarian silahkan klick ctrl + F untuk pengguna PC
• Pastekan kode dibawah ini dan letakkan tepat diatas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.label-info-th{
    margin-top:10px
}
a.home-link{
    display:none;
}
.post{
    margin:auto 5px 20px;
    width:calc((100% / 2) - 10px);
    float:left;
    height:420px;
    overflow:hidden
}
.info-1,.info-2,h2.post-title,.post-snippet{
    margin-left:0;
}
.img-thumbnail,.img-thumbnail img{
    width:100%;
    margin-bottom:15px;
}
@media only screen and (max-width:800px){
    .img-thumbnail,.img-thumbnail img{
        width:100%;
        height:165px;
    }
    .post{
        height:auto;
    }
}
@media only screen and (max-width:480px){
    .img-thumbnail{
        width:100%;
        height:auto;
        margin:3px 0 10px 0;
    }
    .img-thumbnail img{
        width:100%;
        height:200px;
    }
    .info-1,.info-2,h2.post-title,.post-snippet{
        margin-left:0;
    }
    .post{
        overflow:hidden;
        width:calc((100% / 1) - 11px);
    }
}
</style>
</b:if>
</b:if>

• Kalau sudah silahkan klick Simpan dan lihat Hasilnya.

Bagaimana Artikelnya ? mudah bukan, Cara Mudah Mengubah Tampilan Home Page Menjadi Grid Style di Blogger ? Oke bro / sis cukup sampai disini ya pembahasan kita kali ini. Jika ada yang kurang di mengerti silakan kalian tanyakan pada kolom komentar dibawah.

Berbagi :