Pada kesempatan ini saya akan share bagaimana cara membuat kotak dengan border pada posting, biasanya kotak ini digunakan untuk memposting kode HTML,Javescript. Selain untuk menuliskan kode tersebut kotak ini juga dapat mempercantik tampilan posting anda, karena kita dapat merubah dari border sampai background yang kita inginkan. Berikut cara membuat kotak pada posting blog.
Dalam pembuatan kotak ini anda harus dalam mode HTML bukan dalam mode Compose.
Contoh:
<p style="border-right: #6c7a7d 1px inset; padding-right: 30px;
border-top: #c00000 1px inset; padding-left: 30px; margin-left: 20px;
border-left: #6c7a7d 1px inset; margin-right: 70px; border-bottom:
#6c7a7d 1px inset"> <font color="#ff0000"> ARTIKEL ANDA
</font> </p>
Hasilnya
ARTIKEL ANDA
Keterangan
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
#C00000 ; #ff0000 = kode warna
1px inset = ketebalan garis pinggir kotak
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
Selamat Mencoba, Semoga bermanfaat
2 komentar:
Gan gimana ya cara bikin Kotak link jadi kecil? Jadi kaya link gitu dah, jadi menuju ke postingan pas di klik judul, mohon bantuannya ya ^^
Sip dah...
Posting Komentar
Silahkan Anda Berkomentar.Bagi Yang Sudah Berkomentar Akan Segera Saya Kunjungi Balik.
NO SPAM, SARA, DILARANG MENINGGALKAN LINK HIDUP DI DALAM KOMENTAR!!!
Terimakasih telah berkunjung di FaiShare