Tulisan Model Koran

4 Desember 2008




Tulisan Tiga Kolom





Ini adalah tulisan model koran tiga kolom. Tidak pakai teori yang muluk2, hanya gunakan teknik tabel, karena cara itulah yang saya pahami.

Sepintas orang akan mengira ini menggunakan edit HTML theme blog, padahal tidak sama sekali.



Dalam mengisi kolom2, kadang saya juga mengalami kesulitan karena harus mengatur tinggi masing2 kolom agar seimbang dan proporsional.
Untuk mensiasati hal tersebut, teks saya tulis secara utuh terlebih dulu, baru dipotong2.


Cara ini tak selalu efektif, tapi lumayan mampu mengakomodir keinginan saya untuk membuat postingan model koran. Seperti itulah yang saya lakukan.
Apakah ada yang bisa beri solusi lain?






Tulisan Dua Kolom





Ini adalah tulisan model koran dua kolom. Sama seperti yang tiga kolom, di sini saya gunakan teknik tabel.


Tak hanya untuk menampilkan data, tabelpun ternyata bisa kita manfaatkan untuk tujuan lain, salah satunya adalah untuk membuat efek postingan model koran.


Tentang bagaimana memasukkan tabel dalam posting, sudah banya ditulis oleh para ahlinya. Saya sekedar mengembangkannya sedikit, keluar dari pakem pemakaian tabel

Tak ada yang tak mungkin...










Kelebihan cara ini adalah tidak mengganggu kode HTML template, sehingga bagi mereka yang takut terganggu templatenya tidak perlu cemas. Kode HTML nya dimasukkan dalam posting seperti biasa.



Pembuatan tabelnya seperti ini:



<table border="0" width="100%"><tbody>

<tr><td width="33%">

<div style="text-align: justify;">


<div style="border: 0px solid #000000; padding: 10px; overflow: auto;">


<span style="color: #000000;font-family:trebuchet ms;">


ketikkan teks yang akan ditulis pada kolom pertama di sini

</span></div></div></td>

<td width="33%">

<div style="text-align: justify;">


<div style="border: 0px solid #000000; padding: 10px; overflow: auto;">


<span style="color: #000000;font-family:trebuchet ms;">


ketikkan teks yang akan ditulis pada kolom kedua di sini

</span></div></div></td>

<td width="33%">

<div style="text-align: justify;">


<div style="border: 0px solid #000000; padding: 10px; overflow: auto;">


<span style="color: #000000;font-family:trebuchet ms;">


ketikkan teks yang akan ditulis pada kolom ketiga di sini

</span></div></div></td>

</tr></tbody></table>



Prosentase 33 dipilih jika membuat tiga kolom. Untuk yang dua kolom, dibuat 50%. Jangan lupa hilangkan HTML kolom ketiga yaitu


<td width="33%">

<div style="text-align: justify;">


<div style="border: 0px solid #000000; padding: 10px; overflow: auto;">


<span style="color: #000000;font-family:trebuchet ms;">


ketikkan teks yang akan ditulis pada kolom ketiga di sini

</span></div></div></td>




Warna border dan teks bisa disesuaikan menurut selera. Padding 10 px dimaksudkan agar tulisan antar kolom memiliki jarak.


Mungkin kode HTML tersebut bisa disederhanakan, tapi untuk pemahaman dan cari aman, saya pisah per kolom dengan perintah yang sama, walau terkesan berulang2. Saya belum tau, tapi seandainya ada software ataupun cara lain yang bisa membuat postingan model kolom ini, alangkah nikmatnya. Selama ini yang dimaksud oleh theme model koran atau majalah adalah memisahkan postingan secara horisontal, bukan membagi satu postingan menjadi beberapa kolom seperti yang saya maksud di sini.



Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font.
Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

26 komentar :

  1. Mulai Tutorial ya pak, wah salut saya sama njenengan

    BalasHapus
  2. mantab pak, terus berkarya

    BalasHapus
  3. wuiih kerena abis nih. thx bro

    BalasHapus
  4. langsung tak copy, nanti buat coba-coba, boleh tho pak?
    pake royalti ndak nih? :)

    BalasHapus
  5. waaah bapak... mulai nyoba-nyoba nih
    EM

    BalasHapus
  6. Wih..mulai serius neh..
    Ikutan serius ah...
    Makasih infonya Bos.. Ntar saya coba.
    :)

    BalasHapus
  7. Tulisane isih kurang bozz!! harusnya lanjut hal 27 kol 1,hehehe

    BalasHapus
  8. wah semakin keren dan kreatif bapak yang saytu ini makasih penjelasannya
    salam kangen salam hormat dan sukses selalu

    BalasHapus
  9. pak gur ngajar apa siy? Matematika, IPA, Bhs Inggris pa komputer??? hebat euuyy

    BalasHapus
  10. langsung bookmark.... hee.. buat koleksi

    BalasHapus
  11. keren neh bang bisa dicoba neh :)

    BalasHapus
  12. Wah, ndak nyangka apa yang saya tulis direspon banyak temen. Kebetulan saja saya suka yang tabel2an, bahkan menu pada blog saya itupun sekedar tabel. Loadingnya bisa cepet ketimbang menu build up yg bagus2 tapi kadang memperlambat.
    Makasaih buat semua yang telah beri komentar di sini.

    BalasHapus
  13. Wah...ternyata seorang programmer nich guru matematika kita yang satu ini... :) Saran dari bapak untuk membuat navigasi menu sudah saya jalankan, mohon petunjuknya lagi, murid siap melaksanakan :)

    BalasHapus
  14. salut buat pa mar..hebat euy!

    BalasHapus
  15. wah keren...thanks infonya.

    BalasHapus
  16. wah, ide yang cemerlang juga nih, pak mar, layak direkomendasikan utk dicoba setiap bloger yang pingin bikin postingan model koran. utk engine wordpress kora2 bisa ndak, pak?

    BalasHapus
  17. Saya cek juga dari DOM source, ternyata tidak begitu rumit.. Sampean memang blogger tuwir yang kreatif...
    Kalau saya malah jarang makai seperti itu, asal nulis aja... prihatin nih!

    BalasHapus
  18. wah pak marsudiyanto ini penuh dengan ide2 canggih, teknik ini menarik pak, kapan - kapan akan saya coba juga pak.

    BalasHapus
  19. Wah keren mas, rasanya baru blog ini deh yang membuat tulisan model koran. Sipp.. :)

    BalasHapus
  20. Ternyata saya blm komeng disini.
    langsung copas.. thanks mister

    BalasHapus
  21. bisa ngga yach pakai model seperti ini....jd pingin nyoba nich

    BalasHapus

Random Post

Back to top

Sugeng

Selamat
Hari

Have
a nice day

~mars~