Membuat Blok Note dan Warning Keren di Blog

Hallo semua, gimana kabarnya? semoga selalu diberikan kesehatan ya. Tiga hari ga up artikel, dikarenakan terus-terusan di tolak AdSense jadi saya memutuskan untuk mengupdate keseluruhan artikel yang telah saya buat sebelumnya.

Tujuan saya melakukan itu gaperlu ditanyakan, udah pasti agar segera diterima AdSense😅. Sebagai anak yang baru lulus sekolah dan gatau arahnya kemana saya harap bisa mendapatkan penghasilan dari jerih payah saya menulis di blog ini. 

Nah pada halaman ini saya akan kembali membagikan tutorial blogging untuk kalian yaitu cara membuat blok note dan warning. 

Sebenarnya cara ini cukup mudah dan pasti banyak yang tahu, karena hanya perlu meletakan kode css pada template. namun tak dipungkiri masi banyak blogger pemula yang belum mengerti.

Bagi pengguna median ui ini sudah menjadi fitur bawaan template, jadi tinggal menggunakan saja. Akan tetapi jika kamu menggunakan template yang lain dan ingin membuat note box atau warning, silahkan simak dibawah ini:

Membuat Blok Note dan Waring Keren di Blog

Buka dashboard blogger > tema > edit html lalu salin css dibawah ini dan letakan diatas kode </style> atau ]]</b:skin> dan simpan.

/* Note, Warning Box */
.notes{position:relative;padding:16px 20px 16px 50px; background:#e1f5fe;color:#3c4043; font-size:.85rem;line-height:1.6em;border-radius:10px;overflow:hidden} .notes::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} .notes::after{content:'\002A';position:absolute;left:18px;top:16px; font-size:20px; min-width:15px;text-align:center} .notes.wr{background:#ffdfdf;color:#48525c} .notes.wr::before{background:#e65151} .notes.wr::after{content:'\0021'}
/* CSS Darkmode Note */
.darkMode .notes{color:#3c4043}

Cara Penggunaan

Untuk menerapkannya silahkan masukan kode dibawah ini dalam tampilan html ketika membuat postingan atau menulis artikel.

/* Kode note box */
<p class="notes">Tuliskan teks disini...</p>

/* Kode warning box */
<p class="notes wr">Tuliskan teks disini...</p>

Tampilan note box

Tampilan warning box

Sekian pembahasan kali ini, jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Dan baca juga artikel lainnya untuk mendapatkan informasi dan tips seputar blogging.