Sudah mencoba artikel "Membuat Wadah Iklan Tiba-tiba Muncul (Ads Popup Container)"? Nah, artikel ini merupakan update dari artikel sebelumnya yang tentunya dengan tampilan baru dan lebih segar. Walaupun masih menggunakan script yang sama tapi sekarang Blogger TuneUp menggunakan sentuhan yang lebih bagus pada kode CSS versi 3. Penasaran?
Menambahkan Ads Popup - Iklan Yang Muncul Tiba-tiba pada Blogger
Langkah 1Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" dan pilih type "HTML/JavaScript"
Langkah 4
Masukan kode dibawah ini pada bagian konten
<style type="text/css">Langkah 5
#topbar {
position:absolute;
z-index: 100;
padding: 8px;
background: #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 15px;
-moz-box-shadow: #600 0 2px 10px;
margin:0 auto 10px;
float:left;
color:rgba(0, 0, 0, 0.75);
font-size: 12px;
font-family: Verdana, serif;
text-shadow:0 1px 0 #FFFFFF;
}
#topbar img {
border:none;
}
#topbar .tombol {
margin:0;
padding-bottom:5px;
text-align:right;
}
#topbar .tombol button {
color:#FFFFFF;
border: solid 1px #494949;
margin:0;
padding:2px 15px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#454545));
background: -moz-linear-gradient(top, red, #454545);
}
#topbar .isi_iklan {
background-color:#FFFFFF;
margin:0;
padding:4px;
width: 468px;
border: 1px solid #999;
}
</style>
<script src="http://henscripts.googlecode.com/svn/trunk/popup/jspopupv1.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div class="tombol"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><button>Tutup</button></a></div>
<div class="isi_iklan">
<!-- Kode Iklan-->
</div>
<a style="text-decoration: none; color: #00f; text-align:right; display: block; font-size: 10px;" href="http://modification-blog.blogspot.com/2010/09/ads-popup-iklan-yang-muncul-tiba-tiba.html" target="_blank" title="Ads Popup">Widget by <span style="color: #333;">Blogger</span> <span style="color: #f00;">TuneUp</span></a>
</div>
Klik tombol simpan dan preview blog anda... (Hmm... Baguskan?)
Keterangan:
Untuk setting JavaScript silahkan baca pada artikel sebelumnya disini
Sedangkan untuk mengatur kode CSS yang baru, baca penjelasan dibawah ini.
Perhatikan kode dibawah ini (lihat langkah 4):
#topbar .isi_iklan {
background-color:#FFFFFF; Untuk mengubah warna latar (background)
margin:0;
padding:4px;
width: 468px; Untuk mengatur lebar wadah iklan, ini disesuaikan dengan lebar iklan yang akan digunakan
border: 1px solid #999; untuk untuk mengatur garis tepi wadah iklan
}
Kode pada artikel ini berbeda dengan artikel sebelumnya tetapi masih tetap menggunakan JavaScript yang sama.Selamat mencoba dan semoga berhasil. Happy Blogging :)
