Cara Membuat Fitur Notifikasi di Postingan Blogspot

Saya membuat fitur notifikasi ini karena ada kebutuhan untuk memberikan informasi kepada semua pembaca yang membuat akun membership di web ini, Daily Blogger Pro.

Dengan adanya fitur / plugin notifikasi ini, saya bisa memberitahu bahwa setelah membuat akun member di web ini, kamu harus menuliskan nomor aktif, harus nomor sendiri, jangan mencatut / mencuri nomor orang lain untuk dipakai di akun member serta dilarang melakukan tindakan spam order atau bahkan mengupload bukti pembayaran palsu.

99% mengikuti aturan yang saya buat, hanya 1% user saja yang iseng melakukan spam order dan bukti transfer fiktif yang akhirnya akun user 1% tersebut, saya banned permanen.

Cara Membuat Plugin Notifikasi di Halaman Postingan Artikel Blogspot

Kalau kamu tertarik untuk membuat fitur notifikasi seperti ini silahkan ikuti panduan yang telah saya sediakan di konten ini ya:

1. Buka Editor Postingan HTML Blogspot

Fitur ini hanya bisa diterapkan pada editor postingan mode html saja ya, jadi silahkan salin kode css dan html yang sudah saya buatkan di konten ini.

2. Salin Kode CSS, HTML, dan JS Fitur Notifikasi Blogspot

Silahkan salin kode sumber css dan html dibawah ini ya:

Kode CSS

<style>
.alerthijau {
    padding: 20px;
    background-color: #6abc6e;
    color: white;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}
.closebtn:hover {
    color: black;
}
</style>

Kode HTML

<div class="alerthijau">
<span class="closebtn" onclick="this.parentElement.style.display='none'">&times;</span>
  <small><strong>Penting:</strong><br> 1. Harap isi nama lengkap dan nomor telepon aktif milik Anda agar akun bisa diaktivasi oleh sistem membership web kami, terimakasih.<br>2. Sesuai ketentuan syarat poin e di web kami; jika kami mendapati bahwa Anda menggunakan kontak palsu atau melakukan spam, maka akun Anda (termasuk akun Gmail) akan diblokir permanen tanpa pemberitahuan lebih lanjut. </small>
</div>

Kode JS

<script>
function closeAlert(id) {
    var el = document.getElementById(id);
    if (el) {
        el.style.display = "none";
    }
}
</script>

3. Publish Postingan & Fitur Notifikasi Muncul!

Anggap kamu sudah menyalin kode sumber css dan html di poin sebelumnya dan menerbitkan postingannya. Tinggal buka postingan, maka kamu bisa melihat fitur notifikasi sudah muncul di konten artikelnya. Ini ilustrasi fitur notifikasi dengan tombol close yang bisa kamu lihat dan coba kamu klik:

Setelah tombol x atau close di klik, maka, notifikasi akan menghilang. Kalau di refresh, notifikasinya akan tetap muncul di halaman postingannya.

Cukup mudah, bukan? Semoga plugin blogspot ini bermanfaat buat kamu ya.