Cara Membuat Kotak Catatan Warna Warni di Blog

Sering kali ketika kita membuat sebuah artikel di blog lalu menambahkan beberapa catatan penting agar pembaca dapat mengerti atau paham dengan apa yang disampaikan pada postingan tersebut.

Saya termasuk orang yang sering menambahkan catatan pada setiap artikel yang saya tulis.

Nah, kali ini saya akan membuat sebuah kotak catatan keren dengan warna-warni flat design dan efek seperti lipatan kertas yang membuatnya benar-benar seperti sebuah catatan pada kertas.

Memodifikasi kotak catatan pada artikel blog memang penting dilakukan, meski ini memang tidak di haruskan namun dengan mengedit kotak catatan di blog dengan memberikan warna yang menonjol dan terlihat seperti lipatan kertas tentu pembaca akan lebih mudah tertarik untuk membaca sebuah catatan penting yang Anda tulis.

Dengan tampilan kotak catatan yang keren, saya yakin pembaca atau visitor akan lebih mudah menerima dan memahami poin-poin penting yang Anda tulis pada sebuah catatan.

Membuat kotak catatan dengan efek css lipatan ini sangat mudah, Anda hanya perlu memasukkan kode css yang sudah saya siapkan, kemudian ketika ingin menambahkan catatan Anda hanya perlu menambahkan sedikit kode html untuk memanggil kode css yang telah di pasang sebelumnya.

Baca juga: Cara Membuat Widget Popular Post Keren Warna Warni di Blog

Perlu di ingat, jika Anda mengganti template blog mungkin efek lipatan pada kotak catatan dan warnanya juga akan hilang, jika ingin muncul kembali maka harus menambahkan kembali kode cssnya kedalam template baru Anda.

Baik langsung saja kita mulai, jika Anda tertarik untuk membuat kotak catatan dengan efek lipatan ini, silahkan ikuti langkah-langkahnya di bawah ini.

Memasang Kotak Catatan Dengan Efek Lipatan Kertas

DEMO

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Silahkan Copy kode CSS 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.yellow{background:#f1c40f}
.note.red{background:#e74c3c}
.note.blue{background:#3498db}
.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.yellow:before{border-color:#fff #fff #f1c40f #f1c40f;background:#f1c40f}
.note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c}
.note.blue:before{border-color:#fff #fff #3498db #3498db;background:#3498db}

5. Klik Simpan tema

Kode css di atas memiliki 4 warna kotak catatan seperti yang bisa Anda lihat pada demo di atas.

Untuk menerapkannya pada blog atau postingan, Anda cukup menambahkan salah satu kode HTML di bawah ini pada postingan blog Anda di mode HTML bukan Compose:

Kotak Catatan Warna Hijau

<div class='note'>...ISI DENGAN CATATAN...</div>

Kotak Catatan Warna Kuning

<div class='note yellow'>...ISI DENGAN CATATAN...</div>

Kotak Catatan Warna Merah

<div class='note red'>...ISI DENGAN CATATAN...</div>

Kotak Catatan Warna Biru

<div class='note blue'>...ISI DENGAN CATATAN...</div>

Catatan:
Untuk mengganti warna kotak catatan silahkan gunakan tool Kode Warna HTML.

Itulah artikel mengenai cara membuat kotak catatan warna warni di blog, semoga bisa bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini