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

Penerapan Kode Pada Postingan

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

Contoh Hasil Membuat Note Box

Perhatian:
Orang ini butuh Perhatian !

Baca Juga: Kumpulan My Codes Blog

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.