Cara Membuat Popup Box Notifikasi Di Blog
Popup Box sering digunakan untuk melakukan promosi ataupun untuk membuat subscribe box agar pengunjung dapat melakukan subscribe / berlangganan di blog kita dengan menggunakan cara ini tentu saja dapat mempermudah pengunjung untuk mendapatkan info terbaru yang ada di blog kita apakah ada promo atau sesuatu yang baru.

Pada popup box ini saya tidak menggunakan cookies jadi sobat bisa ubah lagi kodenya agar sesuai dengan apa yang diharapkan dengan sobat nantinya.

Cara Membuat Popup Box Notifikasi Di Blog

1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > Kemudian tambahkan kode dibawah ini sebelum ]]></b:skin> atau </style>
.fixed-promo{background:#fff;position:fixed;padding:25px;top:15%;transition:all .3s ease-in-out;max-width:700px;left:25%;z-index:99;border-radius:10px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)}.flashlight2{position:fixed;z-index:98;top:0;height:100%;width:100%;background:rgba(255,255,255,0.69);transition:all .3s ease-in-out}.fixed-promo.hides,.flashlight2.hides{display:none}.fixed-promo img{border-radius:10px}a.tombol-f{background:#1a73e8;box-shadow:0 1px 4px rgba(0,0,0,.26);border-radius:5px;color:#fff;padding:8px 14px;font-weight:bold;display:inline-block;margin-top:15px;letter-spacing:.5px;margin-right:8px;text-decoration:none}@media screen and (max-width:480px){.fixed-promo,.flashlight2{display:none}}
2. Kemudian tambahkan kode dibawah ini sebelum <body>
<div class="flashlight"/><div class="flashlight2"/>
<div class="fixed-promo"><img alt="Promo Agustus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrFdGzY82dJ8wn2eZGWE-3_qjbhLymjSh0GwrPGPrrUmRhb75ZNdSgl8_oaTyZQ6uv0zonrVMC2DI3DN4moGcFOOeM-f2JeZlwihN4QGDgqg92ZUKLKP8JOSvW3euUnTCrFjc2oQd9xkCv/s1600/promosi.jpg" title="Promo Agustus"/><a class="tombol-f" href="https://alpukoding.blogspot.com" target="_blank" title="Lihat Promo">Lihat Promo</a><a class="tombol-f close-x" href="javascript:void" title="Tutup">Tutup</a></div>
3. Selanjutnya tambahkan kode dibawah ini sebelum </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".close-x").click(function(){$(".fixed-promo,.flashlight2").toggleClass("hides")})}),$(document).ready(function(){$(".flashlight2").click(function(){$(".fixed-promo,.flashlight2").toggleClass("hides")})})
//]]>
</script>
4. Simpan Tema dan lihat hasilnya

Keterangan :
Kode yang saya tandai bisa sobat ubah menjadi subscribe box atau apapun juga.

See the Pen Promosi by Kang Iyan (@KangIyan) on CodePen.


Mungkin sekian artikel Cara Membuat Popup Box Notifikasi di Blog dan semoga artikel ini sangat bermanfaat bagi sobat semuanya.