|
| Membuat Blok Catatan Kren |
Halo semuanya, selamat datang di SpotiPost, banyak situs web saat ini memiliki kotak catatan dan peringatan yang mencakup Median UI, Fletro, iMagz, Lantro UI, Plus UI dll.
Anda mungkin ingin menambahkan kotak catatan dan peringatan ke artikel blog Anda. Maka tutorial ini untuk Anda, dalam artikel ini, kami akan menunjukkan cara menambahkan catatan, kotak peringatan di Blogger, dengan mengikuti tutorial ini dengan benar, Anda dapat dengan mudah menambahkan catatan, kotak peringatan di situs Blogger Anda, jadi tanpa membuang banyak waktu mari kita periksa Dari cara menambahkan kotak catatan, Peringatan!
Bagaimana cara menambahkan kotak peringatan dan catatan ke blogger?
Penting! : Sebelum kita mulai menambahkan kode di blog, saya sarankan Anda membuat cadangan tema Anda saat ini. Secara kebetulan jika terjadi masalah, Anda dapat mengembalikannya nanti.
Silahkan masuk ke Blogger > tema > edit html lalu salin kode CSS dibawah ini dan letakan di atas ]]></b:skin>
/* Note */
.note{position: relative;padding: 16px 20px 16px 50px;font-size: .85rem;font-family: var(--fontB);line-height: 1.4;border-radius: 10px;overflow: hidden;} .note::after{position:absolute;left:18px;top:10px; font-size:1.5rem; min-width:15px;text-align:center}
.note.red{background: rgba(254,242,242);color: rgba(239,68,68)} .note.red::before{background:#e65151} .note.red::after{content:'\270E'}
.note.Pink{background: rgba(253,242,248);color: rgba(236,72,153)} .note.Pink::before{background:#e65151} .note.Pink::after{content:'\2713'}
.note.orange{background: rgba(255,251,235);color: rgba(245,158,11)} .note.orange::before{background:#e65151} .note.orange::after{content:'\003C \003E'}
.note.purple{background: rgba(245,243,255);color: rgba(139,92,246)} .note.purple::before{background:#e65151} .note.purple::after{content:'\266B'}
.note.Cyan{background: rgba(239,246,255);color: rgba(59,130,246)} .note.Cyan::before{background:#e65151} .note.Cyan::after{content:'\2715'}
.note.blue{background: rgb(225 245 254);color: rgba(1 87 155)} .note.blue::before{background:#e65151} .note.blue::after{content:'\204E'}
.note.green{background: rgba(236,253,245);color: rgba(16,185,129)} .note.green::before{background:#e65151} .note.green::after{content:'\0021'}
- Kemudian simpan HTML
- Lalu pergi ke bagian publikasi, ke Postingan atau Halaman
- Kemudian pastikan untuk mengubah tampilan build ke tampilan HTML
- Kemudian tempel kode HTML di bawah ini di posting ini di mana Anda ingin menambahkan catatan atau kotak peringatan
<p class='note red'>Masukan Teks disini</p>
<p class='note Pink'>Masukan Teks disini</p>
<p class='note orange'>Masukan Teks disini</p>
<p class='note purple'>Masukan Teks disini</p>
<p class='note Cyan'>Masukan Teks disini</p>
<p class='note blue'>Masukan Teks disini</p>
<p class='note green'>Masukan Teks disini</p>Jangan lupa untuk menambahkan teks Anda di bagian ini! "Masukan Teks disini"
- Kemudian klik Publikasikan untuk menyimpan dan memublikasikan postingan
Penutup
Sekian Penjelasan Singkat Mengenai Cara menambahkan kotak peringatan dan catatan Kren ke blogger. Semoga Bisa Menambah Pengetahuan Kita Semua.Semua.👋
Apa Reaksimu setelah membaca Cara menambahkan kotak peringatan dan catatan Kren ke blogger.
