Blogging

Membagi Postingan 2 Kolom dan 3 Kolom Responsive Blogger

Written by Novian Hanu

Membagi Postingan 2 Kolom dan 3 Kolom adalah hal yang mudah apabila kita tau caranya. Biasanya pembagian kolom ini bisa anda temukan dalam tulisan kolam atau majalah. Saya sendiri menggunakan script pembagian kolom ini untuk blog percobaan lirik dan chord lagu, hal ini tentu akan mempermudah pembaca karena tidak harus melakukan scroll kebawah karena kalimat selanjutnya ada disampinya.

Cara ini bisa digunakan untuk membagi sebagian posting saja atau seluruh posting dengan menyisipkan HTML di postingan dan sebuah CSS untuk mengatur berapa banyak kolom dibagi secara otomatis tanpa harus menentukan kalimat di kolom kanan dan kiri.

Membagi Postingan 2 Kolom dan 3 Kolom Responsive Blogger

Membagi Postingan 2 Kolom dan 3 Kolom Responsive Blogger

Pertama anda perlu menambahkan kode CSS dibawah ini kedalam HTML Blog anda. Caranya : Masuk Dashbor Blog → Template → EditHTML

Kemudian Cari ]]></b:skin> dan letakkan kode CSS dibawah ini diatas ]]></b:skin>


@media (min-width:500px) { .kolom-venomku{
   -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;} }
@media (min-width:760px) { .kolom-venomku{
   -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;} }  

Keterangan :

“min-width:500px dan angka 2 dibawah” artinya kolom akan dibagi 2 ketika ukuran layar minimal 500 pixel dan kalau kurang dari itu kolom tidak akan dibagi.

“min-width:760px dan angka 3 dibawah” artinya kolom akan dibagi 3 ketika ukuran layar minimal 760 pixel dan kalau kurang dari itu kolom akan dibagi 2.

Anda dapat mengubah angka 500 dan 760 menjadi ukuran layar minimal yang anda inginkan. Angka 2 dan 3 untuk mengatur berapa kolom akan dibagi

Lalu apabila anda ingin membuat kolom dipostingan anda perlu menambahkan kode dibawah ini saat mebuuat posting didalam tab HTML

Simpan Template

<div class='kolom-venomku'> TARUH TULISAN ANDA DISINI </div>

Sehingga akan tampak seperti dibawah ini :

Membagi Postingan 2 Kolom dan 3 Kolom Responsive Blogger

Pumblikasikan. Contoh hasil pembagian kolom responsive dapat anda lihat disini. Anda dapat mencoba tampilan responsive dengan mengecilkan ukuran browser anda sesuai dengan min-width yang anda atur tadi

Apabila anda tidak ingin tampilan responsive. Cukup gunakan CSS seperti dibawah ini :


.kolom-venomku{
   -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;}

About the author

Novian Hanu

Blogger newbie yang ingin belajar dan berbagi karena ilmu adalah harta yang tak akan pernah habis.

Leave a Comment

0 Shares
Tweet
Share
+1
Share