Cari Artikel Blog Ini

Total Tayangan Laman

MENAMPILKAN POSTINGAN MULTI KOLOM

Postingan artikel secara default, hanya menampilkan satu kolom berderet kebawah sesuai jumlah postingan yang telah kita atur. Hal itu mengakibatkan jumlah postingan yang ditampilkan pada halaman utama dan halaman-halaman berikutnya tidak bisa terlalu banyak karena akan terlalu panjang kebawah.
Solusinya, anda dapat mengatur halaman postingan menjadi berderet ke bawah juga berderet kesamping, atau dalam istilah lainnya postingan tampil dalam bentuk kolom-kolom.
Cara menapilkannya mudah, hanya untuk membuat tampilan menjadi terlihat rapih, memerlukan waktu yang agak lama, sebab ukuran yang kita buat bisa terlalu lebar atau terlalu kecil sehingga tampilan postingan akan menjadi amburadul.
Jika terlalu lebar, postingan akan tetap berjejer kebawah serta di sebelah kanannya akan ada ruang yang masih kosong, dan apabila terlalu kecil postingan akan berderet kesamping juga kebawah tetapi dibagian kanan juga akan ada ruang kosong. Sebab itu tadi, pengaturannya akan memakan waktu agak lama unyuk menempatkan postingan sesuai dengan lebar kolom yang tersedia.

Demo : Lihat postingan pada EPG Studio. Kekanan muat 2 postingan dan kebawah muat 5 postingan.
Disarankan, gantilah fasilitas Read More blog anda dengan : READ MORE OTOMATIS , agar jumlah karakter pada halaman muka dan halaman berikutnya sama.

Jika anda ingin membuat tampilan seperti pada postingan EPG Studio, silahkan ikuti langkah-langkahnya.
  • Masuk ke Blogger.
  • Pilih Rancangan bagian Edit HTML.
  • Backup dulu template anda, jika takut gagal.
  • Cari kode seperti dibawah ini :(kode dibawah merupakan kode post yang belum diubah/masih asli)

    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }
  • Tambahkan width/lebar sesuai dengan yang ingin anda tampilkan. Secara utuhnya kode post jadi seperti ini :

    .post {
    width:274px;/*setengah lebar main wrapper anda*/
    float:left;
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }

  • Berikutnya cari kode seperti dibawah ini :

    .post-body {
    margin:0 0 0.75em;
    overflow:hidden
    margin:0 0 .75em;
    line-height:1.6em;
    }
  • Ubah kode tersebut menjadi seperti dibawah ini :

    .post-body {
    margin:0 0 0.75em;
    height:255px; /*ganti sesuai dengan keinginan*/
    overflow:hidden
    margin:0 0 .75em;
    line-height:1.6em;
    }

  • Cari kode </head> kemudian copy kode dibawah dan paste tepat diatasnya . Fungsi kode ini agar waktu dibuka lebar postimgan akan sama dengan ukuran main wrapper anda, jadi bukan ukuran yang diatur pada bagian post diatas.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    .post {
    width:580px; /*samakan dengan width main wrapper*/
    margin:.5em 5px 1.5em 3px;
    }
    .post-body {
    height:100%;
    }
    </style>
    </b:if>
  • Klik tombol Simpan Template.
Jika tampilan masih belum sesuai dengan yang anda harapkan, anda harus kembali ke Edit HTML untuk mengubah kedua ukuran yang ditambahkan tadi.
  1. Jika postingan hanya berderet kebawah sedangkan disebelah kanan masih ada ruang kosong, itu menunjukkan width-nya terlalu besar, silahkan anda kecilkan ukuran width-nya.
  2. Jika postingan sudah berderet kesamping juga berderet kebawah, tapi di sebelah kanan masih ada ruang kosong, itu menunjukkan width-nya terlalu kecil, silahkan anda tambah width-nya.
  3. Anda harus melakukan berulang-ulang sehingga mendapatkan tampilan yang maksimal/sesuai dengan yang anda inginkan.
Setelah selesai mengatur lebar dan tinggi kolom postingan, mungkin anda masih kecewa dengan tampilan judul postingan yang tidak cukup pada tempatnya sehingga bagi judul postingan yang panjang akan bergeser kebawah keluar dari tempatnya.
Jika hal itu terjadi, coba anda atur judul postingan (h3) dengan menambahkan height dalam pixel. Caranya :
  • Cari kode :

    .post h3 {
    text-align:center;
    margin:.25em 0 0;
    padding:4px 4px 4px;
    font-size:100%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    background:#31363F;
    border:3px solid #2F323D;
    }

  • Tambahkan height dengan ukuran yang anda inginkan, misalnya height:35px; maka susunannya menjadi seperti dibawah ini : (kode css dibawah ini merupakan kode css judul post yang dipakai EPG Studio).

    .post h3 {
    text-align:center;
    margin:.25em 0 0;
    padding:4px 4px 4px;
    font-size:100%;
    font-weight:normal;
    line-height:1.4em;
    height:35px;
    color:$titlecolor;
    background:#31363F;
    border:3px solid #2F323D;
    }
  • Anda harus berulang-ulang melakukan pengeditan judul post sampai ditemukan yang paling sesuai dengan tampilan blog anda sekarang.
  • Selamat mencoba, semoga bermanfaat....!!!

