NOTE! kode yang akan saya bagikan ini akan berfungsi dengan baik jika di blognya sudah Memasang Font Awesome Icon. Contoh FontAwesome seperti ini
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
atau seperti ini
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
Jadi, jika template yang sobat gunakan belum terpasang font awesome, letakan salah satu kode diatas sebelum kode </head> dalam template.

Cara Memasang Kotak Catatan di Blogspot

Pertama, login ke Blogger > Pilih Blog > Klik menu Tema dan klik tombol Edit HTML > Tambahkan kode CSS di bawah ini sebelum </style> atau ]]></b:skin>

/* MTBOX */
.mtbox{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px}
.mtbox:before{float:left;font-size:32px; font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;margin-top:12px}
/* MTBOX 1 */
.mtbox1:before{color:#039be5;content:'\f005';}
.mtbox1{background:#e1f5fe;color:#0288d1}
/* MTBOX 2 */
.mtbox2:before{color:#536dfe;content:'\f0eb';}
.mtbox2{background:#e8eaf6;color:#3f51b5}
/* MTBOX 3 */
.mtbox3:before{color:#78909c;content:'\f1b0'}
.mtbox3{background:#eceff1;color:#546e7a}
/* MTBOX 4 */
.mtbox4:before{color:#0f9d58;content:'\f087'}
/* MTBOX 5 */
.mtbox5:before{color:#0f9d58;content:'\f00c'}
/* MTBOX 6 */
.mtbox6:before{color:#00bfa5;content:'\f19d'}
.mtbox6{background:#e0f2f1;color:#00897b}
/* MTBOX 7 */
.mtbox7{background:#f3e5f5;color:#9c27b0}
.mtbox7:before{color:#d500f9;content:'\f031'}
/* MTBOX 8 */
.mtbox8:before{color:#ff6e40;content:'\f06a'}
.mtbox8{background:#fff3e0;color:#dd2c00}
/* MTBOX 9 */
.mtbox9:before{color:#dd2c00;content:'\f088'}
/* MTBOX 10 */
.mtbox10:before{color:#dd2c00;content:'\f05e'}
/* Close Button */
.tutup{position:absolute;top:5px;right:5px;width:17px;height:17px;line-height:20px;text-align:center;font-size:24px;font-weight:500;opacity:.3;cursor:pointer}
.tutup b,.tutup a{font-weight:500;}
.tutup:hover{opacity:1}
.tutup:focus,.tutup:active{outline:0}
/* Note Icon Animation on Hover */
.mtbox1:hover:before,.mtbox2:hover:before,.mtbox3:hover:before,.mtbox4:hover:before,.mtbox5:hover:before,.mtbox6:hover:before,.mtbox7:hover:before,.mtbox8:hover:before,.mtbox9:hover:before,.mtbox10:hover:before{-webkit-animation:flash 1s linear 1s infinite normal;animation:flash 1s linear 1s infinite normal}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

Setelah itu klik tombol Simpan tema.

Cara Membuat Kotak Catatan di Postingan Blog

Setelah memasang kode yang dibutuhkan, selanjutnya ke cara penulisannya di dalam postingan. Buat postingan baru di blog sobat, kemudian untuk penulisannya tambahkan kode ini di tab HTML (bukan compose)


<div class="mtbox mtbox#">

...letakan teks sobat disini...

</div>

Jika sobat ingin menambahkan tombol close, gunakan kode ini

<div class="mtbox mtbox#">
...teks disini...
<div aria-label='Close Note' class='tutup' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>
</div>
Ganti # dengan angka 1-10.

Contoh Kotak Catatan di Postingan Blogspot



Demikianlah Cara Mudah Membuat Kotak Catatan Pada Postingan Blogger, semoga bermanfaat untuk sobat. Terimakasih Sudah Berkunjung.
(https://masihterjaga.blogspot.com)