saob saya mau bertanaya, setelah saya perhatikan elemen halaman home dan saat kita sedang membaca artikel berbeda. sebagi contoh di home kolom banner ada di kanan, dan di situ juga ada shoutmix. lalu saat kita membaca artikel. kolom yang berjumlah 3 tadi hilang menjadi 2. saya sudah 2 bulan mencari jawaban ini di google namun tidak ada yang saya temukan. beruntung saa bertemu dengan anda. jika tidak menggangu saya ingin bertanya.sebenarnya pertanyaan diatas di tujukan pada template saya sebelumnya disini, tetapi khawatir postingan terlalu panjang serta artikulasinya yang gak baik, dikarenakan gak bisa nulis maka saya tidak membahas tuntas tentang template 3 kolom tsb. inti dari trik ini cukup sederhana, hanya saya kita kerap kali enggan untuk melakukan uji coba pada template. Lanjut...1. apa yang menyebabkan hal iu terjadi ?
2. mungkinkah itu pengaruh dari tamplate yang anda gunakan ?3. dapatka saya menerapkan hal ini di blog saya?
4. jika dan trik cara membuatnya apa yang harus saya lakukan ?
Disini saya menggunakan contoh pada template standar minima dengan lebar 960px yang sudah saya rubah dari ukuran sebelumnya. buka keseluruhan posting dengan mengklik untuk melihat perubahannya DEMO
.
Pemasangan
setelah berada di halaman edit HTML, cari kode css dari kolom postnya:#main-wrapper {
----------------;
----------------;
----------------;
}
lalu ganti dengan kode berikut:
#main-wrapper {
width:646px;
float:right;
margin:5px;
padding:5px;
/* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ display:inline; }
Selanjutnya turun kebawah cari kode ]]></b:skin>
, lalu tambahkan kode ini, tepat di bawahnya:
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#main-wrapper{
width:353px; float:left;
padding: 0;
margin:10px 0 0 10px;
display:inline; }
</b:if>
</style>
Tambahan
Untuk mengatur tampilan kolom post di homepage/beranda, sobat dapat menambahkan kode berikut:.post-body {
margin:0 0 0.75em 90px;
border-left:1px solid $bordercolor;
padding-left:10px;
}
Maka susunannya akan menjadi seperti ini:
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#main-wrapper {
width:353px; float:left;
padding: 0;
margin:10px 0 0 10px;
display:inline;
}
.post-body {
margin:0 0 0.75em 90px;
border-left:1px solid $bondercolor;
padding-left:10px;
}
</b:if>
</style>
Simpan template.
jangan terpaku pada kode css di atas saja, sobat dapat mengkreasikan sendiri mulai dari background, padding dan margin agar lebih sesuai dengan template sobat.mudah-mudahan dapat memberikan manfaat, Amin...
16 komentar (Trik kolom post berbeda (homepage dan indeks post))
wew ! setelah di parse malah kacau tampilan codenya, terbaca gak ya ?.
Sungguh indah blognya kawan.
Santapan sahur
sudah lama pakde juga info ini, eh kagak taunya muncul disini he he he....suwun cak
maaf salah ketik pada komentar sebelumnya.
sudah lama pakde juga mencari info ini, eh kagak tahunya muncul disini.
"SELAMAT MENJALANKAN IBADAH PUASA"
Wah main sama sidebarnya ya Sob... keren2..... tapi sob.. aku pernah baca klo Widget tau2 pindah sendiri tu malah karena Templatenya error ya? hhe..
Semangat n met liburan kwan....
eror di validasikah ??.... mohon lebih spesipik sob, saya masih belajar tentang template.
boleh jg nih permainan sidebarnya, pernah waktu itu jg kpikiran pengen sidebarnya loncat" antara home sama postingan, cm bingungnya kode" template punyaku ga sama kek umum, jd susah nyarinya..
trik ini bukan di sidebarnya kang, ada di #main wrapp-nya
Pagi Sob... bukan2... bukan error waktu validasi ke W3C.....klo itu mah lancar2 aja jadi HTML 5 yg penting widget none sama tag depannya... maksudku klo yg XHTML 1.0 kan kadang ada tuh di postingan A widget tetep disitu tapi pas bikin postingan B widget tau2 berubah kebawah..... na itu knp Sob???
mungkin pada postingan B yg bersangkutan telah memasukan sebuah gambar ataupun sebuah kode tertentu yang lebarnya melebihi lebar element posting, jadi tidak bisa di otomatisasi. berbeda dengan teks yg selalu terdapat spasi.
choen banget nih template sma kaya ane :)
Waah...keren sob. Thanks infonya. Kapan-kapan kalau lagi mood boleh dicoba nih....
Salam kenal balik & salam ukhuwah....
aq malah lebih suyka template yg ini sob
He he.. Ini juga dapat nyontoh dari blognya Om Choen, dan juga di IE masih acak2an apalagi kevalid-anya...
mantap tipsnya bro....
@sejuta ebook »
trims...
Back to form