-->
Product Description : These women's Bali briefs offer a seamless, flexible fit. The soft, stretchy microfiber construction provides all-day comfort.
JENGGALA WATERFALL : This tourist attraction was originally called Curug Tempuan, because this waterfall is a confluence of several rivers that merge into one. So that local residents hold a meeting with village officials. This meeting discussed the change in the name of the waterfall. So the waterfall changed its name to Curug Jenggala.
THE LEGEND OF THE TAPOMAS RESERVOIR : In the 1980s, the pride of the residents was destroyed to stem the Serayu river during the New Order government, which at that time developed a dam project for a hydroelectric power plant (PLTA) by damming the Serayu river in Wanadadi District.
Product description : A true everyday pant. Super soft and comfortable. The stretch lace trim at your waist and legs offers a custom fit for all day comfort that won't show through clothes
Product Description : Our silky Bodysuede brief will become a staple in your wardrobe. The colors are designed to work with any of your favorite Wacoal bras.

Membuat Tampilan Grid Di Homepage Blog

Terkadang Template blog ada yang memiliki tampilan di halaman utama bog dalam bentuk list dan ada yang grid baik itu dua kolom bisa juga tiga kolom. bagi blogger yang ingin membuat tampilan di halaman depan blog dalam bentuk grid, ikuti langkah-langkah berikut ini :

Ukuran Lebar Template Blog

Ukuran lebar template blog harus disesuaikan terlebih dahulu sebelum memasang kode script tampilan grid terutama template blog yang awalnya tampilan halaman depan bentuknya list. Untuk merubah lebar template blog baca tutorialnya disini.


Gambar diatas adalah contoh tampilan list postingan di halam utama blog. Lalu bagaimana caranya agar tampilan diatas menjadi bentuk grid. Untuk merubah tampilan menjadi bentuk grid langkahnya adalah sebagai berikut :

  • Masuk ke Dhasbord blog tentunya anda login terlebih dahulu. 
  • Masuk ke halaman edit html yaitu klik Tema>>edit HTML
  • Cari kode </head> atau "&lt;/head&gt;&lt;!--<head/>--&gt;" setelah ketemu masukan kode dibawah ini tepat diatasnya.


<b:if cond='data:blog.pageType == &quot;index&quot;'> <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'> 
<style type='text/css'>
.post-outer{float:left;width:calc(50% - 0px);padding: 5px 0}
.post{height:340px}
.post-thumbnail img {display:block;float:none;width:100%;height:180px;margin-bottom:10px;padding:0px 0} 
</style>
</b:if>
</b:if>

Terakhir Simpan Template dan lihat hasilnya. 

Tampilan Grid

Kode di atas menggunakan kalkulasi 50 persen untuk membuat tampilan postingan menjadi dua baris ke samping tentunya menyesuaikan lebar layar postingan. Anda juga bisa membuatnya menjadi tiga baris misalnya dengan mengubah kalkulasi menjadi 30%.

Tampilan diatas belum memiliki warna background dan masih mengikuti latarbelakang warna asli template aslinya. Agar tampilannya lebih menarik, anda bisa tambahkan pengaturan lain contohnya untuk menambahkan background atau bingkai melengkung di masing-masing pojoknya. Tapi kalo saya lebih suka mengikuti latarbelakang aslinya karena tampak lebih natural. tetapi jika anda ingin merubahnya caranya adalah anda bisa melakukan  edit lagi kode CSS untuk merubah tampilan di atas misalnya menjadi seperti berikut ini:
 
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'> 
<style type='text/css'>
.post-outer{float:left;width:calc(50% - 0px);padding:5px 0}
.post{background:CC0000;border:5px solid CC0000;height:300px;border-radius:5px;margin-bottom:0px;}
.post-thumbnail img {display:block;float:none;width:100%;height:180px;border-radius:5px;margin-bottom:5px;padding:0px 0} 
</style>
</b:if>
</b:if>

Setelah melakukan edit simpan template dan lihat hasinya 

Tampilan Grid Dengan Variasi Background

Saran saya sebelum melakukan edit HTML lakukan backup terlebih dahulu untuk menjaga jika terjadi error. Demikianlah cara membuat tampilan Grid di halam depan blog. Semoga bermanfaat.

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post