Cara Membuat Popup Iklan dengan Tombol Close

Cara Membuat Popup Iklan dengan Tombol Close - Assalamualikum sobat blogger, alhamdulillah bisa update lagi kali ini saya akan posting mengenai bagaimana cara membuat popup Iklan dengan tombol close/tutup. Mungkin biasanya kalian lihat iklan dengan tombol close terdapat pada iklan melayang saja, tapi disini saya memberikan sedikit tutorial buat kalian Cara Memasang Popup iklan dengan Tombol Close , oke enggak usah lama-lama langsung aja kita menuju tutorial berikut adalah tutorialnya

Langkah pertama masuk dulu ke akun blogger kalian masing-masing, tapi jangan masuk akun saya ya...?? hehehe
Kedua cari kode ]]</b:skin>
Jika sudah ketemu taruh kode kode di bawah ini tepat di bawah kode tadi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>


Selanjutnya tepatkan kode di bawah ini tepat di atas kode ]]</b:skin>

#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}
.pb-popup{
display:none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999; /* CSS3 */
-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
border-radius:3px 3px 3px 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
}
fieldset {
border:none;
}  

Setelah selesai menaruh kode tadi klik SIMPAN template

nah selanjutnya adalah cara memasang iklan agar tampilan iklan ada tombol close atau tertutup, caranya sangat mudah sekali, pilih Dasbor lalu klik opsi dan pilih tata letak, lalu klik tulisan tambahkan gadget atau add gadget dan pilih HTML/javascript, lalu masukan kode di bawah ini

<div id="pb-box" class="mrpujiajadeh-popup">
<br /><span style="color: rgb(204, 0, 0);">Ingin membuat iklan seperti di bawah ini? tunggu tutorialnya beberapa hari lagi ya sob :D.Klik tanda x untuk menutup iklan.</span><p align="right"><a href="#" class="close">
<br/><small><u>[x] Tutup Iklan</u></small></a></p>
masukan kode iklan,gambar,video atau yang lainnya
</div>

<script type='text/javascript'>
$(document).ready(function() {
$('a.pb-window').click(function() {

//Getting the variable's value from a link
var pbBox = $(this).attr('href');

//Fade in the Popup
$(pbBox).fadeIn(300);

//Set the center alignment padding + border see css style
var popMargTop = ($(pbBox).height() + 24) / 2;
var popMargLeft = ($(pbBox).width() + 24) / 2;

$(pbBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);

return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .mrpujiajadeh-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
KET: kode yang berwarna merah ganti dengan script iklan,gambar,video atau yang lainnya terserah kalian saja.

Demikian postingan saya mengenai Cara Membuat Popup Iklan dengan Tombol Close,semoga postingan yang saya berikan kali ini dapat bermanfaat buat kalian. Wasalamuaikum

Tweet