Hallo, memiliki tampilan halaman utama blog unik bisa dilakukan jika kita berusaha, umumnya tampilan blog blogger akan statis atau vertikal secara default.
Tampilan statis vertikal blog ini biasanya ditampilkan baik pada desktop ataupun mobile, mengapa tampilan statis vertikal banyak digunakan para pembuat template blog?
Tampilan statis tidak telalu rumit, selain itu tampilan statis memiliki kelebihan, yaitu sebagian atau separuh dari isi artikel postingan akan ditampilkan diberanda blog.
Kita bisa melakukan perubahan tampilan statis vertikal menjadi grid atau kotak-kotak pada homepage blog.
Yap, selain tampilan default template gratis atau premium bahkan default gratis dari blogger, kita mampu membuat tampilan homepage menjadi GRID.
Kostumisasi tampilan homepage blogger menjadi grid ini biasanya dipakai oleh blog streaming film, download film atau blog galery foto.
Cara mengganti tampilan statis homepage blogspot menjadi grid bisa anda lakukan dengan mengikuti tutorialnya dibawah ini.
Tutorial membuat tampilan homepage blogger menjadi Grid
Sebelum memulai tutorial, ada baiknya kalian memahami bahwa Tidak semua template bisa dirubah menjadi tampilan GRID. Struktur template blog yang berbeda tentu akan berbeda pula cara merubah homepage menjadi GRID.
Karena itu.
Biasakan Backup template sebelum melakukan tutorial ini.
Baiklah berikut ini adalah tutorialnya.
1. Log in Blogger
Baca juga : Cara Hapus Gambar Tang dan Obeng Pada Blogger
2. Klik menu Tema > Edit HTML
3. Cari kode </head>
4. Copy kode CSS dibawah ini dan pasetkan tepat diatas tag </head>
<b:if cond='data:blog.pageType != "item" and data:blog.pageType != "static_page" and data:blog.pageType != "archive"'>
<style type='text/css'>
.post-outer{float:left;width:calc(50% - 2px);height:210px;margin:4px 1px}
div.post-body{padding:5px}
.post.hentry{border:1px solid red;margin:4px}
.post-title a,.post-title{font-size:20px;text-decoration:none;color:#f8695e;height:47px;overflow:hidden;display:block}
.thumbnail-post{width:100%;height:140px;display:block;margin:0}
</style>
</b:if>
5. Lalu carilah tag <data:post.body/> yang berada diantara <b:includable id='post' var='post'>...</b:includable>
6. Ganti kode <data:post.body/> dengan kode HTML dibawah
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>
</b:if>
</b:if>
</b:if>
7. Done simpan tema.
Lihat juga : Membuat Anti Klik Kanan Blog Dengan Javascript
Itulah cara mudah merubah tampilan homepage blogger menjadi GRID, tutorial ini tidak sepenuhnya pasti berhasil, tergantung struktur template yang kalian gunakan.
Terima kasih telah berkunjung.