Cara membuat widget melayang pada blogger ( posisi widget kiri bawah )

Pada halaman ini saya akan berbagi informasi mengenai cara membuat widget melayang pada blogger letak widgetnya berada di sebelah kiri bawah, widget ini bisa anda ganti dengan gambar, banner atau kode HTML apapun terserah kepada anda pemilik blog, widget melayang pada blogger ini sendiri sebenarnya berfungsi untuk lebih menarik perhatian pengunjung blog, mengapa ?, karena widget ini letaknya paling depan dan tidak bisa di tutup, sehingga pengunjung yang sedang menjelajah blog anda akan selalu "di paksa" untuk melihat widget melayang ini, mengenai posisinya bisa di rubah-rubah sesuai dengan keinginan dan kebutuhan anda, untuk lebih jelasnya silahkan anda perhatikan gambar di bawah ini :


Klik untuk memperbesar

Perhatikan widget status yahoo massenger yang posisinya terletak pada sebelah kiri bawah dari blog, widget yahoo massenger ini bisa anda ganti dengan apapun sesuai dengan kebutuhan dan keinginan anda, kalau anda tertarik untuk membuatnya silahkan anda ikuti langkah-langkah cara membuat widget melayang pada blogger (posisi widget kiri bawah)

1. Siapkan kode HTML widget yang akan anda pasang

2. Login ke blogger.com lalu pilih blog mana yang akan anda pasangi widget melayang ( posisi widget kiri bawah ), ini tentu saja kalau anda mempunyai banyak blog dan banyak postingan, kalau anda hanya mempunyai satu blog saja lanjutkan ke langka berikutnya yaitu : klik button atau tombol yang bertuliskan rancangan

3. Langkah selanjutnya adalah klik link bertuliskan edit HTML

4. Kemudian arahkan mouse anda ke dalam kotak kecil di sebelah kiri tulisan expand template widget lalu klik di dalam kotak tersebut

5. Berikutnya silahkan anda copy kode di bawah ini :


#melayang {
position:fixed;_position:absolute;buttom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }


6. Langkah selanjutnya cari kode ini ]]></b:skin>, untuk lebih mudahnya silahkan anda tekan tombol CTRL+F pada keyboard komputer anda

7. Setelah ketemu pastekan kode no 5 tepat di atas kode no 6, sehingga hasil akhirnya harus seperti tertulis di bawah ini :


#melayang {
position:fixed;_position:absolute;buttom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
]]></b:skin>
kemudian klik tombol atau button yang bertuliskan simpan template



8. Langkah berikutnya klik tombol yang bertuliskan elemen laman atau elemen halaman, kemudian klik lagi button atau tombol yang bertuliskan tambah gadget, kemudian klik tombol yang bertuliskan HTML/javascript lalu copy kode di bawah ini


<div id="melayang">
Ganti dengan kode widget anda sendiri
</a> </div>



9. Berikutnya silahkan anda pastekan kode di atas di dalam kotak kosong di bawah tulisan konten, lalu klik button atau tombol yang bertuliskan simpan

10. Selesai, silahkan anda perhatikan dan pastikan widget anda sudah terpasang dengan posisi melayang di kiri bawah blog atau website anda

11. Semoga bermanfaat, amin....

Keterangan :

a. Ganti tulisan berwarna merah dengan cetak tebal sesuai dengan selera dan kebutuhan anda, misal bottom right untuk posisi widget di kanan bawah, atau top left untuk posisi sidget di kiri atas dan top right untuk posisi widget di kanan atas

b. Ganti tulisan berwarna hijau dengan cetak tebal sesuai dengan selera dan kebutuhan anda

Copyright 2013