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

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

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

.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.
7. Ganti Kode : Ganti syntax (kode CSS) dengan kode css berikut ini :

.post {
    padding:1em 0.5em 1.6em;
    margin:.5em auto 1.5em;
    border-bottom:1px dotted $bordercolor;
    }

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

.post{
    width:185px;
    height:400px;
    margin-right:5px;
    overflow:hidden;
    float:left;
    border:1px solid #666;
    }

6. Atau biar tampil lebih cantik dan menarik, gunakan pengatur ketinggian kolom melalui penggunaan read more otomatis yang akan kita postingkan selanjutnya.
7. Oye?!

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

• 
• 

» Happy Blogging - gubhugreyot «