Trik kolom post berbeda (homepage dan indeks post)

Sabtu, 14 Agustus 2010
Posting ini merupakan sebuah jawaban buat sobat yang sangat tertarik dengan tampilan dari kolom post yang berbeda tampilan antara homepage dan indeks post, berikut kutipannya:
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.

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 ?
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...

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 != &quot;item&quot;'>
#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 != &quot;item&quot;'>
#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))

Posting Komentar
  1. Tihang » Agustus 14, 2010 4:34 PM | permalink

    wew ! setelah di parse malah kacau tampilan codenya, terbaca gak ya ?.

  2. Sungai Awan » Agustus 15, 2010 3:42 AM | permalink

    Sungguh indah blognya kawan.
    Santapan sahur

  3. pakde sulas » Agustus 15, 2010 8:11 AM | permalink

    sudah lama pakde juga info ini, eh kagak taunya muncul disini he he he....suwun cak

  4. pakde sulas » Agustus 15, 2010 8:14 AM | permalink

    maaf salah ketik pada komentar sebelumnya.
    sudah lama pakde juga mencari info ini, eh kagak tahunya muncul disini.

    "SELAMAT MENJALANKAN IBADAH PUASA"

  5. Ferdinand » Agustus 15, 2010 10:03 AM | permalink

    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....

  6. Tihang » Agustus 15, 2010 2:07 PM | permalink

    eror di validasikah ??.... mohon lebih spesipik sob, saya masih belajar tentang template.

  7. oempak » Agustus 15, 2010 2:16 PM | permalink

    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..

  8. Tihang » Agustus 15, 2010 2:34 PM | permalink

    trik ini bukan di sidebarnya kang, ada di #main wrapp-nya

  9. Ferdinand » Agustus 16, 2010 10:52 AM | permalink

    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???

  10. Tihang » Agustus 16, 2010 12:59 PM | permalink

    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.

  11. Unknown » Agustus 16, 2010 8:30 PM | permalink

    choen banget nih template sma kaya ane :)

  12. Muza elbanaf » Agustus 17, 2010 2:15 PM | permalink

    Waah...keren sob. Thanks infonya. Kapan-kapan kalau lagi mood boleh dicoba nih....

    Salam kenal balik & salam ukhuwah....

  13. Rizkyzone » September 07, 2010 9:05 PM | permalink

    aq malah lebih suyka template yg ini sob

  14. Tihang » September 08, 2010 8:30 PM | permalink

    He he.. Ini juga dapat nyontoh dari blognya Om Choen, dan juga di IE masih acak2an apalagi kevalid-anya...

  15. sejuta ebook » April 09, 2011 5:45 PM | permalink

    mantap tipsnya bro....

  16. Tihang » April 10, 2011 6:39 AM | permalink

    @sejuta ebook »
    trims...

Back to form

Mohon berkomentar sesuai topik posting di atas !