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.

9 komentar dari postingan "Cara mengubah tampilan home page menjadi grid"

  1. ini nih yang dari kemarin2 dicari, akhirnya ketemunya disini. thanks info nya

    ReplyDelete
  2. Btw blognya keren gan, banyak script pentingnya

    ReplyDelete
  3. jejak dulu deh gan, nanti kalo ada waktu mau di buat grid blog ensikology.blogspot.com 😆

    ReplyDelete
  4. Di mode mobile gambar tidak keluar

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Website ini dilindungi oleh Google DMCA. Dilarang keras menyalin (copy/paste) sebagian atau keseluruhan isi blog tanpa mencantumkan sumber link aktif dari website www.faronesia.com