HTML Borders Backgrounds (1)

Ok seperti pada judulnya “HTML Borders Backgrounds (1)”, postingan saya kali ini adalah mengenai Cara membuat Border pada Blog dan jenis-jenis Border.

Sebenarnya saya mengetahui tips dari teman saya damar's blog . Lalu setelah saya lihat”. Eh eh ternyata tips ini cukup penting juga buat para sobat-sobat blogger.

Jadi daripada saya sendiri juga lupa, maka langsung aja deh saya posting disini. Hehehehe

Keterangan : Di bawah adalah Contoh Border dan di dalamnya adalah kode bordernya.

Solid Borders

<div style="border: 10px solid rgb(221, 221, 255); color: midnightblue; font-size: 18px; line-height: 23px; margin: 0pt; padding: 15px; text-align: justify;">
TULISAN SOBAT DI SINI</div>

<p style="border: solid 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

<p style="border: solid 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

<p style="border: solid 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

Border Hanya Di Sebelah Kiri

<p style="border-left: solid 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

<p style="border-left: solid 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

<p style="border-left: solid 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

<p style="border-left: solid 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

Solid Backgrounds

<p style="background: #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

<p style="background: #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

<p style="background: #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">TULISAN SOBAT DI SINI</p>

<p style="background: #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">TULISAN SOBAT DI SINI</p>

Solid Background with Borders

<p style="border: solid 10px #99aabb; background: #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

<p style="border: solid 10px #ddddff; background: #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

<p style="border: solid 10px #ddddff; background: #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">TULISAN SOBAT DI SINI</p>

<p style="border: solid 10px #005588; background: #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">TULISAN SOBAT DI SINI</p>

Dashed Borders

<p style="border: dashed 5px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

<p style="border: dashed 5px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

<p style="border: dashed 5px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">TULISAN SOBAT DI SINI</p>

TIPS :

• Untuk mengganti warna : ganti kodewarnanya  pada kode "color : (kode warna)" Baca : Kode Warna HTML
• Untuk mengganti jenis tulisan, apakah rata kanan-rata kiri dsb : ganti pada kode "text-align: justify"

Lanjut ke : HTML Borders Backgrounds (1)

Artikel Terkait: