Cara Menciptakan Note Box Berwarna Di Blog
Cara Membuat Note Box Berwarna di Blog - Sering kali pada ketika kita menulis sebuah artikel di blog biasanya kita memperlihatkan sebuah catatan simple kepada sang pembaca supaya beliau lebih terperinci apa yang disampaikan pada postingan di blog
Oke..kali ini aku akan share kepada kalian. Note Box dengan flat design berwarna - warni dan mempunyai effect menyerupai kertas lipatan pada umumnya. Mengatur Note Box pada postingan itu sangat penting berdasarkan aku alasannya ialah mempunyai pembeda antara postingan dan catatan penting
Semoga dengan tampilan Note Box dibawah ini viewer dapat memahami poin-poin penting pada postingan tersebut.
Membuat Note Box ini sangat gampang dan simple dengan menambahkan instruksi 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, jikalau 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 mempunyai 4 warna yang dapat lihat didemo.
Untuk menerapkan pada postingan blog dapat 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 dapat cek Cara Membuat Note Box Berwarna di Blog Terima Kasih yang sudah berkunjung agar bermanfaat bagi kalian semua.
Jika kalian ingin mengedit warnanya dapat cek Cara Membuat Note Box Berwarna di Blog Terima Kasih yang sudah berkunjung agar bermanfaat bagi kalian semua.