Cara membuat notifikasi sederhana di media ui [all version]

Sumber/Ilustrasi: www.mediabalangan.com

Halo sobat HG, kali ini kita akan bahas topik blog yaitu cara membuat notifikasi sederhana di median ui sebenarnya fitur ini sudah include atau sudah bawaan dari template median ui sampai update terakhir versi 1.6.

Table Of Contents

Kenapa mimim buat tutorial ini  padahal sudah ada pada template tersebut ? ya karena masih banyak yang belum tahu dan ada beberapa teman-teman juga yang ke request untuk dibuatkan tutorialnya, maka dari itu mimin buatin aja artikelnya.

Bagi kalian yang mau menambah wawasan tentang blog, kalian bisa pantengin terus blog ini agar tidak ketinggalan update, atau bisa juga kalian klik tombol subscribe pada notifikasi yang muncul di layar Anda.

Baca Juga:

• Cara mendaftarkan situs ke GSC (google search console) dengan mudah

Oke, tanpa berpanjang lebar mari kita simak tutorialnya.

Langkah Pertama

Silahkan masuk pada halaman dashboard blog milik anda, kemudian pilih menu theme > edit html lalu copy dan pastekan kode css berikut ini diatas kode ]]></b:skin> atau di dalam kode <style>...</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 Kedua

Kemudian, lentakan kode berikut di dalam tag <header>...</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 sudah sesuai, silahakan klik tombol Simpan atau Save, kemudian keluar dari halaman edit blog Anda. 

Pilih menu Tata Letak apabila semua kode tersebut sudah benar dan sesuai dengan tutorial yang saya berikan diatas, maka dihalaman tata letak muncul widget baru dengan nama Notifikasi kalian bisa mengubah isi dari notifikasi tersebut lewat widget tata letak.

Baiklah sekian dulu artikel dari mimin, untuk para sahabat mimin yang sudah baca artikel ini terimakasih banyak dan jika kalian ada pertanyaan atau mau request mau mimin buatin apa lagi tutorialnya silahkan hubungi mimin di form kontak yang telah disediakan.

Source:
www.jagodesain.com