Wednesday, November 8, 2017

√ Cara Gampang Menciptakan Iklan Melayang Di Tengah Blog Dengan Tombol Close 2

Pada Artikel ini aku akan membas mengenai Cara Praktis Membuat  Iklan Melayang di Tengah Blog dengan Tombol Close 2x. Yang sering juga di sebut dengan Float Top Bar, sebuah jendela kecil yang muncul dari atas halaman setiap kali kita mengunjungi Website atau Blog. 




  
 Jika anda ingin memasangnya juga silahkan ikuti langkah-langkah pembuatannya :
1.  Login ke Blogger

2.  Masuk ke Tab Layout


3.  Pilih Elemen Halaman


4.  Tambah Gadget Pilih HTML / JAVASCRIPT


5.  Dan copy instruksi di bawah ini kedalamnya
<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/j4vascript">
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="j4vascript:showHideGB()">
.:[Close][Klik 2x]:.</a>
</div>
<center>
Masukan Kode iklan atau Gambar yang anda inginkan di sini
</center>
<script type="text/j4vascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

Untuk tulisan berwarna ungu, sanggup anda ganti dengan instruksi iklan, gambar ataupun goresan pena yang diinginkan, goresan pena berwarna biru adalah text bacaan pada tombol close. Sebenerna goresan pena berwarna biru adalah penjebakannya, alasannya iklan akan close hanya sekali klik saja, jadi apabila 2x klik otomatis iklan juga ter klik.

Update: 
  • Tulisan berwarna ungu adalah jarak kotak iklan. Bisa anda tambahkan instruksi right: ..px   atau left: ..px atau bottom: ..px (titik-titik sanggup anda ganti dengan angka)
  • Tulisan berwarna kuing (z-index:+1000) yaitu posisi iklan. z-index:+1000 posisi iklan berada di atas, sanggup anda ganti menjadi y-index:+1000. 
  • Kode berwarna hijau yaitu instruksi warna garis pinggir kotak iklan (border). Anda sanggup melihat instruksi warna Cara Praktis Membuat  Iklan Melayang di Tengah Blog dengan Tombol Close 2x. aku berharap anda memberi kritik atau saran mengenai artikel aku ini dengan cara memberi komentar.

“Akhir kata aku ucapkan terimakasih banyak atas kunjungan anda ke blog aku ini, jangan lupa share dan subscribe artikel ini ya.






Sumber http://webmakalahku.blogspot.com