Kamis, 06 Desember 2012

Cara Membuat / Memasang Popup Iklan dengan Tombol Tutup [X]

Trik Membuat Baner Iklan dengan Tombol (Anchor Link) Tutup / Close Button

membuat show hide link anchor jquery banner widget tutup iklan.
Malam ini seperti ada Pelajaran Blog buat agan saya akan berbagi trik seputar membuat baner iklan popup dilengkapi dengan tombol tutup atau close button.

Namun tidak seperti 'trik membuat iklan popup jquery' seperti artikel yang lain,kali ini widget yang akan kita ciptakan ini dalam posisi 'menetap' namun akan hilang saat kita klik close button-nya.
Yah,kurang lebih seperti iklan pada situs YouTube pada halaman awalnya namun hilang saat kita klik anchor link close-nya.

Bagaimana sob,tertarik untuk mencoba widget yang satu ini? (sangat menghemat tempat,actually)
Dengan sedikit kreasi,dari script yang akan kami bagikan ini,sobat bisa memodifikasi sesuai keinginan.

Langkah Cara Membuat Show Hide Link Anchor pada Widget

Pertama,sobat pergi ke Dashboard lalu pilih Template (gb.1),kemudian pilih Edit HTML (gb.2) dan klik Proceed (gb.3)

membuat popup jquery close button.
gb.1

show hide widget ads
gb.2

cara membuat iklan dengan tombol close.
gb.3

Lalu contreng Expand Widget Templates (gb.4)


gb.4

Kemudian cari kode berikut:
]]></b:skin>
Jika sudah sobat ketemukan 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'/>
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;
}
Lalu simpan templates.

Nah,selanjutnya,kini kita tinggal menciptakan widget iklan yang akan ditampilkan.
Langkahnya sangat mudah,pertama pilih Dashboard lalu Layout (gb.5) kemudian klik Add a Gadget (gb.6) dan pilih HTML/Javascript (dalam mode html bukan rich) (gb.7)

how to create ads with close button popup.
gb.5

membuat link anchor show hide widget.
gb.6

membuat baner iklan dengan close button.
membuat iklan dengan tombol close.
gb.7

Dan letakkan 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>
**Kode yang berwarna merah,sobat bisa ganti sesuai keinginan,bisa gambar (baca kode cara meletakkan gambar pada blog),video,iklan atau html maupun javascript apa saja.
Menarik bukan? selamat mencoba ya sob !!

Tidak ada komentar:

Affiliate Program

 
© Copyright 2015 Blog SEO Blogger | All rights reserved powered by Blogger.com | Template by o-om.com - zoomtemplate.com