Cara Membuat PopUp Box berisi Banner di Blog

Buat teman-teman yang suka menampilkan Banner menggunakan PopUp Box, boleh coba nih trik di artikel ini.

Sebenarnya ada beberapa spot yang bisa kita gunakan untuk menampilkan sebuah Banner didalam halaman blog diantaranya :

Header
Dibawah Navigasi Menu
Dibawah Judul Artikel
Ditengah Artikel
Bawah Artikel
Sidebar atas
Sticky Sidebar
Footer

Kalau kamu lebih suka menampilkan Banner dimana? Saya sendiri lebih nyaman menyimpan Banner di Sidebar Blog nih teman-teman.

Tapi di Artikel saya kali ini, saya akan menampilkan Box Banner menggunakan perintah PopUp.

Meskipun banyak blogger yang tidak menyukai cara ini, tapi saya akui trik ini telah mengundang banyak pengunjung untuk fokus melihat Banner Bos yang muncul sebelum membaca artikel didalam blog.

Box Banner PopUp ini biasanya saya gunakan untuk menyambut pengunjung ketika hari raya nasional, seperti Hari Raya Lebaran, Hari Ibu, Hari Anak Nasional, Hari Pahlawan, Ucapan Tahun Baru dan masih banyak lagi.

Tapi kenapa tidak saya gunakan untuk keperluan Promosi ya? Ada yang tahu alasannya?

Beberapa waktu yang lalu saya pernah menggunakan Banner PopUp ini untuk keperluan Promosi, dan hasilnya sangat baik jika ada visitor yang membaca artikel melalui desktop.

Dan sayangnya Banner PopUp Box ini tidak bisa tampil baik jika visitor datang menggunakan Smartphone. Oleh karena itu, pada kolom CSS dibawah, sudah saya sisipkan Media Rules agar Banner Box ini tidak tampil pada Smartphone.

Coba teman-teman klik dulu tombol DEMO dibawah ini untuk melihat hasilnya.

Cara Membuat PopUp Banner di Blog

Apabila kamu tertarik untuk menampilkan Banner PopUp ini, kamu bisa ikuti langkah-langkahnya dibawah ini yaa teman-teman.

Pastikan Teman-teman sudah Login kedalam Dashboard Blognya yah.
Lalu buka Menu Tema dan pilih Edit HTML
Salin CSS dibawah ini, dan letakkan sebelum <style> yang mana saja yang kamu lihat.

<style type="text/css">
/* PopUp Box CSS */
@media (max-width:800px){#WiraBox{display:none}}
#WiraBox{position:fixed!important;position:absolute;top:-700px;left:39%;margin:0 0 0 -182px;font:normal Dosis,Georgia,Serif;color:#333;-webkit-box-shadow:0 0 10px #333;-moz-box-shadow:0 0 10px #333;box-shadow:0 0 10px #333;background:#fff;z-index:99999;}
#WiraBox a.close-popup{position:absolute;top:-25px;right:0;font:25px Arial,Sans-Serif;text-decoration:none;text-align:center;color:#f2f2f2;cursor:pointer}
#WiraBox a.close-popup:hover{color:#fff}
#WiraBox a.close-popup:active{opacity:0}
#WiraBox div.black-bg{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ZProsa9O4SN7gTbKrzXH55rLQtIaUnc-nTuXdl5RdreWGZ8f6IYgNWtSH2CCJX2UYZCUn9HdIi7zhXQ8jW3BLHrx6De5daQe5wrkPMvw9SWZ_ZJFtVvZsw1wE039P6H3YrEtAsxRnmpc/s1600/ajax-loader-apps.gif) no-repeat center;position:fixed;top:0;left:0;width:100%;height:100%;opacity:.6;z-index:-500}
#WiraBox div.gambar-space{border:5px solid #fff;position:relative;background:#fff;border-bottom:0}
#WiraBox div.gambar-space img{width:600px;height:400px}
</style>

Simpan Template, lalu Salin kembali Kode HTML dibawah ini dan letakkan tepat sebelum kode </body>

<!-- jQuery Popup Banner Box [ Begin ] -->
<div id="WiraBox">
<a class="close-popup" href="#">&#215;</a>
<div class="black-bg kaluar"></div>
<div class="gambar-space">
<a href="#link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqOEHUUphX0Twv8ZLCOKBpd1nkGsS3dY7YSEQXwPl7gZosWeFEVp2VdkrKFDJ9Yle5BOd2JSt2Eeud6XLnGKnkvCyRutve2_zJFZLlHYWcjGg0fvWoN68WFPh6u_QpS43VlYF97aCyFGaN/s1600/SPACE-PROMOTE-600X400-PIXEL.png" alt="Judul"/></a>
</div>
</div>

<script type='text/javascript'>
// JavaScript Popup Banner Box
$(window).bind("load", function() {
$('#WiraBox').animate({top:"100px"}, 2000);
$('a.close-popup, .kaluar').click(function() {
$(this).parent().fadeOut(500);
return false;
});
});
</script>
<!-- jQuery Popup Banner Box [ End ] -->

Kode yang saya tandai pada syntax HTML diatas adalah URL dan Link Gambar. Untuk Menampilkan gambar yang sesuai silahkan teman-teman gunakan ukuran 600x400 pixel dan menggunakan ekstensi JPG/PNG.

Untuk mengaktifkan PopUpnya, silahkan teman-teman sisipkan pemanggil JQuery dibawah ini dan letakkan tepat sebelum kode </body>.

Simpan Template, dan lihat hasilnya didalam blog kamu.

Banner PopUp ini akan selalu tampil setiap kali pengunjung membuka Artikel yang ada didalam blog teman-teman.

Untuk membatasinya, silahkan teman-teman tambahkan Kode Tag Kondisional pada Kolom HTML diatas.

Kamu bisa sesuaikan Tag Kondisionalnya agar tampil pada halaman-halaman tertentu saja sesuai dengan keinginan kamu.

Bagi yang belum tahu tentang apa saja sih Jenis Tag Kondisional yang ada didalam blog itu? Teman-teman bisa baca tutorial tentang Tag Kondisional pada link dibawah ini.

Kedua Link Tag Kondisional diatas sebenarnya sama fungsinya, hanya saja untuk versi terbarunya lebih mudah dan lebih simple.

Nah Cukup sekian dulu artikel tentang Banner PopUp yang saya bagikan kepada teman-teman. Semoga trik ini dapat menambahkan kreatifitas teman-teman untuk Modifikasi Template Blog.

Jangan lupa untuk memberikan pendapat atau kritikan dari artikel ini pada kolom komentar dibawah ini.

Jika dirasa artikel-artikel yang ada di blog ini sangat menarik bagi teman-teman, silahkan masukkan alamat email teman-teman kedalam kolom Berlangganan Gratis dibawah ini agar selalu mendapatkan notifikasi ketika saya posting artikel terbaru.