Posting Dua Kolom

Posting Dua Kolom
Posting Dua Kolom

Salin kode ini lalu letakkan tepat di atas kode </head>:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-outer {
  width:50%;
  height:240px; /* Sesuaikan tingginya sesuka hati */
  float:left;
}

/* Clear CSS Float */
#blog-pager,
.date-header {
  clear:both !important;
}
</style>
</b:if>
</b:if>

Klik Simpan Template.

Beberapa elemen pembungkus posting juga terkadang memiliki kelas yang berbeda. Misalnya .wrapfullpost. Jadi jangan terlalu tergantung dengan kode di atas. Sebagai contoh, jika ternyata elemen luar posting pada template Anda berupa elemen <div class='wrapfullpost'>, maka Anda harus mengubah nama kelasnya menjadi seperti ini:

.wrapfullpost {
  width:50%;
  height:240px; /* Sesuaikan tingginya sesuka hati */
  float:left;
}

27 Komentar

  • Unknown

    Pertamaxxxx ;)

    Hehehe pertama juga ya,,
    Hehe

    Ya coba nanti saya akan coba terapkan,, tapi apa bisa ya di terapkan di blog akau ??? =p*

  • Putra

    Komentar ini telah dihapus oleh pengarang.

  • Putra

    @Taufik Nurrohman haha :D
    nah kok tag kondisionalnya saya coba jadinya malah dipostingan, dihomepage malah biasa? trus saya coba, yang tag kondisional selain homepage saya hapus, hasilnya tetep. Nah trus tag kondisional page statisnya saya hapus, jadi deh.. hahaii, itu kan munculnya selain di homepage + postingan + pagestatis, kalo semisal aku ada dipage statis, yang selain homepage + item/postingan jadi muncul..
    #kesimpulanku \o/ \o/ \o/

  • Taufik Nurrohman

    @Alam Perwira Sepertinya logikamu memang lebih sederhana dan masuk akal Al:

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    .post-outer {
    width:50%;
    height:240px; /* Sesuaikan tingginya sesuka hati */
    float:left;
    }
    /* Clear CSS Float */
    #blog-pager {
    clear:both !important;
    }
    </style>
    </b:if>
    </b:if>
    </b:if>
  • Putra

    @Taufik Nurrohman wkekk, malah gak jadi :D
    sepertinya bisanya :
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    .post-outer {
    width:50%;
    height:240px; /* Sesuaikan tingginya sesuka hati */
    float:left;
    }
    /* Clear CSS Float */
    #blog-pager {
    clear:both !important;
    }
    </style>
    </b:if>

    tapi ini muncul di ststis page :(. Kalau dipasang juga yang statis page, yang di postingan ikutan muncul. Capee dehh :D :D

  • Taufik Nurrohman

    @Alam Perwira Blog Saya memakai kode di atas dan tidak ada masalah sama sekali. Kalau tetap tidak bisa, jalan satu-satunya sepertinya adalah dengan cara merangkap semua kode CSS dalam beberapa tag kondisional secara terpisah:

    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <style type='text/css'>
    .post-outer {width:50%;height:240px;float:left;}
    #blog-pager {clear:both !important;}
    </style>
    </b:if>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    .post-outer {width:50%;height:240px;float:left;}
    #blog-pager {clear:both !important;}
    </style>
    </b:if>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style type='text/css'>
    .post-outer {width:50%;height:240px;float:left;}
    #blog-pager {clear:both !important;}
    </style>
    </b:if>

    Meskipun kode CSS tampak lebih banyak, tapi masing-masing hanya akan tampil pada tipe halaman tersebut, jadi Saya rasa tidak ada masalah.
    Seharusnya cara yang terakhir ini bisa mendukung pada semua kondisi yang sudah dibangun sebelum ini.

  • Anonim

    kalo saya .post-outer nya di ganti sama apa ya mas? saya bingung nyari nyari

  • Taufik Nurrohman

    @Alam Perwira Oh, ya mas. Akhirnya masalah terpecahkan. Sepertinya saat itu Saya masih terbawa dengan template Saya sendiri. Sekarang seharusnya sudah jadi. Kita tidak memerlukan tag kondisional halaman muka :p

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    .post-outer {
    width:50%;
    height:240px; /* Sesuaikan tingginya sesuka hati */
    float:left;
    }
    /* Clear CSS Float */
    #blog-pager,
    h2.date-header {
    clear:both !important;
    }
    </style>
    </b:if>
    </b:if>
  • Putra

    @Taufik Nurrohman nah, haha :D bener kan :yaya:
    tapi kalo dibuat kayak gitu, semisal aku ada di postingan, cssnya tetep muncul, kan munculnya dari tag kondisional selain halaman statis ;)

  • Taufik Nurrohman

    @Alam Perwira Nggak begitu Al. Ini tag kondisionalnya saling menutupi.
    Kita baca dari tengah, kondisinya mengingkari halaman item. Itu artinya kode CSS tidak akan tampil/diterapkan pada halaman item, tapi akan tampil pada halaman statis, halaman muka dan halaman daftar posting.
    Kemudian tag kondisional pengingkaran halaman item itu ditutup lagi (dibungkus) dengan kondisi pengingkaran halaman statis. Itu artinya, kode CSS yang tidak ditampilkan pada halaman item tersebut juga tidak akan ditampilkan pada halaman statis :W

  • Putra

    @Taufik Nurrohman bener juga ya, udah saya coba pak Guru :D http://memorysite404.blogspot.com/

  • Anonim

    ko ga ada judul postingannya yah :(

  • Taufik Nurrohman

    @miretahutempe Mungkin cuma nyelip *=p

  • Lilih

    heran. tiap saya coba selalu gagal. padahal saya coba pake template blogger default. adakah yang saya lewatkan?

  • Taufik Nurrohman

    @Lilih Prilian Ari Pranowo Coba ganti .post-outer jadi .post

  • Putra

    nah, media screennya caranya gmn? kok tak coba pake .post-outer di max-width:600px gak work, widthnya gak berubah / enggak ngikutin lebarnya :'(

  • Taufik Nurrohman

    @Alam Perwira @media screen and (max-width:600px) {
    .post-outer {
    display:block;
    float:none;
    width:auto;
    }
    }

  • Putra

    @Alam Perwira itu udah sy coba tadi gak bisa. Trus tak coba2.. bisa, jadinya make kode ini :
    .post-outer {
    display:block;
    width:98% !important;
    padding:1%;
    }

    :D

  • Anonim

    mas ajarin bikin statik page dong

  • Anonim

    maksunya statik page buat costum pencarian kaya punya situ,ya kaya gini exitren.blogspot.com/p/hasil-penelusuran.htm lah biar agak rapih

  • Taufik Nurrohman

  • Anonim

    nah kalo misal pengen si image postingannya di jadiin background si post-outernya gmana?

  • Unknown

    kok punya ane gak bisa nih? pusing..:'(

  • Unknown

    mas minta bantuanya dong kenapa pas saya pakek trik ini jadinya kayak gini ya iyunkpercobaan.blogspot[dot]com isi postnya malah ke bawah semua tolong bantuanya mas

  • Anonim

    saya bingung menentukan ukuran postingan 2 kolom nya .. :(
    ada saran gak mastah .. ? :D

  • Unknown

    tks gan info nya , sangat membantu :-bd
    salam kenal gan
    gun-zha.blogspot.com

  • Unknown

    wajib d bookmark :D

Komentar telah ditutup.