Cara Gampang Menciptakan Note Box Berwarna Pada Blog

Catatan Panda - Setiap kali kita menciptakan artikel diblog biasanya kita selalu menunjukkan sebuah catatan simple kepada pembaca semoga mereka lebih terang apa saja yang disampaikan pada sebuah postingan artikel kita.

Kali ini saya akan membagikan cara menciptakan Note Box Berwarna dan mempunyai sebuah effect ibarat lipatan kertas. Dengan kita menciptakan note box ini postingan artikel kita menjadi lebih menarik, alasannya dengan adanya note box ini kita dapat mengerti antara pembeda postingan dan catatan penting. Note box berwarna ini juga dapat menciptakan pembaca artikel kita semakin betah alasannya merasa nyaman dengan tampilan artikel anda.

Semoga saja dengan adanya tampilan note box ini kalian sebagai pembaca dapat memahami inti penting dari postingan tersebut.
Cara menciptakan note box ini sangatlah mudah, kita hanya perlu menambahkan arahan CSS dibawah ini dan script pembuat note box yang sudah siap pakai.

DEMO

Cara Praktis Membuat Note Box Berwarna Pada Blog

Pertama yang harus kalian lakukan masuk dlu ke Blogger.com, kemudian kalau kalian sudah masuk klik Tema > Edit HTML

Lalu kalian cari arahan ]]></b:skin> atau </style> selanjutnya kalian copy arahan CSS dibawah ini kemudian pastekan code CSS sebelum arahan ]]></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 CSS diatas mempunyai 4 varian warna yang anda dapat dilihat pada demo. Bagaimana keren bukan note box berwarna ini. Kemudian untuk menerapkan pada artikel atau postingan blog kita dapat menerapkannya dengan code dibawah ini dengan 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>

Note : Jika Kalian Ingin Merubah Warnanya dapat dicek Kode Warna HTML

Sekian tutorial yang dapat saya jelaskan ke anda semua, kalau anda belum paham dapat pribadi komentar dibawah kalau saya tidak sibuk niscaya saya balas komentar kalian satu-satu. Jangan lupa share artikel saya, terimakasih.

Bagikan Artikel ini