×

search by faronesia.com

FARONESIA.COM
Profesional and Specialist WebDesign

Unduh dan dapatkan template blogger terbaik mulai dari premium hingga gratis tersedia di Faronesia.com

Unduh sekarang

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.

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

    BalasHapus
  2. Btw blognya keren gan, banyak script pentingnya

    BalasHapus
    Balasan
    1. Semoga bermanfaat ya gan hehe

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

    BalasHapus
  4. Di mode mobile gambar tidak keluar

    BalasHapus
  5. Tutorial paling lengkap hanya ada di faronisa.com

    Terima kasih gan.

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Developer

test-1 test-2
Saya adalah seorang Web Designer dan Front-End Developer, 5 tahun dalam pengalaman bermain coding sejak SMA. Pemilik Blog Faronesia sekaligus Desainer Template Blogger.

azza / owner faronesia
Saya adalah mahasiswi sekaligus penulis lepas di sela-sela kesibukan saya. Penulis Faronesia sekaligus penyempurna naskah artikel.

shofi / author faronesia
Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup