Cumulus swf - flash

Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Membagi kolom posting menjadi 2 (dua) Bagian

Membuat judul posting tentang membagi halaman blog menjadi dua kolom benar-benar membuat pusing kepala. Bagaimana tidak karena pasti akan terjadi dua pengertian yang berbeda. Dari kata dan kalimat serta maksudnya, membagi halaman posting menjadi 2 kolom bisa di artikan :

1. Membagi posting atau setiap posting dibntuk dalam 2 kolom terpisah, kiri dan kanan.
2. Membuat halaman posting menjadi 2 kolom, kiri dan kanan dengan setiap kolomnya berisi satu buah postingan.

Coba .... Bingung, khan?! He .... ndak apa-apa ... Biar kita sama-sama bingungnya. Yang buat tutorial bingung, yang baca bingung dan yang pasti yang mau buat juga sedikit bingung. He ... he ....

Biar sedikit berkurang bingungnya, kita akan buat dulu panduan yang berkaitan dengan pengerian dan maksud yang tertulis di poin ke-2. "Membagi halaman posting menjadi 2 kolom dengan masing-masing kolom berisi 1 (satu) posting.

Cara membuat halaman posting menjadi 2 kolom terpisah

  1. Login to Blogger
  2. Dasboard : KLIK link Design/Rancangan.
  3. Design/Rancangan : KLIK linkEdit HTML.
  4. Edit HTML : BackUp Template terlebih dahulu dengan KLIK Download Full Template/Download Template Lengkap, kemudian simpan file template di folder PC.
  5. Tetap di Edit HTML : cari kode ]]></b:skin>. Simpan kode berikut di bawah kode ]]></b:skin>.
  6. <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style>
    .post {
    width:185px;
    margin-right:5px;
    overflow:hidden;
    float:left;
    border:1px solid #666;
    }
    </style>
    </b:if>
  7. Cari kode CSS .post{ atau .post {. Yang membedakan dua kode tersebut hanya pada spasi sebelum tanda .post dan tanda kurung buka, sementara fungsinya sama sekali tidak ada perbedaan. Di bawah kode tersebut masih ada kode lanjutannya seperti ini :
  8. .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }
    Mungkin kode milik template sampeyan tidak sama persis. Kode syntax di atas diambilkan dari template Minima Black.
  9. Ganti Kode : Ganti syntax (kode CSS) dengan kode css berikut ini :
  10. .post {
    padding:1em 0.5em 1.6em;
    margin:.5em auto 1.5em;
    border-bottom:1px dotted $bordercolor;
    }
  11. SAVE Template/Simpan Template : KLIK SAVE Template/Simpan Template, kemudian periksa hasilnya dengan membuka blog.

Catatan/Keterangan :

  1. Perlu diketahui sebelumnya bahwa modifikasi ini telah berhasil dengan baik ketika di coba di template Minima Black. Untuk Suksesnya pembuatan atau modifikasi, sebaiknya buatlah blog percobaan terlebih dahulu dengan Template Minima tersebut. Bukankah buat blog nggak perlu bayar? Makanya buat saja untuk bahan percobaan! Oye?!
  2. Kunci keberhasilan modifikasi terletak pada ukuran lebar 2 kolom baru yang dibuat, yaitu pada kode css :
    width:185px;.
    Ukuran ini hasil dari perhitungan yang diperoleh dengan membandingkan lebar halaman posting (#main-wrapper) yang mempunyai ukuran lebar :
    width:410px;
  3. Karena lebar halaman posting Template Minima relatif paling sempit, maka silahkan sampeyan langsung bisa mencoba kode-kode di atas tanpa perubahan sedikitpun. Setelah tersimpan dan melihat hasilnya, apabila kurang lebar, tambahlah sedikit demi sedikit hingga diperoleh lebar yang paling tepat. Lakukan perubahan pada kode width:185px; .
  4. Untuk mendapatkan hasil yang ideal, sebaiknya halaman posting (#main atau #main-wrapper) diperlebar hingga masing-masing kolom tidak terlalu sempit.
  5. Supaya setiap kolom posting mempunyai tinggi yang sama, sampeyan bisa menambahkan kode height:400px; (rubah ukurannya jika diperlukan) pada syntax :
  6. .post{
    width:185px;
    height:400px;
    margin-right:5px;
    overflow:hidden;
    float:left;
    border:1px solid #666;
    }
  7. Atau biar tampil lebih cantik dan menarik, gunakan pengatur ketinggian kolom melalui penggunaan read more otomatis yang akan kita postingkan selanjutnya.
  8. Oye?!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

5 komentar:

  1. boleh boleh keren mas bos, gue coba dulu biar blog gue tambah rapi.
    main kesini ya mas bos http://metal-arch.blogspot.com

    BalasHapus
  2. mas,klo perlu make screenshotnya...maklum masih newbie

    BalasHapus
  3. bagus sobat artikelnya,aku mau coba nih,makasih infonya.....
    johan - http:/gitarchordshack.blogspot.com/

    BalasHapus
  4. wah saya kurang ngerti mas ...

    BalasHapus
  5. duh kodenya beda nee, gagal terus..

    BalasHapus

 
GR | Edited by | gubhug reyot