DS8gD8tqpFYp4KrtxINpCV9FEH1uV8QcSMCvROJM

Cara Membuat Note Box Berwarna di Blog

Cara Membuat Note Box Berwarna di Blog

Cara Membuat Note Box Berwarna di Blog  - Sering kali pada saat kita menulis sebuah artikel di blog biasanya kita memberikan sebuah catatan simple kepada sang pembaca supaya dia lebih jelas apa yang disampaikan pada postingan di blog

Oke..kali ini saya akan share kepada kalian. Note Box dengan flat design berwarna - warni dan mempunyai effect seperti kertas lipatan pada umumnya. Mengatur Note Box pada postingan itu sangat penting menurut saya karena memiliki pembeda antara postingan dan catatan penting

Semoga dengan tampilan Note Box dibawah ini viewer bisa memahami poin-poin penting pada postingan tersebut.

Membuat Note Box ini sangat mudah dan simple dengan menambahkan kode CSS dibawah ini dan Script pemanggil Note Box yang sudah siap pakai.




Cara Membuat Note Box Berwarna di Blog 


Pertama-tama kita masuk terlebih dahulu ke blogger.com, jika sudah masuk Klik Tema > Edit HTML 
Kemudian cari kode ]]></b:skin> atau </style>, 
silahkan copy code CSS dibawah ini, Kemudian paste sebelum kode ]]></b:skin> atau </style>
/* CSS Note */
.note{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.Dimgray{background:#696969}
.note.red{background:#e74c3c}
.note.Darkslateblue{background:#483D8B}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note.Dimgray:before{border-color:#fff #fff #696969 #696969;background:#696969}
.note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c}
.note.Darkslateblue:before{border-color:#fff #fff #483D8B #483D8B;background:#483D8B}

Kemudian Klik Simpan pada tema.

Kode diatas memiliki 4 warna yang bisa lihat didemo.

Untuk menerapkan pada postingan blog bisa menerapkan code dibawah ini pada mode HTML bukan Compose.

Warna Hijau
<div class='note'>CATATANMU GUYS</div>
Warna Dimgray
<div class='note Dimgray'>CATATANMU GUYS</div>
Warna Darkslateblue
<div class='note Darkslateblue'>CATATANMU GUYS</div>
Warna Merah
<div class='note red'>CATATANMU GUYS</div>

Catatan:
Jika kalian ingin mengedit warnanya bisa cek Kode Warna HTML
Oke sekian yang bisa saya jelaskan tentang Cara Membuat Note Box Berwarna di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Related Posts
Raja Impian
Kopi Inspirasi

Related Posts

Post a Comment