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><div class='note Dimgray'>CATATANMU GUYS</div><div class='note Darkslateblue'>CATATANMU GUYS</div><div class='note red'>CATATANMU GUYS</div>Catatan:
Jika kalian ingin mengedit warnanya bisa cek Kode Warna HTML
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.