Tampilan blog memang menjadi sangat penting untuk kita selalu perhatikan? Kenapa demikian? Karena tampilan pada sebuah blog, menjadi daya tarik untuk pembaca ataupun pengunjung blog kita, agar mereka lebih nyaman. Salah satunya dengan mengubah tampilan home page blog kita yang biasa-biasa saja tadinya, kita modifikasi menjadi grid agar terlihat lebih keren.

Tidak hanya itu kamu juga dapat membuat Dark Mode pada blog kamu, sehingga pembaca akan lebih nyaman saat sedang membaca artikel kamu ditempat yang gelap.

Kontent memang tetap menjadi kualitas hal yang pertama pada sebuah blog, namun kita sebagai seorang blogger juga harus memperhatikan kenyamanan dari setiap pengunjung blog kita. Meskipun kualitas kontent kita bagus, dan terhindar dari Plagiarisme namun kalau pengunjung blog kita tidak betah juga jadi percuma.

Tampilan grid menjadi salah satu cara merubah tampilan home page kita yang biasa-biasa saja menjadi lebih elegant. Dimana kita dapat melihat penyajian postingan dengan lebih keren, sepertinya halnya kita membuat bagian Featured Post kita menjadi lebih modern dibanding versi sebelumnya.

Jika kamu saat ini merasa bosan dengan tampilan Home Page kamu yang sekarang, tak ada salahnya mencoba style baru dihalaman depan blog kamu.

Caranya mudah sekali untuk menerapkan tampilan grid di blog kamu, Silakan kamu copy kode dibawah ini dan letakan diatas: </head>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>

Jika kode diatas sudah kamu masukan kedalam template kamu, silakan save sekarang dan lihat perubahannya.