Membuat Widget Notifikasi Mirip Median Ul

 Halo sobat OkayimDotCom,gimana kabarnya sehat kan ?. Alhamdulillah jika sobat masih sehat. Karena pada kesempatan kali ini saya akan membagikan tips Cara Membuat Widget Notifikasi Di Blogger Seperti Milik Template Median Ul Dan Plus Ui.

Sebelum ke pembahasan intinya sebagai bentuk disclaimer buat sobat OkayimDotCom. Saya menginformasikan bahwa widget notifikasi di blogspot yang akan saya bagikan ini milik template median ui yang dikembangkan oleh website jagoandesain.com . Jadi widget iku bukan milik OkayimDotCom ya solv.

Alasan saya membuat tutorial mengenai widget ini ya karena ini merupakan ilmu dalam dunia pemrograman yang harus sebagaimana mestinya dibagikan agar bermanfaat untuk semua orang.

Sebetulnya sih gak sulit amat membuat widget Notifikasi di blogger seperti template median ui milik jagoandesain.sobat cukup memahami dasar CSS, html saja kok untuk membuatnya.

karena saya menggunakan template yang dibuat dari jagoandesain dan di template yang saya gunakan ada fitur notifikasi teksnya jadi saya tinggal copy saja lah ya solv biar cepet juga say membagikan widget Notifikasi di blogger yang bisa sobat terapkan.

Cara Membuat Widget Notifikasi Di Blogger 

1. Langsung saja sobat OkayimDotCom masuk ke menu edit html template blogger sobat.

2. Kemudian silahkan salin saja code CSS yang saya bagikan dibawah ini dan letakan saja di pengaturan CSS template blogger sobat.

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

3. Langkah berikutnya silahkan sobat salin kode html dibawah dan letakan di atas kode </head> di template blogspot sobat.

<!--[ 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>

Kemudian sobat tinggal simpan saja pengaturan widget Notifikasi di template blogger yang sudah sobat terapkan.

Min kok gak bisa di simpan muncul teks eror ?.

Oke solv, jangan panik jika kode tersebut gak bisa di simpan itu karena  terdapat kesamaan id. Jadi sobat harus membuat id yang unik supaya tidak memiliki kesamaan.

maka yang harus sobat lakukan ialah ubah HTML0 jadi HTML1 . Coba sekarang sobat klik simpan .

Apakah masih eror ?.

Jika masih eror silahkan ubah dan naikin lagi nilai angka 1 Di HTML1 menjadi lebih tinggi. Kemudian klik simpan lagi. Terus menerus hingga template bisa disimpan.

Jika sudah berhasil di simpan template blogger nya, mari kita buat isi pada widget notifikasi di blogspot yang sudah berhasil di buat.

Caranya :

Masuk ke tata letak blogger sobat, kemudian cari widget dengan nama NOTIFIKASI. Seharusnya widget tersebut muncul di posisi paling atas.

Jika sudah ketemu silahkan sobat klik edit, dan sobat tinggal isi saja pesan notifikasi yang ingin di munculkan di widget Tersebut.

Baiklah sobat sekalian dulu artikel kali ini Cara Membuat Widget Notifikasi Di Blogger Seperti Milik Template Median Ul. semoga artikel yang saya bagikan bermanfaat sampai jumpa di lain waktu dan kesempatan di artikel yang berbeda.

Source Kode Desain By JagoanDesain.Com

https://median-ui.jagodesain.com