Membuat Semua Postingan Otomatis Bergaya Kolom dengan CSS

Setelah posting sebelumnya mengenai membuat postingan bergaya kolom (Baca: Cara Membuat Postingan Dua Kolom di Blogger/Blogspot) dilanjutkan dengan trik memanfaatkan microsoft word (Baca: Membuat Postingan Berkolom atau Tabel Mudah Dengan Bantuan Ms Word), sekarang saya kembali menanggapi berbagai pertanyaan dari sahabat blogger seperti, "Bagaimana cara membuatnya otomatis untuk semua postingan kita?". Kali ini akan saya jawab tuntas, dan seperti saya perkirakan akan ada yang menyenggol lewat komentar ada cara mudah membuat postingan berkolom menggunakan css3. Nah, mungkin banyak yang bertanya, untuk apa saya posting ke tiga cara tersebut? jawabannya adalah karena ada plus minusnya masing-masing. Mari kita bahas lebih jauh.

Cara Manual... dan Memanfaatkan Ms. Word...
Pengisian kode akan menyusahkan beberapa orang yang malas berkode ria. Namun, sebaliknya ini akan memudahkan dalam penyesuaian dengan template bagi orang yang suka coding, seperti atur ukuran lebar per kolom dan jaraknya. Sama halnya dengan memanfaatklan microsoft word. Kode yang dihasilkan akan sama dengan pembuatan tabel manual. Banyak juga yang beralasan tidak ingin menyibukkan memasukkan code setiap mereka posting. Tapi satu lagi kelebihan yakni model kolom ini tidak bermasalah di semua browser termasuk IE.

Dengan CSS 3
Dengan trik menambahkan kode css 3 jauh lebih prosedural dan lebih mudah. Ini jgua bisa diterapkan otomatis untuk semua postingan. Hanya saja seperti mode rounded, efek ini belum diterima Internet Explorer.

Lepas dari semua itu, untuk memnuhi juga banyaknya email masuk mengenai permintaan membahas CSS 3, saya akan memulainya dengan postingan berkolom. Kode yang digunakan adalah...

-moz-column-count: 3;

-moz-column-gap: 1em;

-moz-column-rule: 1px solid black;

(untuk firefox dan universal)

-webkit-column-count: 3;

-webkit-column-gap: 1em;

-webkit-column-rule: 1px solid black;

(untuk safari)

Semua Postingan...
Mari kita terapkan kode diatas. Jika Anda ingin menerapkannya di semua postingan maka Anda harus perhatikan soal gambar. Ukuran gambar tidak boleh lebih lebar dari lebar per kolom karena jika lebih lebar maka akan bertumpuk dengan kolom. Untuk membuatnya otomatis di tiap postingan Anda

1. Login blogger
2. Tata Letak
3. Edit HTML
4. Cari kode

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;

.................

............................
  }

5. Tambahkan kode css multi column tadi ke bagian itu sehingga menjadi seperti ini
.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;

-moz-column-count: 3;

-moz-column-gap: 1em;

-moz-column-rule: 1px solid black;

-webkit-column-count: 3;

-webkit-column-gap: 1em;

-webkit-column-rule: 1px solid black;

  }

6. Simpan template Anda

Ingin hanya pada bagian tertentu...
JikaAnda ingin hanya pada bagian tertentu, silahkan Anda tambahkan kode berikut ini di atas ]]></b:skin>

#postingankolom {
-moz-column-count: 2;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
}

Pada column-count ganti dengan jumlah kolom yang diinginkan. Lebar area postingan otomatis akan dibagi berdasarkan angka tersebut. Column-gap untuk jarak dan column-rule untuk pengaturan garis tengah. Jika sudah silahkan simpan template Anda. Lalu untuk aplikasikan effectnya silahkan gunakan kode HTML berikut. Gunakan mode pengeposan edit HTML.

<div id="postingankolom">
letakkan tulisan Anda disini
</div>

Contohnya Adalah Sebagai Berikut

Karena sebuah hajat aku bersama 5 orang kerabatku pergi bersama. Dengan 3 buah sepeda motor kami memulai perjalan kami. Aku berada paling belakang karena aku paling muda. Perjalanan ini semula tampak biasa saja karena aku telah hafal jalan-jalan ini, jalan beraspal yang sedari dulu sering aku lewati. Rasanya aku bahkan dapat membayangkannya walau harus memejamkan mata. Namun ternyata tujuan kami lebih dari perkiraanku. Melewati jalan yang sama sekali belum pernah aku lihat. Semakin sepi dan semakin sepi. Pemandangan semakin alami dengan pegununggan indah di kiri dan sungai kecil yang mengalir biasa di kanan. Aku harus membagi benar konsentrasi mengendarai sepeda motor di jalan yang berkelok dan menikmati keindahan tersebut.

Silahkan mencoba trik ini dan semoga mas doyok memberikan sesuatu yang bermanfaat setiap harinya....

Related Posts by Categories

Widget by Hoctro | Jack Book