Cara mengubah tampilan home page menjadi grid

Hay sahabat FARONESIA, didunia blogger tampilan sebuah blog menjadi salah satu kunci penting dalam menambah visitor, sebab dengan tampilan blog yang dinamis serta keren ditambah lagi dengan seo friendy akan menambah daya tarik suatu blog dimata visitor.

Nah sesuai judul kita akan membahas tutorial cara mengubah tampilan home page, sebagai bahan percobaan admin menggunakan template viom*gz menjadi grid. Mengapa harus viom*gz? Karena template yang admin uji coba adalah template ini, silahkan uji coba dan kreasikan pada template lain.

Selain simple dan dinamis sedap dipandang serta seo friendly, template viom*gz besutan mas sugeng juga menjadi salah satu template yang paling banyak diminati oleh para blogger di indonesia. Bahkan admin FARONESIA pun memakai viom*gz juga loh.

Tutorial ini teruntuk kamu yang bosen dengab tampilan viom*gz yang itu-itu aja ataupun ingin berbeda dari yang lainnya, kita lanjut ke pokok pembahasan sesuai judul hehe. Simak cara mengubah tampilan home page menjadi grid dibawah ini:
1. Buka dashboard blog>tema>edit HTML
2. lalu cari kode </head> atau &lt;!--</head>--&gt;&lt;/head&gt;
3. Paste kode dibawah ini tepas diatas 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>

4. Jika sudah lalu save, selesai.

Bagaimana, mudah bukan? Timakasih telah berkunjung jangan lupa share dan komen dibawah ini.

Share this post