Anda disini » Home » , » Cara Membuat Kotak Pada Posting Blog

Cara Membuat Kotak Pada Posting Blog

Sebelum Membaca, Ayo Berbagi :
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



FaiShare

2 komentar:

Guruh Madara mengatakan...

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 ^^

patentik mengatakan...

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

 

STATISTIK

Page Rank
Review http://faisshare.blogspot.com/ on alexa.com

BERLANGGANAN VIA EMAIL

Enter your email address:

Delivered by FeedBurner

Blogger Community

Home | Android |Film | Game | Info IT | Widget | Software | TipsTrik | Contact Us
Copyright © 2012. faisshare.blogspot.com - All rights reserved | Powered by Blogger.com