Cara Membuat Note Box Berwarna dengan Border di Blog


ipung.net - Agar mempercantik tampilan dalam postingan blog diperlukan beragam model. Salah satunya dengan mempercantik tampilan note box dengan warna. Caranya mudah dan tidak berdampak pada kecepatan blog, sehingga tampilan blog masih tetap ringan dan cepat karena hanya mengandalkan css.

Cara Membuat Note Box Berwarna

1. Buka Blog kalian > Pilih Tema > Kemudian Pilih Edit HTML

2. Jangan lupa untuk memback up semua kode HTML untuk menghindari hal yang tidak diinginkan.

3. Letakkan kode berikut ini tepat di atas atau sebelum kode ]]></b:skin> atau </style>
.
/* Note Box Border Color */
.bluebox {padding:10px;font-size:14px;line-height:1.5;background: rgba(186, 208, 228, .37);border-radius:4px;border-left:4px solid;color: #3b5998;border-color:#3b5998}
.greenbox {padding:10px;font-size:14px;line-height:1.5;background: rgba(198, 226, 204, .37);border-radius:4px;border-left:4px solid;color: #48b074;border-color:#48b074}
.redbox {padding:10px;font-size:14px;line-height:1.5;background: rgba(244, 215, 201, .37);border-radius:4px;border-left:4px solid;color: #e0473d;border-color:#e0473d}


4. Anda bisa merubah kode warna sesuai dengan selera anda atau menyesuaikan template blog anda.

5. Penerapan pada postingan blog, silahkan masuk pada menu Buat Postingan Baru > Kemudian letakkan kode berikut pada mode HTML

Kode Note Box Biru dan Contoh:

<div class="bluebox">TEKS-ANDA</div>

Kode Note Box Hijau dan Contoh:

<div class="greenbox">TEKS-ANDA</div>

Kode Note Box Merah dan Contoh:

<div class="redbox">TEKS-ANDA</div>

Perhatian:
Orang ini butuh Perhatian !


Peringatan!
Jangan melakukan spam, menempatkan link pada komentar, dan menggunakan kata kasar

Demikianlah cara mudah untuk membuat Note Box Berwarna di Blog yang menarik untuk tampilan blog anda. Sekian dan terima kasih.

Show comments
Hide comments

0 Response to "Cara Membuat Note Box Berwarna dengan Border di Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel