Kode HTML Untuk Membuat Kotak Dalam Posting...

Kode ini didapatkan oleh seseorang yang mendapatkan dari halaman FAQ situs FLAG counter ketika dia mengkopi paste contoh kodenya....

Sepertinya kode ini bisa berguna banget untuk mempercantik penampilan posting kita ya....

Misalkan dalam suatu posting ada suatu kalimat yang ingin ditaruh dalam kotak seperti dibawah ini:

Contoh tulisan yang diletakkan dalam kotak.

Maka cara membuatnya adalah sebagai berikut: pada mode Edit HTML, letakan tulisan yang ingin diberi kotak diantara baris kode yang berwarna biru seperti contoh dibawah ini :

<p style="border-right: #6c7a7d 1px inset; padding-right: 30px; border-top: #6c7a7d 1px inset; padding-left: 30px; margin-left: 20px; border-left: #6c7a7d 1px inset; margin-right: 70px; border-bottom: #6c7a7d 1px inset"><font color="#ff0000">Contoh tulisan yang diletakkan dalam kotak.</font></p&gt;

*****

Catatan:

Pada waktu kode diletakan pada Edit HTML Posting blogspot, kode akan mengalami perubahan sedikit. Hal itu tidak jadi masalah, kodenya tetap sama hanya saja ditulis dalam bentuk yang sedikit berbeda.

border-right = garis pinggir kotak sebelah kanan
border-left = garis pinggir kotak sebelah kiri
border-top = garis pinggir kotak sebelah atas
border-bottom = garis pinggir kotak sebelah bawah
#6c7a7d; #ff0000 = kode warna, rubah sesuai keinginan
1px inset = ketebalan garis pinggir kotak, rubah sesuai keinginan
padding-right = jarak tulisan dengan garis pinggir kotak sebelah kanan
padding-left = jarak tulisan dengan garis pinggir kotak sebelah kiri
margin-right = jarak kotak dengan pinggir posting sebelah kanan
margin-left = jarak kotak dengan pinggir posting sebelah kiri
20px; 30px; 70px = satuan jarak, rubah sesuai keinginan
font color = warna teks, hapuskan kode ini jika ingin teksnya berwarna seperti warna teks pada posting

Ada lagi macem2 box buat postingan html/script kita, sok.. tinggal pilih aje ye yg mana yang lo suka di bawah ni, klo yang di atas contoh plus pengertian dari kode2 html box'y, jd podo wae box'y masih bisa lo edit jg,,,,klo contoh yang di bawah ni paling backgound'y aja yg tinggal diganti2 suka2......:)

» Groove Border

<div style="border: 2px #006400 ridge; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI </div>

» Inset Border

<div style="border: 2px #006400 inset; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI </div>

» Solid Border

<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI </div>

» Ridge Border

<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI </div>

» Outset Border

<div style="border: 2px #006400 outset; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI </div>

» Double Border

<div style="border: 2px #006400 double; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI </div>

» Dotted Border

<div style="border: 2px #006400 dotted; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI</div>

» Dashed Border

<div style="border: 2px #006400 dashed; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI </div>

» Border dengan scroll, lebar dan tinggi

<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 300px; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DI SINI </div>

klo masih bingoeng tanya aje ye...... moga brasiL....:)
oya pasti lo butuh site ni http://centricle.com/tools/html-entities/ buat meng encode kode html yang mau lo tampilin dalem box html di blog.....