Cara Membuat Popup Iklan dengan Tombol Close

Cara Membuat Popup Iklan dengan Tombol Close ini terinspirasi seperti youtube. Kalau sobat berkujung ke www.youtube.com, pas pertama kali masuk sobat akan disuguhi iklan popup dibawah header berukuran besar dengan tombol close, dan pastinya iklan tersebut membuat gatel jari kita untuk mengkliknya..hee..
Kalau sobat tertarik ingin membuat iklan popup seperti youtube itu, ikuti saja langkah-langkah dibawah ini, tapi hasilnya mungkin tidak 100% mirip, tergantung bagaimana sobat memodifikasinya.

Cara Membuat Popup Iklan dengan Tombol Close :

1. Sobat masukkan kode dibawah ini ke add gadget HTML, prosesnya saya balik untuk lebih meminimalisir kesalahan :

<div id="pb-box" class="mrpujiajadeh-popup">
<br /><span style="color: rgb(204, 0, 0);"></span><p align="right"><a href="#" class="close">
<br/><small><u>[x] Tutup Iklan</u></small></a></p>
<iframe vspace="0" frameborder="2" marginheight="100" marginwidth="100" readonly="true" height="400" src="http://beritamuslimsahih-ahlussunnah.blogspot.com/" hspace="10" scrolling="yes" width="100%" allowtransparency="true"></iframe>
</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>

Kode yang berwarna merah diatas, silahkan sobat ganti dengan kode script iklanya, bisa video,gambar dl.

2. Kemudian cari kode berikut:

    ]]></b:skin>

Jika sudah sobat temukan, tepat dibawahnya letakkan script jquery berikut:

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

3. Setelah itu tepat diatas kode ]]></b:skin>,letakkan barisan css berikut:

#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;
}

4. Sebelum di save, sobat preview terlebih dahulu, kalau terlihat berhasil tinggal di save saja.

Bagaimana sob, keren kan iklan pop up melayang ini ?.
Sampai disini tutorial Cara Membuat Popup Iklan dengan Tombol Close.

Semoga bermanfaat.

Script by : www.pelajaran-blog.blogspot.com

Tweet