Saturday, February 12, 2011

Cara Membuat Iklan Melayang dengan Tombol Close


Mungkin rekan blogger sudah pernah melihat tutorial ini sebelumnya di blog lain, setahu saya ada yang lebih rumit menggunakan banyak script kode html, tapi sekarang sobat blogger semua bisa dengan mudah membuatnya. Di sini saya akan mencoba untuk memberikan tips yang lebih mudah dan sangat sederhaba bahkan bagi anda blogger yang baru mengenal pengkodean berupa html,javascript,dll pasti bisa melakukannya.
Oke gan,lanjut ke langkah-langkah berikut :

 
  1. Login Ke Blogger.com dengan Akun dan Password anda tentunya
  2. Masuk ke Tab Rancangan
  3. Pilih Elemen Laman
  4. Kemudian Tambah Gadget Pilih dengan memilih HTML / JAVASCRIPT
  5. Dan Copy dan Paste kode di bawah ini kedalamnyaWindow yang terbuka

<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgwnPyw48zbeyo5Od61T3mKfbggfhwxzDqEULRy3q4thrKv8zUUhfUUj9fXqK5MkSzEobTYbyv9ZF2JwNjZw4YsRRrMSJTMX3cs85F349FM4gi8KMKWllzx-IkyGR4kW0MUx1MrbMfyME/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgwnPyw48zbeyo5Od61T3mKfbggfhwxzDqEULRy3q4thrKv8zUUhfUUj9fXqK5MkSzEobTYbyv9ZF2JwNjZw4YsRRrMSJTMX3cs85F349FM4gi8KMKWllzx-IkyGR4kW0MUx1MrbMfyME/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>


<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Masukkan Kode iklan atau Gambar yang anda inginkan di sini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>


    6. Simpan

Mudah bukan ?
Good Luck !!! Pasti berhasil :)

0 comments:

Post a Comment

Baca Juga...

 

Just Simple Blog. Copyright 2013 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com