|
| Tutorial cara membuat kotak note warning box tampilan keren pada blog |
Halo selamat malam semuanya, kali ini saya akan coba membagikan sebuah tutorial cara membuat kotak note dan warning box seperti Median ui di blogger.
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)}
Jika kode tersebut sudah disimpan ditempat yang benar, maka selanjutnya pilih simpan perubahan template.
Cara Menggunakannya
Untuk cara penggunaanya sangat mudah Kalian hanya perlu salin html dibawah ini dan kalian letakkan di dalam kotak 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 saya bagikan saat ini, untuk source kode-nya saya ambil dari template median ui.