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.

Cara Membuat Kotak Catatan Warna-warni di Blog

Memasang Kotak Catatan Dengan Efek Lipatan Kertas


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.

Related Posts

Berlangganan update artikel terbaru via email:

2 Responses to "Cara Membuat Kotak Catatan Warna Warni di Blog"

  1. Dengan tambahan kode ini tambah cantik. Lebih menarik.

    ReplyDelete
  2. Itu harus di dalam template kalau gitu ya, pasti cantik hasilnya
    nggak berani edit template sayangnya
    padahal suka banget membayangkan hasilnya

    ReplyDelete

Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel