HOME | ABOUT ME | DAFTAR ISI | welcome to happydesug.blogspot.com

Senin, 27 April 2009

Kode HTML Untuk Membuat Kotak Dalam Posting

HTML code to create box in posts
Kode ini aku dapatkan dari halaman FAQ situs FLAG counter ketika aku mengkopi paste contoh kodenya. Sepertinya kode ini bisa berguna banget untuk mempercantik penampilan posting 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>

temp1

*****
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
Selamat mencoba.

Posting Dengan Kategori Sama



5 komentar:

Juniantobara mengatakan...

Bgau Postingnya nanti sapa coba pake.. oya kayaknya sudah maniak banget dengan blog nih sukses deha buat kamu, betewe tinggal dimana nih, boleh dong nanti minta petunjuk yang lain.. tentang blog, gua masih pemula nih..

dodi mengatakan...

@Dunia Advertising:
wah aku juga masih pemula ya, masih belajar. aku tinggal di pasar rebo, jakarta timur nih. kalo ada yang mau ditanya-tanya silahkan aja, nanya gratis ko, tapi jangan yang susah2 ya.hehehe

Ridho Priyonggo mengatakan...

mang-tekno.blogpot.com :
Thanks buat masukanya ya gan..... :-)

Pipin Inawati mengatakan...

wah tutorialnya sangat membantu....
kunjungi blogku juga ya...http://pipininawati.blogspot.com/

Sudi Adi mengatakan...

kalau bisa post yang di kotak tu bisa naik turun ya bg, soalnya lagi nyari ini untuk blog http://www.tugaselesai.com/

Posting Komentar

Related Posts with Thumbnails