Tutorial Blog - Membuat Gadget Melayang

Baiklah kali ini saya akan beritahukan sedikit mengenai cara membuat gadget melayang-layang di atas blog (contohnya seperti Histats di SuryaCoder ini). Trik ini hasil kerja keras saya mengobrak-abrik seisi dunia maya sampai akhirnya ketemu juga cara buatnya. Oke tanpa banyak basa-basi lagi kita mulai aja tutorialnya.

• Pertama-tama, seperti biasa temen-temen mesti login dulu ke akun blogspot.
• Selanjutnya masuk ke menu Rancangan>Edit HTML.

• Centang 'Expand Template Widget'.

• Lalu, cari kode ]]></b:skin>
• Di atas kode tadi tambahkan kode berikut (utk lebih jelasnya lihat gambar):

.layang { position: fixed; top: 5%; right: 0px }

Ini adalah tampilan Edit HTML.

• Setelah itu langsung tekan tombol 'Simpan Template'.
• Selanjutnya masuk ke halaman Rancangan>Elemen Laman.
• Klik 'Tambah Gadget' lalu pilih gadget HTML/JavaScript'

• Pada bagian 'konten' isikan kode di bawah ini (utk lebih jelasnya lihat gambar):

<div class='layang'>

Pada bagian ini isikan kode HTML dari gadget yg ingin ditampilkan (misalkan kode HTML Histats atau Chatbox, dkk)

</div>

Gambar ini merupakan tampilan dari gadget HTML/Javascript. Di antara kode yg dikotakin merah merupakan kode HTML dari gadget Histats.

• Lalu tekan tombol 'Simpan'
• Terakhir tinggal lihat blog temen-temen maka akan nongol gadget yg melayang-layang di bagian kanan atas blog. Alhasil jadinya seperti ini:

Walaupun halaman di-scroll ke bawah, gadget Histats tidak akan berubah posisi.

Keterangan mengenai sintaks di atas adalah sebagai berikut:

.layang { position: fixed; top: 5%; right: 0px }


positon: fixed; menyebabkan posisi gadget terkunci pada satu posisi walaupun halaman di-scroll ke atas maupun ke bawah.

top: 5%; maksudnya adalah posisi gadget adalah 5% dari keseluruhan lebar halaman browser diukur dari tepi atas halaman browser

right: 0px; digunakan untuk menentukan jarak gadget dari tepi kanan halaman browser, 0px berarti tidak ada jarak atau gadget berhimpit dengan tepi kanan halaman.

Oke, sekian dulu tutorial blog yang satu ini. Semoga bermanfaat buat temen-temen sekalian.
:D