Cara Membuat Note Kotak Warning Box Pada Blogger

Tutorial cara membuat Note warning box pada blogger

Halo selamat malam semuanya, kali ini saya akan coba membagikan sebuah tutorial cara membuat kotak 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 saya akan membahas tutorialnya untuk kalian.

Pada artikel ini, saya 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.

Cara Membuat Catatan, Kotak Peringatan Di Blogger

Sebelum Kalian melakukan tutorial kali ini, saya menyarankan Kalian agar mencadangkan theme terlebih dahulu, karena jika ada kesalahan, Kalian dapat memulihkannya nanti.

Langkah pertama kalian masuk ke dashboard Blogger, pilih Tema lalu pilih Edit HTML.

Silahkan kalian copy kode yang ada dibawah, lalu paste code tersebut tepat 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 Menggunakannya

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>

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