Halo semuanya, Selamat datang di blog Ruls z, kali ini saya akan membagikan cara membuat note dan warning box seperti Median ui diblogger,
Saat ini banyak sekali situs web yang memiliki kotak Catatan dan Peringatan termasuk Median UI, Fletro, iMagz, dll. Kalian mungkin ingin menambahkan catatan, dan kotak peringatan ke artikel Blog Kalian, maka di tutorial kali ini kami akan membahas tutorialnya untuk kalian.
Pada artikel ini, kami akan menunjukkan kepada Kalian cara menambahkan catatan, dan kotak peringatan di Blogger, Dengan mengikuti tutorial ini dengan benar maka Kalian dapat dengan mudah menambahkan catatan, kotak peringatan di situs web Blogger Kalian, Jadi tanpa menunggu lama lagi yuk kita liat cara menambahkan Note, Alert box!
Bagaimana Cara Membuat Catatan, Kotak Peringatan Di Blogger?
Sebelum Kalian melakukan tutorial kali ini, kami menyarankan Kalian agar mencadangkan theme terlebih dahulu, karena jika ada kesalahan, Kalian dapat memulihkannya nanti!
Langkah pertama kalian masuk ke dashboard Blogger, >> Tema >> Edit HTML.
Kemudian Kalian salin kode css di bawah ini dan Kalian tempel di atas kode ]]></b:skin>
/* Note, Warning Box */ .note{position:relative;padding:16px 20px 16px 50px; background:#F3E5F5;color:#3c4043; font-size:.85rem;line-height:1.6em;border-radius:10px;overflow:hidden} .note::before{content:'';width:60px;height:60px;background:rgba(0,0,0,.15);display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1} .note::after{content:'\002A';position:absolute;left:18px;top:16px; font-size:20px; min-width:15px;text-align:center} .note.wr{background:#ffdfdf;color:#48525c} .note.wr::before{background:#e65151} .note.wr::after{content:'\0021'}
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.drK .note{background:var(--darkBs);color:rgba(255,255,255,.9)} Nah jika sudah Kalian tinggal simpan tema
Cara Penggunaannya
Untuk cara penggunaanya sangat mudah Kalian hanya perlu salin html dibawah ini dan Jalian letakkan di postingan dalam mode html
Note Box
<p class='note'>Your_text_here</p>
Warning Box
<p class='note wr'>Your_text_here</p>
Ubah Your_text_here dengan text Kalian
Nah itulah Artikel yang dapat kami bagikan saat ini, untuk sourcenya saya ambil dari template median ui, jika kalian ingin saya membuat artikel lainnya kalian silahkan komentar dibawah atau di forum.