Cara Membuat Kotak Catatan Lipat Berwarna di Blogger

Mempercantik tampilan blog merupakan hal yang penting, pengunjung akan merasa nyaman ketika melihat blog yang cantik dan rapi. Salah satu cara untuk mempercantik blog adalah dengan menambahkan kotak catatan berwarna yang keren.

Sebenarnya blogger telah membuatkan tool bernama blockquote yang fungsinya untuk menandai poin-point penting, namun jika hanya mengandalkan blockquote saja sangatlah tidak menarik bagi pengunjung.

Maka dari itu, kita akan membahas cara membuat kotak catatan/note box yang indah, selain itu note box yang akan kita buat juga memiliki beberapa varian warna serta efek lipatan yang keren. Kotak catatan/note box ini memiliki fungsi agar pengunjung tidak melewatkan poin-poin penting yang kita bahas.

Cara Membuat Kotak Catatan Berwarna di Blogger

• Masuk ke dashboard blog, kemudian pergi ke menu Tema
• Pilih Edit HTML
• Letakkan kode ini, tepat berada diatas]]></b:skin> atau </style>

  /* Note Box Color */ 
  .note{position:relative;width:100%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden} 
  .note.orange{background:#f39c12} .note.crusta{background:#F2784B} 
  .note.river{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.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22} 
  .note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
  .note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}
  
  /* darkmode */
  .darkmode .note{background:#1a2632}
  .darkmode .note.orange{background:#1a2632}
  .darkmode .note.crusta{background:#1a2632}
  .darkmode .note.river{background:#1a2632}

  Jika template anda memiliki fitur darkmode, silahkan ubah class .darkmode nya. Jika template anda tidak memiliki fitur darkmode, silahkan hapus saja kode .darkmode
• Jika sudah selesai, klik Simpan Tema

Sekarang kita telah berhasil membuat kotak catatan di blog, dan sekarang adalah cara untuk menggunakan kotak catatan tersebut di postingan blog.

Cara Menggunakan Kotak Catatan Berwarna di Blogger

• Masuk ke dashboard blog, kemudian pergi ke menu Postingan
• Pilih postingan baru
• Pilih Tampilan HTML, bukan Tampilan Menulis/Compose
• Letakkan kode berikut ini:

Warna Hijau

<div class='note'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Warna Jingga

<div class='note orange'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Warna Merah

<div class='note crusta'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Warna Biru

<div class='note river'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Preview

---

Penutup

Demikianlah penjelasan dari saya, jika anda merasa keliru dan ada yang belum dipahami jangan sungkan untuk menanyakan dikolom komentar dibawah, sampai jumpa lagi.