widget notifikasi teks sederhana

widget notifikasi teks sederhana mirip template median ui

Hallo semua pada kesempatan kali ini saya akan membagikan widget notifikasi teks sederhana seperti yang di gunakan pada blog ini tepatnya ada di atas header.

disclaimer di awal widget ini adalah bawaan template yang saya gunakan yaitu median-ui buatan jagodesain.com jadi bukan buatan saya oke.

saya membuat tutorial ini karena ada beberapa yang reguest minta di buatkan dan kebetulan sudah lumayan lama saya tidak update artikel karena sibuk dengan pekerjaan di luar blogger jadi belum ada ide untuk memposting yang lain.

dan sebenarnya tidak sulit untuk membuat widget ini cukup paham css dasar saja, namun karena uda ada gitu ya saya copas aja biar cepat.

untuk demonya silakan klik tombol di bawah ini, ok buat kalian yang ingin mencobanya mari simak caranya.

Widget Notifikasi Teks Sederhana

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau 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}

dan letakkan kode ini di atas <header jika tidak bisa save muncul error ubah HTML0 menjadi HTML1 dan jika masih error naikin lagi anggka 1 dan seterusnya sampai bisa di save, alasannya karena id tersebut harus unik tidak boleh sama jika sama maka akan muncul pesan error dan tidak bisa di save.

<!--[ 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 silakan klik simpan, dan edit melalui tata letak cari yang namanya Notification harusnya ada di posisi paling atas.

ok jadi sekian widget notifikasi teks sederhana yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

Source code:
https://median-ui.jagodesain.com