Cara Membuat Widget Notifikasi Teks Pada Blog

Halo semua, pada artikel kali ini kita akan membuat widget notifikasi teks yang berfungsi untuk promosi seperti gabung grup wa atau grup telegram dan sejenisnya.

Widget ini sudah responsive dan cocok banget buat di pasang di blog, widget ini sama seperti milik template blogger median ui.

Langkah - Langkah Pemasangan Widget Notifikasi Teks Pada Blog

1. Masuk ke blogger > Tema > Edit HTML > setelah itu salin kode css di bawah ini, tepat 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}

2. Salin kode HTML di bawah ini tepat di atas kode <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'>&lt;div class=&#39;ntfA&#39;&gt; 
 &lt;span&gt;

grup whatsapp indonesian members only
&lt;br /&gt;
&lt;div style=&#39;text-align:center;&#39;&gt;&lt;a href=&#39;https://chat.whatsapp.com/GBv3laCcZJjDEQ1TrXZuGB&#39; target=&#39;_blank&#39; rel=&#39;nofollow noopener noreffer&#39;&gt;Join Now&lt;/a&gt;&lt;/div&gt;

&lt;/span&gt; 
&lt;/div&gt;</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>

Jika terdapat error ganti tulisan HTML yang berada di type='HTML' sesuai selera kalian, sebagai contoh HTML2 , HTML21 , HTML99 dan sebagainya.

Setelah sudah berhasil di simpan, kalian bisa mengeditnya pada menu tata letak.

Semoga Bermanfaat.