Cara Membagi Posting Menjadi 2 Kolom Kiri & Kanan

Menambah kembali tutorial untuk merubah tampilan artikel dalam sebuah blog, setelah sebelumnya saya memberikan cara merubah background posting dan cara membuat drop cap yang hasilnya dapat anda lihat di huruf awal artikel ini, kali ini saya akan memberikan cara membagi posting menjadi 2 kolom.


membuat 2 kolom posting



Sebenarnya, posting dalam sebuah blog bukan hanya bisa di bagi menjadi 2 kolom, namun yang harus diperhatikan adalah lebar dari bagian post terkecuali anda menghilangkan sidebar terlebih dahulu menggunakan conditional tag dan pengkodean CSS.

Dengan kreatifitas, anda bahkan dapat memberikan latar pada posting menggunakan paper pattern hingga terkesan seperti sebuah artikel dalam surat kabar.

Mari menuju ke tutorial

Seperti biasa, saya menggunakan pengkodean css di akhir posting dalam mode HTML untuk merubah tampilan artikel hingga tidak perlu melakukan modifikasi pada template blog. Pertama tama kita tambahkan tag

<div class="belahduren"> 

pada mode HTML saat menulis posting, kemudian lanjutkan tulis artikel yang akan anda bagi menjadi dua kolom di bawah kode tersebut.

Setelah selesai, untuk melengkapi markah di atas, kita tutup postingan tersebut dengan tag </div>

Kemudian, di bawah tag penutup </div> tersebut, kita tambahkan pengkodean CSS berikut dalam mode HTML :

<style type="text/css">
.belahduren
{
-moz-column-width:195px;
-webkit-column-width:195px;
column-width:195px;
}

</style>

dan artikel anda pun siap untuk di publish.

Sebagai catatan, anda dapat menyimpan kode berwarna biru (hanya yang berwarna biru) di atas pada template blog anda di atas tag

]]></b:skin>

namun untuk membagi posting menjadi 2 kolom anda harus tetap mengapit posting anda dengan
<div class="belahduren"> </div>

Semoga bermanfaat.


Editor : al ghifari.

al ghifari
Artikel Cara Membagi Posting Menjadi 2 Kolom Kiri & Kanan ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;

19 comments

2/13/2013 10:03:00 PM

Kunjunagn Balik mas, Mat malam!

2/14/2013 08:58:00 AM

baru denger ada cara buat membagi postingan jd 2, kreatif artikel dan perlu dicoba

2/14/2013 02:48:00 PM

mantep

2/14/2013 04:40:00 PM

@kang topjer masa sih kang baru denger cara membuat posting 2 kolom,hehe..
terima kasih kunjungan dan komentarnya.

2/17/2013 11:18:00 PM

Hahaha.. Benar2 kreatif.., cuman font nya kekecilan, mata jadi cepat lelah.. :D

2/18/2013 09:34:00 AM

@blog bandaro disesuaikan dengan lebar area posting mas,hehe..
kalau lebih luas, font nya bisa dibuat lebih besar.
terima kasih komentarnya.

2/22/2013 09:15:00 PM

wah bagus gan tapi lucu juga ya namanya belah duren xixixixixi

2/23/2013 08:33:00 AM

@rohmad aini Kalau namanya belah posting kaya'nya kurang menarik mas, hehe..
terima kasih banyak atas tambahan komentarnya.

3/04/2013 12:50:00 AM

mantap mas. saya bookmar dlu .

3/04/2013 04:18:00 PM

@Yogie G. Kurniawan Silahkan mas Yogie, terima kasih komentar nya.

3/14/2013 09:46:00 AM

ow jadi begutu ya gan
saya baru tau nih
maklum baru 2 minggu jadi blogger

3/18/2013 09:38:00 AM

cara buat M besar kyak gtu gmana mas??

3/18/2013 11:12:00 AM

@guntaraajie-version Tutorialnya ada di sini mas, http://theseoart.blogspot.com/2012/12/huruf-besar-awal-posting.html
silahkan,

3/21/2013 01:36:00 PM

sob,, kalo seumpama tanpa edit template gimana ya caranya.. tq

3/21/2013 01:37:00 PM

jadinya mirip seperti koran nih bro.. hehe

3/22/2013 12:03:00 AM

@Satujuan IM Pada tutorial di atas saya memberikan cara membagi postingan tanpa edit template mas, cara nya dengan memasukan kode berikut pada mode HTML saat menulis posting

<div class="belahduren">
isi dengan postingan anda di sini
</div>
<style type="text/css">
.belahduren
{
-moz-column-width:195px;
-webkit-column-width:195px;
column-width:195px;
}
</style>

namun jika ingin praktis, bisa menyimpan kode
.belahduren
{
-moz-column-width:195px;
-webkit-column-width:195px;
column-width:195px;
}
di atas tag ]]></b:skin>
di template, agar nantinya jika ingin membagi postingan cukup dengan menulis
<div class="belahduren">
isi postingan di sini
</div>
pada mode HTML.

3/22/2013 12:08:00 AM

@Azim Kurang lebih inginnya seperti itu,hehe..
terima kasih atas komentarnya mas Azim

6/10/2013 11:26:00 AM

Makasih tutornya bro, saya suka tampilan post di homepage 2 kolom :D

7/03/2015 06:24:00 PM

Ada yang lebih gampang dan praktis Gan. Coba lihat disni:
http://goo.gl/S3Se23

Post a Comment

Copyright © The Art of SEO

Designed By: the Art of SEO