Cara Membuat Floating iklan Pada Blogger

Cara Membuat Iklan Melayang Floating dengan CSS Tanpa JQuery supaya lebih enteng.
halo sobat blogger kembali lagi kali ini kang niam ingin bagi-bagi tips buat kawan-kawan yang setia berkunjung ke niamblog, sebelumnya saya pernah posting Cara membuat iklan melayang dengan javascript kali kita akan membuat iklan melayang dalam bahasa gaulnya floating atau apalah saya juga gak mudeng, mungkin sobat pernah membuat iklan melayang, nah disini mungkin cara membuatnya agak sedikit berbeda dengan cara membuat iklan melayang yang banyak dilakukan para sobat blogger, biasanya kita membuat iklan melayang itu menggunakan javascript jquery.js maka tips kali ini adalah hanya dengan CSS saja dan sedikit javascript plus HTML, yang pasti tidak menggunakan jQuery yang memberatkan blog saat di load.

Langkah1
Masuk Dasboard >> Rancangan >> Edit HTML lalu Expand Widget Templates

Langkah2
Cari Kode seperti ini:

1

]]></b:skin>

Bila dah ketemu tambahkan kode Css dibawah ini tepat diatasnya:

1
2
3
4
5
6
7
8
9
10
11

#floating-ads {
position:fixed;_position:absolute;bottom:80px; left:120px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
.bgfloat{}

Bila dah selesai Save Template kamu.

Langkah3
Sekarang masuk Rancangan >> Elemen Laman >> tambahkan Gadget >> pilih Javascript/HTML.

Lalu masukkan kode dibawah ini didalamnya.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script language="javascript">
function closeTopAds() {
document.getElementById("floating-ads").style.visibility = "hidden";
}
</script>
<div id="floating-ads">
<div align="center" class="bgfloat"><img align="absmiddle" onclick="closeTopAds();return false;" src="http://lh6.ggpht.com/_IjrRiI_bVb0/SxtblET-xfI/AAAAAAAACVQ/1i0rufnJAP4/minimize.png" style="cursor: pointer;" />
</div>
KODE IKLAN DISINI
</div>

Langkah4
Save pekerjaan kamu.
! Letakkan kode iklan sobat pada tulisan “Kode Iklan Disini”, dan untuk mengatur iklan sesuai dengan template kamu silahkan diserasikan kode CSSnya dengan Template sobat, karena biasanya ada template yang berbeda.
ini kode yang perlu kamu rubah bila iklannya kurang ke kanan atau ke kiri atau kebawah atau keatas.

1

bottom:80px; left:120px;

Selamat mencoba dan semoga tips yang saya berikan bermanfaat untuk sobat blogger.