Cara Merubah Tampilan Homepage Static Menjadi Grid di Blogger

Baca Juga

 - Pada dasarnya tampilan sebuah blog akan menjadi nilai tersendiri bagi pengunjung blog. Dengan tampilan blog yang bagus dan rapi tentu bisa membuat pengunjung betah berada di blog kita.

Namun, apakah anda bosan dengan tampilan blog yang Static?. Apakah anda berkeinginan merubah tampilan blog anda menjadi Grid?. Jika itu jawabannya adalah IYA. Maka disini tempat yang tepat untuk anda.

Pada sebuah blog sebenarnya ada 3 mode tampilan. Yang pertama Mode Static, yaitu tampilan yang terkesan memanjang dan menurun ke bawah sesuai urutan. Yang kedua tampilan Grid, yaitu tampilan blog yang biasanya berbentuk kotak atau hampir kotak dan tersusun dengan terbagi menjadi dua atau tiga bagian. Yang terakhir Mode Campuran, di mode campuran biasanya gabungan antara Mode Statis dan Grid. Contohnya seperti gambar di bawah.

Namun kali ini saya akan membahas Cara Merubah Tampilan Homepage Static Menjadi Grid di Blogger. Simak Tutorialnya sampai habis..

1. Masuk ke Dashboard blogger anda masing-masing.
2. Pilih Tema.
3. Klik Edit HTML
4. Cari kode  </head> atau &lt;!--</head>--&gt;&lt;/head&gt; supaya cepat tekan ctrl+f lalu cari melalui itu.
5. Pastekan kode dibawah ini tepat di atas kode </head> atau &lt;!--</head>--&gt;&lt;/head&gt;

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

6. Terakhir klik Save dan lihat tampilan blog anda.

Demikian artikel dari saya tentang Cara Merubah Tampilan Homepage Static Menjadi Grid di Blogger, semoga bisa bermanfaat bagi anda semua. Jika ada pertanyaan atau pesan, tinggalkan di kolom komentar...