Beranda article dan kesehatan tips dan trik

Cara Mudah Membuat Popup di blogger

Oleh Sahrul Id
Berbagi :
Cara Mudah Membuat Popup di blogger Credit: Enun Solutions
Cara Mudah Membuat Popup di blogger

Hallo gaes kali ini saya akan membagikan cara membuat popup di blog, jadi kalian yang ingin membuat promo atau popup untuk kategori apapun, ini cara yang paling mudah .

simak ajah gan.
  • 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/AVvXsEh0qcxqDUl_itRT3hP2nu92TIBcyUxLcO5aHF7NQBDZFCAd5crz0KmNpTDXH8wiLtTCX-MmigD9pYGWLMsKBu76Qwr2g7nZs1zc_h4Ctf8UTBPjW9ZiFyaDXoLRv-3QT_x9Wf7oOHBqtQDP/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/AVvXsEhUIEja6GU0USjdo6qnPA37_Gxr7MFsBkSWjZSnvRIUnRTflopqm3sviaQ5I7R7-ebvCYzxWGwVdZ4WcLxQgu2CnRA2E2CI56-Jg0XCdf1WdBVY6ONX8g61Kpc8M8S2wHm0MbKWh5FEDdZY/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>.
    • <script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
  • 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.

tags : Cara Mudah Membuat Popup di blogger, popup di bloger, code jendal popup di blog

Daftar Isi [Tutup]

    Lebih baru
    Lebih lama