Home > Panduan > Membongkar Koran

Membongkar Koran

March 15th, 2010 Leave a comment Go to comments

Hanya dua teknik yang dipakai untuk membuat koran2an, yaitu teknik membagi area posting menjadi kolom dan teknik pengaturan antar paragraf. Yang lainnya relatif standar seperti kalau kita membuat postingan biasa, yaitu mengatur perataan, pewarnaan dan jenis font.

Inilah kode untuk membagi area posting menjadi tiga kolom.

<table border="0" width="100%"><tr>
<td width="33%" valign="top"><div style="overflow:auto;padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:6px;">kolom pertama</div></td>
<td width="33%" valign="top"><div style="overflow:auto;padding-top:0px;padding-bottom:0px;padding-left:3px;padding-right:3px;">kolom kedua</div></td>
<td width="33%" valign="top"><div style="overflow:auto;padding-top:0px;padding-bottom:0px;padding-left:6px;padding-right:0px;">kolom ketiga</div></td>
</tr></table>

Tiap kolom perlu ditambah padding agar teks masing2 kolom tidak saling menempel. Perhatikan angka2 paddingnya yang tak sama antara kolom satu dengan lainnya. Dengan angka seperti yang saya buat itu, akan dihasilkan jarak antar kolom adalah 9px.

Dan ini kode untuk mengatur paragrafnya

<p style="text-align: justify;font-family:georgia;padding-top:4px;padding-bottom:0px;padding-left:0px;padding-right:0px;line-height: 120%;font-size:90%;">letakkan teks di sini</p>

Besarnya % harus disesuaikan dengan ukuran default theme yang dipakai. Angka2 tersebut tak mesti pas dengan theme yang sahabat pakai sehingga perlu penyesuaian.

Untuk lebih jelasnya sahabat bisa mempelajari secara detail contoh berikut.


NAMA KORAN

deskripsi koran kita


TOPIK 1

tulis deskripsi topik 1 di sini sebanyak yang Anda suka, seberapa Anda mau

TOPIK 2

tulis deskripsi topik 2 di sini sebanyak yang Anda suka, seberapa Anda mau

TOPIK 3

tulis deskripsi topik 3 di sini sebanyak yang Anda suka, seberapa Anda mau


footer


Inilah kodenya

<hr /><p style="text-align: center;font-family:georgia;padding-left:0px;padding-top:0px;padding-right:0px;line-height: 110%;font-size:150%;"><span style="color: #383838; font-family: verdana;"><strong>NAMA KORAN</strong></span></p><p style="text-align: center;font-family:georgia;padding-left:0px;padding-top:0px;padding-right:0px;line-height: 40%;font-size:110%;"><span style="color: #cc0000; font-family: georgia;">deskripsi koran kita</span></p><hr /><table border="0" width="100%"><tr>
<td width="33%" valign="top"><div style="overflow:auto;padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:6px;"><div style="overflow:auto;background:#63696b;padding-top:2px;padding-bottom:2px;padding-left:5px;padding-right:3px;border:1px solid #63696b"><span style="color: #ffffff; font-family: georgia;">TOPIK I</span></div>
<p style="text-align: justify;font-family:georgia;padding-left:0px;padding-top:4px;padding-right:0px;line-height: 120%;font-size:90%;"><font color="black">deskripsi topik I</font></p></div></td>
<td width="33%" valign="top"><div style="overflow:auto;padding-top:0px;padding-bottom:0px;padding-left:3px;padding-right:3px;"><div style="overflow:auto;background:#63696b;padding-top:2px;padding-bottom:2px;padding-left:5px;padding-right:0px;border:1px solid #63696b"><span style="color: #ffffff; font-family: georgia;">TOPIK II</span></div><p style="text-align: justify;font-family:georgia;padding-left:0px;padding-top:4px;padding-right:0px;line-height: 120%;font-size:90%;"><font color="black">deskripsi topik II</font></p></div></td>
<td width="33%" valign="top"><div style="overflow:auto;padding-top:0px;padding-bottom:0px;padding-left:6px;padding-right:0px;"><div style="overflow:auto;background:#63696b;padding-top:2px;padding-bottom:2px;padding-left:5px;padding-right:0px;border:1px solid #63696b"><span style="color: #ffffff; font-family: georgia;">TOPIK III</span></div>
<p style="text-align: justify;font-family:georgia;padding-left:0px;padding-top:5px;padding-right:0px;line-height: 120%;font-size:90%;"><font color="black">deskripsi topik III</font></p></div></td></tr></table><hr /><p style="text-align: center;font-family:georgia;padding-left:0px;padding-top:0px;padding-right:0px;line-height: 40%;font-size:100%;">footer</p><hr />

Untuk menambah topik tinggal copy paste topik yang sudah ada dan diedit seperlunya. Selamat mencoba dan semoga bermanfaat. Saya yakin tak semua membutuhkan, tapi saya juga yakin tak semua menolaknya.

~ Grazie ~
Categories: Panduan
  1. January 11th, 2011 at 22:41 | #1

    ini bisa untk blogspot ya ?? cara pasang nya dmn ??

    [Reply]

  2. January 14th, 2011 at 00:28 | #2

    mantap info nya…
    edit2 html makin mudah

    [Reply]

  3. andi sakab
    February 7th, 2011 at 16:00 | #3

    uhuy… yang ini toh. mantaps langsung bookmark lagi. makasih Pak mars 🙂


    Mari…

    [Reply]

  4. Vulkanisir
    February 7th, 2011 at 17:56 | #4

    saya perlu mas

    [Reply]

  5. riez
    February 7th, 2011 at 19:33 | #5

    niki dgow wordpress iso gak mas…??


    Bisa Mas…
    Tapi pada theme tertentu tampilannya kurang maksimal karena muncul garisnya.

    [Reply]

  6. February 7th, 2011 at 20:51 | #6

    saya pernah coba, tapi garis tabelnya gak mau ilang. piye jal?


    Untuk theme tertentu memang begitu Mas…

    [Reply]

Comment pages
1 2 4329
  1. February 18th, 2011 at 19:30 | #1

silakan buka katalog untuk melihat postingan lainnya
~ terima kasih ~