Cara Membuat Note Box dan Warning Box Mirip Median UI di Blogger

Arsipbiru.com - Selamat datang di Arsipbiru. Kali ini saya akan membagikan tutorial bagaimana cara membuat note box dan warning box mirip Median UI di Blogger. Saat ini banyak kita jumpai situs-situs yang menggunakan template buatan dari Muhammad Maki (JagoDesain), baik itu Median UI, Fletro, maupun iMagz.

Nah, dalam template tersebut tentunya memiliki berbagai fitur yang berbeda dengan template lainnya yang beredar, salah satunya fitur Note Box dan Warning Box. Fitur Note Box digunakan untuk menambahkan catatan di dalam suatu artikel. Sedangkan, Warning Box digunakan untuk menambahkan catatan yang sifatnya memperingatkan di dalam suatu artikel.

Fitur tersebut hanya ada pada template buatan JagoDesain versi terbaru. Namun, tidak menutup kemungkinan fitur tersebut dapat diterapkan pada template selain Median UI dan kawan-kawan. Untuk membuatnya terbilang cukup mudah. Hanya perlu menambahkan barisan kode CSS pada template dan kode HTML pada postingan.

Tertarik untuk membuat Note Box dan Warning Box mirip Median UI di blog Anda? Silahkan Anda ikuti langkah-langkah berikut ini dengan seksama agar fitur tersebut dapat muncul di blog Anda.

Cara Membuat Note Box dan Warning Box Mirip Median UI di Blogger

Sebelum melakukan tutorial kali ini, saya menyarankan agar mencadangkan template Anda terlebih dahulu. Nantinya jika terdapat kesalahan, Anda dapat memulihkannya dengan cepat. Jika Anda telah mencadangkan template Anda, Anda bisa mengikuti tutorial kali ini. Berikut langkah-langkah dalam membuat Note Box dan Warning Box mirip Median UI di Blogger.

1. Pertama, masuk ke akun Blogger masing-masing.

2. Selanjutnya, pilih Tema > klik Edit HTML.

3. Tambahkan kode CSS berikut ini di atas atau sebelum kode ]]></b:skin> atau </style>.

/* 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)}

Cara Penggunaan Note Box dan Warning Box di Postingan