Kamis, 27 Maret 2014

Cara Membagi & Membuat Halaman Artikel Blog 2,3,4 Kolom

Cara Membagi & Membuat Halaman Artikel Blog 2,3,4 Kolom - Mengganti tampilan blog yang kita miliki sungguh menyenangkan, begitu juga jika membuat sesuatu yang berbeda dengan tampilan artikel blog kita, agar memiliki estetika yang lebih menarik tentu dipasang beberapa pernik agar halaman artikel lebih menarik. Dan pada artikel ini, akan dijelaskan mengenai cara membagi kolom artikel blog menjadi 2 kolom atau lebih


Ada beberapa cara yang bisa kita lakukan untuk membuat halaman artikel blog menjadi dua atau lebih, yaitu:

membagi artikel dua kolom
Membagi Kolom Dengan Sama Rata Halaman Artikel - Cara ini bisa langsung diterapkan saat kita akan membagi artikel menjadi dua kolom. Karena cara ini hanya membagi lebar halaman artikel menjadi dua bagian yang sama
Sehingga dengan menggunakan cara ini, kita tidak perlu menggunakan kode css yang terlalu banyak. Namun, karena kurangnya penggunaan kode, tampilannya sedikit kurang bagus
Pemasangan, salin kode berikut ini:
<div style="background: #ddd1a7; float: left; padding: 10px; width: 45%;">Gambar atau artikel sebelah kiri</div>
<div style="background: #ddd1a7; float: right; padding: 10px; width: 45%;">Gambar atau artikel sebelah kanan</div>

membagi artikel dua kolom
Membagi Kolom Menggunakan Table - Seperti yang terlihat pada bagian tulisan ini, sudah jelas kalau membagi halaman artikel pada tulisan ini menggunakan table dan juga terlihat adanya garis yang membatas pada tepi artikel ini
Sebenarnya garis tepi ini tidak selalu menunjukkan sebauh table, tapi karena secara default pengaturan pada kode css table template ini menggunakan garis, maka secara otomatis akan selalu muncul
Pemasangan, salin kode berikut ini:
<table cellpadding="10" cellspacing="10"><tbody>
<tr><td align="justify" valign="top" width="310">Gambar atau artikel sebelah kiri</td><td align="justify" valign="top" width="310">Gambar atau artikel sebelah kanan</td></tr>
</tbody></table>
Keterangan :
width="310" adalah lebar kolom, ganti agar menyesuaikan lebar kolom artikel blog Anda

membuat artikel dua kolom
Membagi 2 Kolom Artikel Sesuai Browser - Maksudnya adalah membagi kolom dengan menggunakan kode css tapi kode tersebut akan tampil lebih baik jika menggunakan browser yang mendukung terhadap kode css yang membagi 2 kolom pada tulisan ini. Dari sekian cara yang saya jelaskan, cara inilah yang sebenarnya lebih saya suka karena saat membagi tulisan artikel menjadi 2 kolom, kita tidak perlu lagi menyediakan kolom lagi. Maksudnya, kita bebas menulis dan setelah diterapkan, ia akan membagi menjadi 2 kolom secara otomatis

membagi artikel dua kolom
Membagi 3 Kolom Artikel Sesuai Browser - Sama seperti yang telah saya jelaskan diatas kalau tampilan 3 kolom artikel ini akan bekerja lebih baik jika menggunakan browser yang mendukung, jika tidak, kemungkinan tampilannya tidak sesuai dengan yang diinginkan, bisa rusak dan bisa tidak tampil. Penggunaan kode untuk menampilkan kolom artikel blog menjadi 3, sama persis dengan dua kolom artikel dan hanya mengganti nilai yang ditentukan untuk dalam menampilkan tiga kolom

membuat artikel dua kolom
Membagi 4 Kolom Artikel Sesuai Browser - Sama dengan dua penjelasan diatas, 2 dan 3 kolom artikel. Pada bagian ini, kita bisa juga dengan mudah dalam membuat kolom artikel menjadi 4 kolom, bahkan lebih... Dengan penggunaan kode yang sangat simpel, membagi kolom artikel blog menjadi beberapa kolom menggunakan cara ini terasa lebih mudah karena tidak terlalu banyak menggunakan kode
Pemasangan untuk 2, 3, 4 kolom salin kode berikut kedalam kode template blog
#2-kolom {background:#d9a7dd;padding:10px;-moz-column-count:2;-moz-column-gap:10px;-webkit-column-count:2;-webkit-column-gap:10px;column-count:2;column-gap:10px;}
Keterangan:
Untuk menjadikan 3 atau 4 kolom, ganti angka 2 dengan jumlah kolom yang diinginkan
Kode markup atau pemanggil, salin kode berikut kedalam kolom artikel
<div id="#2-kolom">Pasang dan ketikkan artikel disini</div>

membuat artikel dua kolom
Membagi 2 Kolom Artikel Menggunakan CSS - Kecuali pada bagian tulisan ini, saya membuat dan membagi kolom artikel menggunakan kode css dan saya lebih menyukai cara ini karena lebih fleksibel dan tidak terpengaruh pada browser untuk menampilkannya, bahkan bisa diatur sendiri agar mendukung untuk semua browser
membuat artikel dua kolom
Cara ini hampir sama dengan cara yang pertama, bedanya hanya pemasangan dan penggunaan kode css saja. Jika pada cara pertama hanya menggunakan sedikit kode yang bisa langsung dipasang pada kolom artikel, maka pada bagian ini menggunakan full css yang dipasang kedalam kode template, sehingga hasilnya seperti yang terlihat ini
Pemasangan, salin kode berikut kedalam kode css template blog Anda
#kolom2 {width:90%;margin:10px;padding:10px;font:italic 12px Verdana;line-height:1.4em;overflow:hidden;}#kolom2 a{color:#0595d8;}#post2 a:active{color:#d8052d;}#kolom2 .left{float:left;width:252px;text-align:left;}#kolom2 .right{float:right;width:252px;text-align:left;}#kolom2 .right a{color:#c30532;}#post2 .right a:active{color:#c30532;}
Kode markup atau pemanggil, salin kode berikut kedalam kolom artikel
<div ="kolom2">
<div class="left">Gambar atau artikel sebelah kiri</div>
<div class="right">Gambar atau artikel sebelah kanan</div>
</div>

Bagaimana? Tertarik untuk memasangnya kedalam halaman artikel blog Anda? Silahkan dipilih sesuai dengan keinginan dan kebutuhan Anda dalam Membagi & Membuat Halaman Artikel Blog 2,3,4 Kolom

Cara Membagi & Membuat Halaman Artikel Blog 2,3,4 Kolom Rating: 4.5 Diposkan Oleh: ana sriwahyuni

6 komentar:

  1. keren tips nya mbak, tapi kurang suka ama blog dengan banyak kolom

    BalasHapus
    Balasan
    1. hehee iya mas Ahmad, tapi semua apa katanya yang menggunakan :)

      Hapus
  2. keren sih, tapi menyiksa waktu hehehe..

    BalasHapus
    Balasan
    1. kalau menurut saya sebenarnya sama saja sis, hanya ada tambahannya saja yaitu menyisipkan kode :)

      Hapus
  3. makasih mastah ilmunya.kami ijin praktek dulu..

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia