English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

MEMBAGI POSTINGAN MENJADI DUA KOLOM

Satu lagi trik untuk pada postingan blog agar tampilannya lebih menarik, yaitu membagi postingan menjadi dua kolom (seperti gaya pada koran). Ada dua cara untuk menampilkannya, tinggal anda pilih mana yang paling sesuai / cocok dengan tampilan blog anda secara keseluruhan.

Demo 1
Ramadhan merupakan bulan di mana Allah ta’aala wajibkan berpuasa, dan pada 17 Ramadhan itu pula Al-Quran sebagai petunjuk umat Islam diturunkan kepada Nabi Muhammad melalui malaikat Jibril. Menteri Agama M. Maftuh Basyuni mengingatkan, umat Islam agar mempelajari dan menggali Al-Qur'an yang tak terbatas dalam konteks bacaan, akan tapi lebih pada pemahaman terhadap kandungan Al-Qur'an tersebut.
Demo 2

Ramadhan merupakan bulan di mana Allah ta’aala wajibkan berpuasa, dan pada 17 Ramadhan itu pula Al-Quran sebagai petunjuk umat Islam diturunkan kepada Nabi Muhammad melalui malaikat Jibril.
Menteri Agama M. Maftuh Basyuni mengingatkan, umat Islam agar mempelajari dan menggali Al-Qur'an yang tak terbatas dalam konteks bacaan, akan tapi lebih pada pemahaman terhadap kandungan Al-Qur'an tersebut.

Kedua demo diatas menggunakan kode-kode yang berbeda :

Sekarang silahkan anda simak kode-kode yang digunakan pada kedua demo diatas
  • Kode-kode yang digunakan pada DEMO 1

    <table border="1px" cellpadding="10" cellspacing="10"><tbody><br> <tr> <td align="justify" valign="top" width="250"> artikel di bagian kiri</td><td align="justify" valign="top" width="250">artikel di bagian kanan</td> </tr><br> </tbody></table>
    1. border="1px": merupakan kode ketebalan garis, anda ganti ukurannya, atau bisa juga dihilangkan jika kurang suka.
    2. cellpadding="10" : untuk mengatur jarak antara tepi kolom dengan tulisan
    3. cellspacing="10" : untuk mengatur jarak antara dua kolom
    4. align="justify" (rata dikiri dan dikanan) : untuk mengatur perataan artikel, dapat anda ganti dengan left (rata kiri), right (rata kanan) atau center (tengah).
    5. valign="top" (rata atas) : untuk mengatur perataan vertikal, dapat anda ganti dengan bottom (rata bawah atau middle (rata tengah).
  • Kode-kode yang digunakan pada DEMO 2

    <style type="text/css">#multikolom{-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 ;} </style> <div id="multikolom">Tulisan anda disini</div>


    Pada cara yang kedua ini, anda hanya tinggal memasukkan tulisan menggantikan "Tulisan anda disini"
  • Selamat mencoba, semoga bermanfaat

PENTING UNTUK ANDA BACA



0 komentar:

Posting Komentar

KOMENTAR TERBARU

TINGGALKAN KOMENTAR ANDA

Follow Me