√ Widget Notifikasi Teks Sederhana Seperti Median UI

Widget Notifikasi Teks Sederhana Seperti Median UI

March 13, 2022

Widget Notifikasi Teks Sederhana Seperti Median UI - Hallo semua pada kali ini saya akan share kepada kalian tutorial membuat widget sederhala ala median ui.

Untuk widget ini tentu kalian sudah tau seperti apa kalau belum tau jadi widget nya seperti ini bisa kihat pada gambar yang ada di bawah ini :

Dari kalian mungkin ingin membuat widget seperti itu pada blognya bisa coba tutorial berikut ini.

Kalian jika sudah memakai atau membeli widget ini tentu tidak perlu membuat nya lagi, langsung aja apabila kamu belum beli template nya langsung aja di beli.

Widget Notifikasi Sederhana Ala Median UI

Langkah petama kamu masuk ke Blogger > Edit HTML kemudian masukkan CSS berikut ini pastikan taruh di atas kode </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}

Kemudian Masukkan kode HTML berikut di atas kode </header> pada template kalian jika terjadi error ganti HTML0 menjadi HTML1. Setelah itu save dan lihat hasilnya pada template kalian.

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