Cara Membuat Kotak Catatan dengan icon SVG Di Postingan Blog

Kali ini saya akan membagikan tutorial Cara Membuat Kotak Catatan Keren (Note Box) Info, Tips, Peringatan di Postingan Blogger. Kotak catatan yang akan saya bagikan ini menggunakan icon SVG,bukan nenggunakan font-awesome.Jadi ringan dan tidak menggangu nilai page speed blog anda.

Kotak catatan ini biasanya terdapat di blog tentang tutorial, tips dan trik juga beberapa informasi menarik lainnya. Untuk membuat kotak catatan pada blog ternyata bukan hal sulit untuk pengguna platform blogger, karena dengan sentuhan sedikit dengan menambahkan kode HTML dan CSS anda sudah bisa membuat kolom catatan pada artikel blog.

Dan kotak catatan ini sebenarnya mirip dengan blockquotes. Kotak catatan ini terdapat 7 pilihan warna dan icon yang dapat anda pilih sesuai selera, atau bahkan anda bisa mengubahnya sendiri sesuai keinginan anda.

Nah, jika anda tertarik memasang kotak catatan di postingan blog, silahkan ikuti langkah-langkahnya dibawah.

Cara Membuat Kotak Catatan di Postingan Blog

1.Pertama, masuk ke Blogger >> Tema >> Edit HTML.
2.Kemudian, letakkan kode ini diatas kode ]]></b:skin> atau </style>

/* Kotak Catatan dengan svg Icon */
/*  dibuat oleh LadangCode */
.notes {
background-repeat: no-repeat;
background-position: relative;
background-size: 35px 35px;
border-radius:4px;
display:block;
font-size:14px;
margin:16px 0;
padding:12px 24px 12px 60px
}
  .notes1{
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2C6.47,2 2,6.5 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M15.5,8C16.33,8 17,8.67 17,9.5C17,10.33 16.33,11 15.5,11C14.67,11 14,10.33 14,9.5C14,8.67 14.67,8 15.5,8M8.5,8C9.33,8 10,8.67 10,9.5C10,10.33 9.33,11 8.5,11C7.67,11 7,10.33 7,9.5C7,8.67 7.67,8 8.5,8M12,17.5C9.67,17.5 7.69,16.04 6.89,14H17.11C16.3,16.04 14.33,17.5 12,17.5Z' fill='%23fff'/%3E%3C/svg%3E");
  background-color:#cfffe6;
   color:#565656
  }
    .notes2{
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z' fill='%23fff'/%3E%3C/svg%3E");
      background-color:#f9bfc5;
      color:#565656
    }
.notes3{
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.75,21.16L15,18.16L16.16,17L17.75,18.59L21.34,15L22.5,16.41L17.75,21.16M10,21H12.8C13.04,21.41 13.33,21.79 13.65,22.13C13.29,22.66 12.69,23 12,23C10.9,23 10,22.11 10,21M3,20V19L5,17V11C5,7.9 7.03,5.18 10,4.29V4C10,2.9 10.9,2 12,2C13.11,2 14,2.9 14,4V4.29C16.97,5.18 19,7.9 19,11V12.08L18,12L17,12.08V11C17,8.24 14.76,6 12,6C9.24,6 7,8.24 7,11V18H12C12,18.7 12.12,19.37 12.34,20H3Z' fill='%23fff'/%3E%3C/svg%3E");
  background-color:#c8d9e2;
  color:#565656
  
}
.notes4{
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.36,6L12.76,8H18V14H14.64L14.24,12H7V6H12.36M14,4H5V21H7V14H12.6L13,16H20V6H14.4' fill='%23fff'/%3E%3C/svg%3E");
  background-color:#6dedd0;
  color:#565656
  
}
.notes5{
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,9C21.55,9 22,9.45 22,10C22,10.55 21.55,11 21,11H16.53L16.4,12.21L14.2,17.15C14,17.65 13.47,18 12.86,18H8.5C7.7,18 7,17.27 7,16.5V10C7,9.61 7.16,9.26 7.43,9L11.63,4.1L12.4,4.84C12.6,5.03 12.72,5.29 12.72,5.58L12.69,5.8L11,9H21M2,18V10H5V18H2Z' fill='%23fff'/%3E%3C/svg%3E");
background-color:#fb818f;
color:#fff
}
.notes6{
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2C14.3,2 16.3,4 16.3,6.2C16.21,8.77 14.34,9.83 14.04,10C15.04,9.5 16.5,9.5 16.5,9.5C19,9.5 21,11.3 21,13.8C21,16.3 19,18 16.5,18C16.5,18 15,18 13,17C13,17 12.7,19 15,22H9C11.3,19 11,17 11,17C9,18 7.5,18 7.5,18C5,18 3,16.3 3,13.8C3,11.3 5,9.5 7.5,9.5C7.5,9.5 8.96,9.5 9.96,10C9.66,9.83 7.79,8.77 7.7,6.2C7.7,4 9.7,2 12,2Z' fill='%23fff'/%3E%3C/svg%3E");
  background-color:#f5b474;
  color:#fff
  
}
.notes7{
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,8H4C2.9,8 2,8.9 2,10V14C2,15.1 2.9,16 4,16H5V20C5,20.55 5.45,21 6,21H8C8.55,21 9,20.55 9,20V16H12L17,20V4L12,8M21.5,12C21.5,13.71 20.54,15.26 19,16V8C20.53,8.75 21.5,10.3 21.5,12Z' fill='%23fff'/%3E%3C/svg%3E");
  background-color:#f5f68e;
  color:#565656
}

/* END */

3.Setelah itu, klik Simpan Tema.

Kemudian untuk menerapkan di postingan, buat entri baru / postingan baru >> letakkan kode ini di tab HTML (bukan Compose).