Cara Membuat Kotak di Posting blog

Kali ini cowaska akan berbagi bagaimana cara membuat tampilan posting berada dalam sebuah Kotak atau Tabel sederhana atau menyematkannya dalam tulisan blog agar mudah dipahami, biasanya kotak di gunakan untuk postingan tutorial atau bahasa khusus oleh para narablog, berikut adalah Script dan Caranya :

• Login ke dalam blog Kamu
• Buat Artikel baru
• Pilih Html

• Kemudian Kamu Tulis Script Di bawah ini

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
Coretan Waska (Ganti Tulisan Ini dengan Artikel Postingan Kamu)</div>

• Selanjutnya Ganti tulisan "Coretan Waska" Di atas Dengan Tulisan Kamu (Script Tabel di atas sama seperti Contoh Tabel kotak Script di atas Tersebut)

Apabila kamu Kurang suka dengan tampilan di atas, kamu juga dapat mengganti tampilannya, atau merubahnya sesuka hati kamu.

• border: 3px = ketebalan kotak script. dan #1780dd = warna kotak script.
• Double : bentuk kotak. (kode ini bisa diganti dengan kode berikut atau juga bisa di hapus).
• padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
• background-color:ffffff; = warna dalam kontak.
• text-align:left; = posisi tulisan didalam kotak di kiri.

Berikut adalah Contoh kontak tabel yang kita buat, Script Kontak tabel tersebut berada di dalam kontak tabel tersebut sesuai dengan kontak tabelnya :

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Coretan Waska (Ganti Tulisan Ini dengan Artikel Postingan Kamu)
</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Coretan Waska (Ganti Tulisan Ini dengan Artikel Postingan Kamu)</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Coretan Waska (Ganti Tulisan Ini dengan Artikel Postingan Kamu)</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Coretan Waska (Ganti Tulisan Ini dengan Artikel Postingan Kamu)</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Coretan Waska (Ganti Tulisan Ini dengan Artikel Postingan Kamu)</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Coretan Waska (Ganti Tulisan Ini dengan Artikel Postingan Kamu)</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Coretan Waska (Ganti Tulisan Ini dengan Artikel Postingan Kamu)</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Coretan Waska (Ganti Tulisan Ini dengan Artikel Postingan Kamu)</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Coretan Waska (Ganti Tulisan Ini dengan Artikel Postingan Kamu)</div>

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Coretan Waska (Ganti Tulisan Ini dengan Artikel Postingan Kamu)</div>

Mudah bukan, semoga bermanfaat buat kamu yang ingin membuat postingan blog dengan kontak tabel, selamat mencoba.