Cara membuat Banner Iklan di blog dengan tombol tutup (Close Button)

Cara membuat Banner Iklan di blog dengan tombol tutup (Close Button) - Trik yang satu ini saya
peroleh ketika saya jalan-jalan alias blogwalking ke pelajaran-blog.blogspot.com. Bermanfaat banget nih, pikir gue. Kenapa? yah karena ini bisa untuk promosi iklan atau meletakkan iklan kita sendiri di blog. Keren kan kalo iklan kita muncul terus ada tombol tutup (close button) nya. Jadi pembaca bisa menutup iklan itu kalo pembaca tidak menginginkan iklan tersebut tampil dan itu akan membuat pembaca menjadi semakin nyaman berada di blog kita karena tidak akan terganggu dengan iklan yang muncul di halam blog.

Misalkan saja saya mau buat iklan tentang jualan minuman jahe merah saya, ntar tinggal buat bannernya aja, bisa pakai jasa pembuat banner gratisan yang banyak bertebaran di internet atau bisa membuat sendiri pakai software gratis pembuat animasi gif.

Yuk sekarang langsung praktek aja..kelamaan ceritanya..hehehe...

Langkah-langkahnya yaitu:
1. Login dulu ke blogger
2. Pilih Dashboard >> Tempalte >> Edit HTML
3. Jangan lupa centang Expand Widget Templates
4. Cari Kode berikut ]]></b:skin>
5. Letakkan tepat di BAWAH kode tersebut script berikut



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
 
6. Letakkan tepat di ATAS kode ]]></b:skin> script 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;
}

7.  Terakhir simpanlah template tersebut.

Apakah sudah selesai? belum..karena masih ada langkah terkahir yaitu meletakan url gambar atau script iklan yang akan kita tampilkan nantinya.. Caranya yaitu:

1. Pilih Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript
2. Setelah selesai silahkan masukkan kode berikut.

<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>
<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>


3. Silahkan ganti kode berwarna merah dengan script iklan yang ingin di tampilkan atau ganti saya tulisan warna biru dengan url gambar yang ingin di tampilkan..
4. Selesai dan lihatlah hasilnya seperti di sini.

Semoga bermanfaat yah....