Cara Menciptakan Note Box Berwarna Di Blog

Cara Membuat Note Box Berwarna di Blog  - Sering kali pada dikala kita menulis sebuah artikel di blog biasanya kita memperlihatkan sebuah catatan simple kepada sang pembaca supaya ia lebih terang 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 ibarat kertas lipatan pada umumnya. Mengatur Note Box pada postingan itu sangat penting berdasarkan aku alasannya yaitu 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 arahan 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, bila 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>

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 dapat cek Cara Membuat Note Box Berwarna di Blog Terima Kasih yang sudah berkunjung supaya bermanfaat bagi kalian semua.

Bagikan Artikel ini