Kang Niam Blog

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:

]]></b:skin>

Bila dah ketemu tambahkan kode Css dibawah ini tepat diatasnya:

#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.

<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.

bottom:80px; left:120px;

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

 



 

Langkah1
silahkan buat halaman baru di blogger.
Masuk dasboard blogger >> klik Menu Posting >> Edit entri >> Laman Baru.

Langkah2
Buat Halaman Beri judul Misal daftar isi dan seting Mode HTML bukan Compose ya pada saat akan posting halaman.

Langkah3
Copy paste kode dibawah ini

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://niammuddin.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

ganti url http://niammuddin.blogspot.com dengan url blog kamu

Langkah4
Setelah itu terbitkan.

lihat hasilnya, jreeng.. tara...! menakjubkan bukan.

apabila sobat ingin membuat menu Dafttar isi tinggal copy saja URL postinga tadi, dan masukkan ke dalam URL menu yang akan kita buat.

Oke selesai itu saja semoga berguna dan bermanfaat untuk teman-teman semuanya.
Bila kurang jelas bisa tanyakan di komentar, nanti kita bahas sama-sama.

Update 07/10/2011

Tutorial membuat daftar isi sudah diperbaiki setelah kemaren mengalami masalah dengan kodenya.

Special thanks untuk abu farhan atas scriptnya.