Widget Pemberitahuan Teks Sederhana Untuk Blogspot

Codepelajar – Memiliki blog yang populer dan menarik tidak hanya tentang konten yang berkualitas, tetapi juga tentang interaksi yang baik dengan pembaca. Salah satu cara untuk meningkatkan interaksi tersebut adalah dengan menggunakan widget notifikasi pada platform blogging populer seperti Blogspot. Notification widget memungkinkan Anda untuk memberi tahu pengunjung blog tentang pembaruan terbaru, postingan baru, atau informasi penting lainnya dengan mudah.

Cara Memasang Widget Notification Pada Blogspot

Silahkan Masuk Ke dalam Blog > tema > edit html salin css di bawah ini dan tempel di atas kode ]]></b:skin> atau di atas kode </style>

/* Notif Section Source codepelajar.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}

Jika sudah silahkan salin kode dibawah ini dan tempatkan di atas kode </head> jika tidak bisa menyimpan muncul error ubah html0 menjadi html1 dan jika masih sjaa error silahkan ubah angka 1 dan seterusnya hingga berhasil tersimpan, karena id haruslah unik maka dari itu cara ini sangat disarankan.

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

Bila semua sudah tersimpan maka Anda dapat mencarinya di menu Widget dan ubah semau Anda dengan kata Notifikasi.

Oke itulah cara membuat Notifikasi minimalis pada blogspot yang tentunya akan menambah daya tarik pengunjung, maka dari itu terimakasih telah mengunjungi blog codepelajar.