Membuat Posting Blog Menjadi 2 Kolom atau Lebih
Membuat Posting Blog Menjadi 2 Kolom atau Lebih
Pernahkah kamu melihat tampilan artikel blog yang menarik misalkan dengan model dibagi menjadi 2 kolom sehingga memberi kesan minimalis dan rapi. Posting 2 kolom Mungkin bisa anda gunakan untuk mempercantik postingan anda atau bisa juga untuk memberi kesan profesional seperti pada koran atau surat kabar. Selain itu pada beberapa kasus bisa juga digunakan untuk menghemat ruang agar terlihat makin padat dan tidak banyak ruang kosong.
Contohnya seperti dibawah ini:
Bagian 1
Selamat mencoba !!!
Bagaimana, sudah punya gambaran bukan tentang model tulisan di blog yang dibagi menjadi 2 kolom atau lebih?Tuliskan Artikel Kamu Disini. Artikel bisa kamu masukkan disini, maka nanti otomatis akan disetting menjadi kolom 1 dan seterusnya menyesuaikan dengan jumlah karakter tulisan.
Bagian 2Tuliskan Artikel Kamu Disini. Pada bagian ini dapat kamu tuliskan artikel yang secara otomatis akan disetting menjadi kolom ke-2, panjangnya menyesuaikan dengan banyaknya karakter yang dituliskan disini.
Selamat mencoba !!!
Nah, jika kamu tertarik ingin membuatnya silahkan ikuti 2 cara praktis berikut :
a. Cara 1 membuat bagian posting blog menjadi 2 kolom atau lebih
Untuk membuatnya kamu cukup menambahkan kode-kode berikut kedalam halaman posting blog kamu:
a. Log in kedalam blogger
b. Klik buat posting baru seperti biasa
c. Lalu Copy kode-kode berikut:
<style type="text/css">
.kolom {
margin-top: -30px;
margin-bottom: 10px;
padding: 20px;
background: #fff;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}
</style>
<div class="kolom">
<b class="bold">Bagian 1</b>
Artikel Kamu Disini.
<b class="bold">Bagian 2</b>
Artikel Kamu Disini.</div>
d. Silahkan kamu masukan kode-kode tersebut kedalam posting blog kamu (pada posisi Edit HTML).
b. Cara ke-2 untuk merubah posting blog menjadi 2 kolom atau lebih
Untuk membagi kolom posting blog menjadi 2 kolom selain dengan cara pertama diatas dapat juga dilakukan dengan cara berikut:
a. Log in kedalam blogger
b. Klik buat posting baru seperti biasa
c. Masukkan kode berikut kedalam posting (pada posisi Edit HTML)
<table cellspacing=”10″ cellpadding=”5″>
<tbody>
<tr>
<td width=”300″ align=”justify” valign=”top”>TULISAN KOLOM PERTAMA DISINI</td>
<td width=”300″ align=”justify” valign=”top”>TULISAN KOLOM KEDUA DISINI</td>
</tr>
</tbody>
</table>
Setelah kamu masukkan kode tersebut lalu kembalikan ke posisi Compose dan lanjutkan menulis artikel seperti biasa.
Kedua cara diatas bisa kamu pakai, pilih salah satu yang menurutmu terbaik dan paling enak kamu gunakan.
***
Memasukkan Kode Kedalam Posting |
Setelah kamu masukkan kode tersebut lalu kembalikan ke posisi Compose dan lanjutkan menulis artikel seperti biasa.
b. Cara ke-2 untuk merubah posting blog menjadi 2 kolom atau lebih
Untuk membagi kolom posting blog menjadi 2 kolom selain dengan cara pertama diatas dapat juga dilakukan dengan cara berikut:
a. Log in kedalam blogger
b. Klik buat posting baru seperti biasa
c. Masukkan kode berikut kedalam posting (pada posisi Edit HTML)
<table cellspacing=”10″ cellpadding=”5″>
<tbody>
<tr>
<td width=”300″ align=”justify” valign=”top”>TULISAN KOLOM PERTAMA DISINI</td>
<td width=”300″ align=”justify” valign=”top”>TULISAN KOLOM KEDUA DISINI</td>
</tr>
</tbody>
</table>
Setelah kamu masukkan kode tersebut lalu kembalikan ke posisi Compose dan lanjutkan menulis artikel seperti biasa.
Kedua cara diatas bisa kamu pakai, pilih salah satu yang menurutmu terbaik dan paling enak kamu gunakan.
Oya, cara diatas dapat dipakai juga untuk membuat 2 kolom posting di blog dengan platform Wordpress.
Semoga panduan merubah kolom posting blog menjadi 2 kolom atau lebih tersebut dapat meningkatkan keindahan blog kita semua.
***
artikelnya sangat membantu saya mas. thanks
BalasHapusInfonya sangat bermanfaat gan thanks...
BalasHapusTerimakasih Gan,sangat indah sekali tulisannya ,mudah dimengerti dan sangat jelas,Saya sudah lama pengin membuat posting dua kolom tapi kelupaan sumber yang bener,tiap kali dibikin kodenya banyak yang kerja
BalasHapusmantap bro artikelnya
BalasHapusThanks infonya bermanfaat sekali,...
BalasHapus