Cara Menciptakan Popup Box Berisi Banner Di Blog

Minggu, 23 April 2017

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

Sebenarnya ada beberapa spot yang sanggup 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 kau lebih suka menampilkan Banner dimana? Saya sendiri lebih nyaman menyimpan Banner di Sidebar Blog nih teman-teman.

Baca juga: Cara Membuat Random Banner di Sidebar Blog

Tapi di Artikel saya kali ini, saya akan menampilkan Box Banner memakai 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 saat hari raya nasional, ibarat 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 kemudian saya pernah memakai Banner PopUp ini untuk keperluan Promosi, dan akhirnya sangat baik kalau ada visitor yang membaca artikel melalui desktop.

Dan sayangnya Banner PopUp Box ini tidak sanggup tampil baik kalau visitor tiba memakai Smartphone. Oleh alasannya yakni itu, pada kolom CSS dibawah, sudah saya sisipkan Media Rules semoga 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 kau tertarik untuk menampilkan Banner PopUp ini, kau sanggup 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 kau 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/AVvXsEjetnWahWFMc1nIk16UnPJzlKnvVUdKAqCSa2-UYt3QMzabLnmi0j6a2FsPRruWSNDrGE4rVKrPZ200GS25neQ-1gOag1ei6QqoChmHYON9BDxa7ZKv-PBcOnrVOFK-jVn3SXbJUer01SFD/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, kemudian Salin kembali Kode HTML dibawah ini dan letakkan sempurna sebelum instruksi </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/AVvXsEiaUrICroXu0cbciL68yHd9Ivqjzb5PpC061zrbrFqpBj_Isar8hMSRTo9zXFyg4RgEbeiCBLDenpt9VetLW_wBUYucJpfP6xMHE9GENDZl-AQKCdmEVYOJRBOFl1fKu_zs4Mj4wub2YACS/s1600/SPACE-PROMOTE-600X400-PIXEL.png" alt="teman yang suka menampilkan Banner memakai PopUp Box Cara Membuat PopUp Box berisi Banner di Blog"/></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 yakni URL dan Link Gambar. Untuk Menampilkan gambar yang sesuai silahkan teman-teman gunakan ukuran 600x400 pixel dan memakai ekstensi JPG/PNG.
• Untuk mengaktifkan PopUpnya, silahkan teman-teman sisipkan pemanggil JQuery dibawah ini dan letakkan sempurna sebelum instruksi </body>.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
• Simpan Template, dan lihat akhirnya 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 sanggup sesuaikan Tag Kondisionalnya semoga tampil pada halaman-halaman tertentu saja sesuai dengan cita-cita kamu.

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

Baca juga:
Tag Kondisional Versi Lama
Tag Kondisional Versi Terbaru

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

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

Jangan lupa untuk menawarkan 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 semoga selalu mendapat notifikasi saat saya posting artikel terbaru.

Share This :