Cara Membuat Widget Notifikasi Teks Sederhana di Blogger

 BSD City, Arteesid.com. Halo, kali ini saya akan berbagi tutorial singkat tentang bagaimana cara membuat widget notifikasi teks sederhana yang tampil di bagian atas header blog Anda.

Langkah 1: Menambahkan CSS

Masuk ke Blogger > Tema > Edit HTML, lalu salin kode CSS berikut dan letakkan di atas kode: ]]></b:skin>  atau </style>

/* Notif Section Source https://median-ui.jagodesain.com */
.ntfC{display:flex;align-items:center;position:relative;min-height:53px;background:#e8f0fe;color:#3c4043;padding:10px 25px;font-size:13px;transition:all .1s ease;overflow:hidden;z-index:3}
.ntfC .secIn{width:100%;position:relative}
.ntfC .c{display:flex;align-items:center}
.ntfT{width:100%;padding-right:15px;text-align:center}
.ntfT a{color:#f89000;font-weight:700}
.ntfI:checked ~ .ntfC{height:0;min-height:0;padding:0;opacity:0;visibility:hidden}
.ntfA{display:inline-flex;align-items:center;justify-content:center;text-align:initial}
.ntfA >a{flex-shrink:0;white-space:nowrap;display:inline-block;margin:0 10px;padding:8px 12px;border-radius:3px;background:#f89000;color:#fffdfc;font-size:12px;font-weight:400;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);text-decoration:none}
.ntfC .c::after{content:'\2715';line-height:18px;font-size:14px}
@media screen and (max-width:896px){.ntfC{padding-left:20px;padding-right:20px}}
/* css darkmode sesuaikan class (.drK) dengan templatemu agar dapat berjalan */
.drK .ntfC{background:#2d2d30;color:#989b9f}

Langkah 2: Menambahkan HTML

Selanjutnya, tambahkan kode HTML widget tepat di atas bagian <header>

<!--[ Notification section ]-->
        <b:section cond='!data:view.isPreview' id='notif-widget' maxwidgets='1' showaddelement='false'>
          <b:widget id='HTML0' locked='true' title='Notification' type='HTML' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='content'><div class='ntfA'> 
 <span>

grup whatsapp indonesian members only
<br />
<div style='text-align:center;'><a href='https://chat.whatsapp.com/GBv3laCcZJjDEQ1TrXZuGB' target='_blank' rel='nofollow noopener noreffer'>Join Now</a></div>

</span> 
</div></b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
              <input class='ntfI hidden' id='forNft' type='checkbox'/>
              <div class='ntfC'>
                <div class='ntfT'><data:content/></div>
                <label aria-label='Close Menu' class='c' for='forNft'/>
              </div>
            </b:includable>
          </b:widget>
        </b:section>

Catatan: Jika saat menyimpan muncul error, ubah angka pada `HTML0` menjadi `HTML1`. Jika masih error, naikkan lagi angkanya (HTML2, HTML3, dan seterusnya) sampai berhasil. Hal ini karena setiap ID harus unik, dan jika ada yang sama akan menyebabkan error saat disimpan.