Cara Membuat Kotak Catatan Blogger

Cara Membuat Kotak Catatan Di Postingan Blogger
Daftar Isi Artikel []
Tutorial Cara Membuat Kotak Catatan(blockquote) di Postingan Blog Keren Responsive Style Terbaru 2018 dengan tombol close.. kotak Catatan warna warni flat material clean design..Saat membuat artikel, biasanya perlu menyisipkan catatan / keterangan pendukung agar pembaca bisa lebih mudah untuk memahami isi dari postingan tersebut. Saya adalah contohnya hampir semua postingan disini terdapat keterangan / catatan penting.

Catatan pada postingan blog harus dibedakan dari paragraf / teks lain supaya mudah dilihat dan dibaca oleh visitor, entah itu diubah warnanya, ukuran huruf, jenis font atau dikemas dengan css yang menarik.

Nah, pada postingan ini saya akan membagikan tutorial "Cara Membuat Kotak Catatan di Postingan Blogger dengan CSS Keren", ok langsung scrool bawah.

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)

Cara memasang kotak script di postingan blog

<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.