Thursday, April 12, 2012

Cara Membuat Kotak (Border) pada Postingan Blog

Dalam fitur blog sebenarnya sudah tersedia untuk membuat kotak, yaitu blockquate. Namun jika dalam satu postingan ada beberapa penekanan suatu pernyataan, kalau hanya memakai blockquate akan terlihat membosankan atau kaku. Maka untuk mempercantik tampilan postingan blog ditambah dengan membuat kode html untuk membuat kotak (border).

Bagaimana cara membuat kotak (border) berbeda ?
Untuk membuat border pada sebuah postingan maka dalam penulisannya harus dalam mode HTML. Adapum beberapa contohnya sebagai berikut :
1.
Belajar Buat Blog (B3)
Kode htmlnya <div style="border:1px #c8c785 solid;background-color:#fdfccf;width:300px;padding:10px;text-align:left;">Belajar Buat Blog (B3)</div>

2.
Belajar Buat Blog (B3)
Kode htmlnya <div style="border: 1px #a0ca9e dotted;background-color: #e5fee4; width:300px; padding: 10px;text-align:right;">Belajar Buat Blog (B3)</div>

Keterangan :
1. border: 1px #a0ca9e dotted;
Kode ini untuk model border dimana 1px untuk ketebalan border, bisa anda ganti dengan kebutuhan anda. #a0ca9e untuk warna border. Ini juga bisa diganti dengan selera warna yang anda inginkan. dotted adalah bentuk bordet garis putus-putus.
2. background-color: #e5fce4;
Ini merupakan kode html untuk warna backgrounnya. dan tentunya juga bisa diganti dengan keinginan anda.
3. width: 400px;
Kode ini adalah kode html untuk menentukan panjang border sesuai dengan postingan yang dibuat.
4. padding: 10px
Kode ini adalah untuk menentukan jarak huruf dengan garis tepi. Semakin besar angkanya tentu saja semakin jauh huruf dengan garis tepinya.

Demikian sedikit tutorial tentang bagaimana membuat kotak (Border) dalam sebuah postingan dan semoga bermanfaat......

No comments:

Post a Comment