Rabu, 07 Desember 2011

Membuat entry post di halaman utama dalam bentuk galeri

mungkin beberapa sobat blogger pernah melihat template blog yang disulap menjadi toko online atau berupa galeri, dimana seolah posting mereka menjadi kecil-kecil (biasanya dalam bentuk thumbnail) dan itu berurutan, mungkin seperti ini



post 1 post 2 post 3post 4 dst-dst...


ada teman yang ngasih tau, tapi rasanya terlalu rumit dan terlihat banyak, setelah googling dengan berbagai kata kunci (dan beberapa hari) akhhirnya ketemu juga tutorial yang (sebenarnya) jauuuh lebih simpel. saya sendiri ga ngerti kenapa dulu sobat saya ngasih taunya kayak banyak banget ya?

ok, ini dia:taruh ini di bawah /b:skin>

<!-- untuk dua kolom seluruh halaman -->

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style>

.post {

width:140px;

margin-right:7.5px;

height: 190px;

overflow:hidden;

float:left;

border:2px solid silver; }

</style>

</b:if>

<!-- akhir dua kolom -->

<!-- untuk dua kolom halaman label -->

<b:if cond='data:blog.searchLabel'>

<style>

.post {

width:140px;

margin-right:7.5px;

height: 190px;

overflow:hidden;

float:left;

border:2px solid silver; }

</style>

</b:if>

<!-- akhir dua kolom -->



sejauh yang saya pakai (meski ada kode tambahan selain itu) tapi ga berpengaruh dengan tampilan, sobat bisa utak-atik yang ditandai merah agar sesuai dengan ukuran templatenya, semakin kecil maka akan semakin banyak thumbnail posting/entry yang tampil dihalaman utama. setelah dicoba-coba dengan menggabungkan halaman statis, ternyata memang kita harus membuat dua kode yang sama agar halaman statis juga tidak ikut "tersunat"... setidaknya saya tau, kalau kode <b:if cond: blabla> ga bisa digabung jadi satu perintah, bisa sih sobat pake kode bagian 1 aja kalo ga make halaman statis.



seperti yang sebelumnya saya bilang, template ini banyak digunakan oleh "pelaku" atau blogger yang menggunakan blognya sebagai galeri atau etalase toko onlinenya, beberapa contoh sobat bisa langsung liat disini :http://www.allblogtools.com/blogger-templates/2-columns/simplex-eshop/?theme=demo

ternyata mudah kan? :D

Tidak ada komentar:

Posting Komentar