Cara Membuat Pop Up Box Banner Iklan di Blogspot

Cara Membuat Pop Up Box Banner Iklan di Blogspot. Untuk pengguna Blogger berikut ini cara membuat iklan melayang untuk platform Blogger.

Pertama :Masuk Ke bagian Edit HTML di dasbor Blogger.

Untuk memudahkan mencari kode Tekan CTRL +F pada keybord sobat dan akan muncul kolom Search lalu

Masukkan Kode : ]]></b:template-skin>di kolom Search Tersebut kemudian tekan enter.

Masukkan Kode CSS berikut ini Tepat di Atas Kode ]]></b:template-skin> :

/* 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(http://3.bp.blogspot.com/-7A606zdRAD8/U10SZcdl9QI/AAAAAAAAE3o/V_9HMnP0fLQ/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}

Dan SAVE template sobat.

Kedua : Tekan kembali CTRL+F tadi lalu masukkan pada kolom search </body>dan tekan enter.

Setelah ketemu masukkan Kode berikut ini tepat di atas 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="http://1.bp.blogspot.com/-Eq--wpK-4ko/U10QpJeZN6I/AAAAAAAAE3c/0Qb_BlUQUzg/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 ] -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Kemudian ganti Link, Url gambar, dan judul sesuai dengan punya sobat.

Untuk mendapatkan url gambar. Cukup sobat upload gambar ke artikel seperti biasa ketika membuat posting. Link yang dimaksudkan diatas adalah url tujuan Popup nya. Judul adalah judul dari gambar Popup tersebut.

Setelah semuanya di ganti sesuai kebutuhan, silahkan SAVE template. Dan silahkan cek dengan mengunjungi blog sobat. Bila berhasil maka akan muncul POPUP dengan gambar dan url sesuai settingan.

Popup yang di buat tersebut akan muncul di setiap halaman blog.

Cukup mudah bukan untuk membuat iklan Popup di Blogger ? Untuk pengguna wordpress telah tersedia berbagai Plugin Popup mulai dari yang gratis sampai yang berbayar.

Terima kasih telah berkunjung.