Trik Menampilkan Blog Post Secara Horizontal

By Admin di 3/29/2009 |

Trik Menampilkan Blog Post Secara Horizontal - Trik Menampilkan Blog Post Secara Horizontal?? trik seperti apa lagi ini yah?? wekekkekee. Saya sendiri agak kesulitan untuk mendeskripsikannya. Istilah lainnya apa yah? Membelah kolom posting jadi 2 atau lebih, membagi kolom posting untuk template magazine blogger, minipost pada halaman utama, dan lain-lain. Bingung juga saya apa sebutan yang benernya. Saya sudah berusaha mencari trik ini menggunakan Google Search namun tidak saya temukan. Yang mendekati topik hanya ada 1 yakni tulisan kang jaloe tentang pengaturan ukuran mainpost dan minipost. Trik ini ditanyakan oleh mas Lutfi di postingan Kursus Kilat Rombak Minima (Bab 3).

Sebenarnya saya ragu untuk menulis Trik Menampilkan Blog Post Secara Horizontal karena saya sudah berjanji untuk tidak lagi menulis tentang Trik Hacking Blogspot. Tapi karena ini masih berhubungan dengan Kursus Kilat Rombak Minima, maka saya mantapkan hati saja untuk menulis.

Umumnya template yang paling top dan banyak dimodifikasi dan dipelajari adalah Cellar Heat. Dulu sebelum ada Cellar Heat saya pernah membuat template seperti ini untuk Si Tomboy Jovie. Atau template "Shining Sky" yang tidak pernah saya publikasikan dan hanya saya wariskan pada Guruh Subagya a.k.a Mochal untuk dipelajari(sorry om, dulu ane paksa belajar sendiri. wakkaka). Yang jelas, template2 yang saya buat itu tidak bisa diterapkan secara langsung untuk template lain karena strukturnya yang super kacau.

Mungkin anda berpikir trik ini akan menggunakan javascript, penambahan CSS serta pengkodean HTML yang panjang seperti pada template - template magazine blogger yang menggunakan atau terdapat fitur ini. Saya tekankan trik ini tidak seperti yang anda bayangan. Trik ini sangat simple, mudah dan cukup mengikuti 3 langkah sederhana.

Kita mulai triknya (Ingat Trik Menampilkan Blog Post Secara Horizontal ini hanya saya tujukan untuk struktur template minima saja).

1. Cari kode CSS berikut lalu tambahkan kode berwarna merah

.post {
margin:.5em 10px 1.5em 0;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
width:48%;
float:left;
}

2. Cari kode CSS berikut lalu tambahkan kode berwarna merah

.post-body {
margin:0 0 .75em;
line-height:1.6em;
height:150px;
overflow:hidden;
}

3. Letakkan kode HTML berikut diatas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:else/>
<style>
.post {margin:.5em 0px 1.5em; width:100%;}
.post-body {height:100%;}
</style>
</b:if>

Kuncinya hanya terletak di lebar/width #main-wrapper. Misal lebar main-wrappernya 600px. maka lebar minipostnya(lihat point1) 48% dari 600px. kenapa tidak 50% saja? karena kita menyisakan sedikit lebar dari main-wrapper untuk jarak agar antar kolom minipostnya tidak menempel. Itukan untuk 2 minipost untuk satu baris, bagaimana untuk 3 minipost dalam satu baris? tinggal ganti saja lebar 48% tersebut sekitar 32%. 4 minipost? ya sekitar 24.5% dan seterusnya. Height pada .post-body digunakan untuk membatasi tinggi dari postingan minipost agar terlihat rapi. dan overflow:hidden; sebagai penghapus postingan yang berada diluar tinggi tersebut(silahkan dicoba jika anda menghilangkan overflow:hidden; dan lihat bagaimana hasilnya). Height ini dengan kata lain sebagai penentu seberapa banyak summary yang ingin ditampilkan pada minipost atau juga sebagai trik read more secara otomatis tanpa penambahan/penempatan kode pada postingan. Anda boleh saya menghilangkan height pada .post-body ini jika sudah menggunakan trik read more versi lainnya atau mengantinya dengan ukuran yang anda inginkan.

Nah, gampangkan caranya. Siapa bilang susah? siapa bilang harus menggunakan javascript? siapa bilang harus berkutat dengan CSS dan pengkodean HTML yang panjang? siapa.......juga yang pernah bilang gitu. wakkakaka

Weleh2, tulisan nda berguna alias ngawurnya lebih banyak dari triknya sendiri :D. Semoga saja trik ini bukan repost, atau jika ditulis ulang oleh tutor blogger lain semoga saya tidak dicela sebagai tukang kopas tulisan orang :D. Karena itu saya agak risih dan tidak lagi mau menulis trik hacking blogger. Enakan sih bikin postingan ala kadarnya saja seperti apa yang ditulis oleh om Nara dipostingan Mencari Ide Buat postingan.

Related Posts by Categories