Cara Mudah Membuat Note Box Berwarna Pada Blog

Catatan Panda – Setiap kali kita membuat artikel diblog biasanya kita selalu memberikan sebuah catatan simple kepada pembaca supaya mereka lebih jelas apa saja yang disampaikan pada sebuah postingan artikel kita.

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

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

Cara Mudah Membuat Note Box Berwarna Pada Blog

Pertama yang harus kalian lakukan masuk dlu ke Blogger.com, lalu kalau kalian sudah masuk klik Tema > Edit HTML
Lalu kalian cari kode ]]></b:skin> atau </style> selanjutnya kalian copy kode CSS dibawah ini kemudian pastekan code CSS 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 CSS diatas memiliki 4 varian warna yang anda bisa dilihat pada demo. Bagaimana keren bukan note box berwarna ini. Kemudian untuk menerapkan pada artikel atau postingan blog kita bisa 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 bisa dicek Kode Warna HTML

Sekian tutorial yang bisa saya jelaskan ke anda semua, jika anda belum paham bisa langsung komentar dibawah kalau saya tidak sibuk pasti saya balas komentar kalian satu-satu. Jangan lupa share artikel saya, terimakasih.

Leave a Reply

Your email address will not be published.