Tambahan :
Jika anda ingin tampilan kolom postingan sama dengan EPG Studio (border melengkung) tambahkan sedikit kode pada bagian post. Kodenya seperti ini :

.post {
width:274px;
float:left;
padding:5px; /* Jarak antara text post dengan garis pinggir */
Border-top: 3px solid #2F323D; /* warna garis pinggir atas */
Border-bottom: 3px solid #2F323D; /* warna garis pinggir bawah */
Border-left: 3px solid #2F323D; /* warna garis pinggir kiri */
Border-right: 3px solid #2F323D; /* warna garis pinggir kanan */
Margin-bottom: 10px; /* jarak antara post yang satu dengan yang lainnya */
Margin-left: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
26 Comments

26 komentar :

Yohandi mengatakan...

aduh agak sulit juga ni soalnya tidak semua css sama

Anonim mengatakan...

saya sdh coba pasang...sdh sesuai dgn langkah2ny
tpi knp gambar dan tulisan postingan sy tidak mengecil...jd tampak amburadul....mohon bantuannya apa yg harus diubah lagi agar sesuai...trimksh

azka fathur mengatakan...

iya saya juga @Anonim

azka fathur mengatakan...

kenapa ya posting lama, beranda :::: jadinya ada diatas

mentaripayement mengatakan...

trms atas smuan'y tapi koko kolomnya tidak mau sejajar dengan kolom yang selanjutnya?

gang tutorial mengatakan...

muantef kang

SMK muhammadiyah larangan mengatakan...

wah ko malah kacau

Kak I'im mengatakan...

ahahahah gak bisa..

Sciencecamp mengatakan...

nice blog ,wah amazing... gan keren thanks yakk....

melq mengatakan...

eror !

kga bisa gan ...

Kumpulan Software mengatakan...

Terima Kasih banyak mas ... berkat tutor dari postingan ini... akhirnya bnyak Ilmu yang saya dapat....... ats ucapan terima kasih.. sya buatkan Banner Link EPG untuk sya pasang di blog sya..

Syamsudin Helina mengatakan...

saya membuat postingan multi kolom page numbernya malah ke samping bukan di bawah


bagaimana agar page numbernya berada dibawah
http://narutoklopedia.blogspot.com

spider kecil mengatakan...

ada yang tau tidak cara buat laman, jadi ketika di arahin kursornya langsung berderet kebawah

kedaibaterai mengatakan...

Terimakasih banyak mas,berkat tutor dari postingan ini... akhirnya bnyak Ilmu yang saya dapat.aku udah ikutin totornya mas, tapi belum sempurna. posting udah berderet berderet ke samping. tapi posisi nya naik turun. www.nuraulia.blogspot.com

hadi aktual mengatakan...

benar kata saudara ,harus di ulang untuk menyesuaikan.sejauh ini sudah berhasil walaupun belum sempurna,setidaknya aku bisa punya ilmu baru berkat anda bro.trims.......

Bingung Juga mengatakan...

@Yohandi
Sama, bingung juga nih, tapi mo gw coba apa bikin berat loading nggak nih trik. Btw tx berat

Ades Sambas mengatakan...

@Bingung Juga Udah banyak yang berhasil memakai trik ini
Sayangnya mereka tidak meninggalkan komentar.

Tri denda mengatakan...

rtikelnya ternyata mudah dipahami.. baguss bangett nii artikelnya... (saya suka blog EPG karena artikelnya mudah di PAHAMI) Makanya itu saya ngefans bangett ama EPG..

Terima kasih bangett ya atas Artikelnya..
Sangat-Sangat bermanfaat..

@Bingung Juga : Klo menurut saya nggak ngeberatin kok..

Hendrik Sudirman mengatakan...

Keren Mas Bro. Dengan sedikit utek2 dan ketelatenan, berhasil :D Thanks ilmunya

Hendrik Sudirman mengatakan...

Baru saya terapkan di template percobaan, ntar kalau udah perfect template percobaan saya, saya terapkan di blog saya :D

tourkarimunjawaisland.com mengatakan...

bagus gan

Kang Farhan mengatakan...

hehe...saya malah ngk ngerti mas...hahayyy

hamid dul mengatakan...

@azka fathur gan kok punya ku kolom pagenya ada disamping posting bukan di bawah?? mohon di bantu

heroepotter mengatakan...

Masih belum ngerti -__-

Paket wisata karimun jawa, buka http://karimunjawamenjanganresort.com

Saputra MZ mengatakan...

Lagi cari cara membuat 3 tabel bisa berderet kesamping bukan kebawah nieh!

jam tangan unik --> www.tokoonlinebaru.com

Shella Riana mengatakan...

Makasih gan Artikel nya sangat membantu,

KONTES SEO VIPBANDARQ
TOTAL HADIAH 38 JUTA
Daftar Kontes Seo Sekarang
VIPBANDARQSEO
VIPBANDARQ


Daftar
Capsa Online
Game Bandarq
Domino Online
Poker dan Domino99

Contoh Artikel Kontes SEO

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!