Floating Gadget, Cara membuatnya

Sobat Blogger, Pengertian Floating gadget adalah sebuah nama untuk gadget yang "melayang" pada sebuah halaman web dan mengikuti scroll bar. Contohnya seperti ini :

Anda juga dapat melihat contohnya pada pojok kanan atas halaman ini

Nah, sudah tau kan apa itu Floating Gadget? Selanjutnya, ikuti langkah-langkah di bawah ini untuk memasang floating gadget pada Blog Anda.

Login ke Blogger (bukan Blogger in Draft) > Design/Rancangan > Klik Edit HTML > Lalu cari kode ini :

]]></b:skin>

Kemudian, copas kode ini sebelum atau di atas kode tadi :

#indoblogtrik_item {

position:fixed;_position:absolute;merah:0px; biru:0px;

clip:inherit;

_top:expression(document.documentElement.scrollTop+

document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Pada kode yang berwarna merah, ganti teksnya menjadi :

• Top - untuk posisi di atas
• Bottom - untuk posisi di bawah

Pada kode yang berwarna biru, ganti teksnya menjadi :

• Left -  untuk posisi sebelah kiri
• Right - untuk posisi sebelah kanan

Contohnya seperti ini :

....lute;top:0px; right:0px;

itu artinya, gadget akan berada di sebelah pojok kanan atas, tepat seperti gambar paling atas tadi.

Oke! jika sudah, cari lagi kode ini :

</body>

Lalu pastekan kode ini sebelum atau di atas kode body tadi :

<div id="indoblogtrik_item">

script item disini!!!

</div>

Nah, pastinya Anda sudah mempersiapkan kode yang akan di pasang bukan? jika belum siapkan terlebih dahulu.

Buka website ini, tujuannya untuk memparse kode yang akan Anda pasang tadi.

Pastekan kode Anda dan klik Encode

Nah jika sudah mendapatkan kode yang sudah diparse, kopi kode tersebut dan replace (timpa) dengan kode berwarna merah tadi (script item disini!!!)

Jika masih bingung, lihat script di bawah ini :

<div id='indoblogtrik_item'>

&lt;!-- Histats.com START (html only)--&gt;

&lt;a href=&quot;http://www.histats.com/viewstats/?SID=1601035&amp;f=2&quot; alt=&quot;site hit counter&quot; target=&quot;_blank&quot; &gt;&lt;div id=&quot;histatsC&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://s4is.histats.com/stats/i/1601035.gif?1601035&amp;amp;103&quot; /&gt;&lt;/div&gt;&lt;/a&gt;

&lt;!-- Histats.com END --&gt;

</div>

Kode berwarna hijau adalah kode yang sudah di parse sebelumnya.
Mengapa perlu di parse? karena jika tidak, akan terjadi error pada saat proses penyimpanan dan akan ada pesan dengan tulisan :

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. 

XML error message: The reference to entity "f" must end with the ';' delimiter.

Oke Sobat Blogger! Selamat Mencoba!

Jika Blog ini bermanfaat bagi Anda, silahkan masukkan alamat email Anda di bawah ini untuk berlangganan :

ATAU klik disini untuk menjadi FOLLOWER di IndoBlogTrik