Cara Membuat Widged Melayang di Blog

Cara Membuat Widged Facebook like Melayang- Selamat pagi,siang, sore ,malam sahabat bloggers sekalian. Maaf jika MasBagus jarang update post dikarenakan kesibukan dunia nyata. Yah, kali ini MasBagus akan berbagi tutorial membuat widged sosial media melayang untuk mempercantik tampilan blog anda. Widget  adalah bagian tertentu didalam blog bisa berupa iklan, facebook like, follow twitter, dan sebagainya. Widged biasanya terletak di sidebar template blog sobat bloggers semua. Baik itu dikanan maupun dikiri.Widged di sidebar ini akan menghilang jika scroll digeser kebawah





Namun beda dengan widged melayang, widget ini akan terus ada walaupun scroll di geserke bawah.Widget melayang biasanya dimanfaatkan para bloggers untuk dipasangi sosial media button. Namun MasBagus nggak makai widget ini, kenapa? Karena di template blog MasBagus sudah ada sosial media buttonnya :D
Terus gimana, cara membuat widget melayang di blog Mas?. Nah, berikut tutorialnya :

Cara Membuat Widged sosial media Melayang di Blog

1. Log ini ke account blogger Anda. Langsung saja ke sini www.blogger.com

2. Lanjut ke bagian Tata Letak Blog sobat

3. Ke bagian Tambah Gadget (jika Anda ingin menambah gadget baru), 

tapi kalau mau edit Gadget yang sudah terpasang dan ingin membuatnya menjadi melayang atau floating, maka silahkan pilih salah satu HTML/Javascript kemudian klik edit

4. Kemudian Copy kode HTML berikut :

<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:0px solid #000000; background:#eeeeee; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div> <center>Masukkan kode HTML widget widget iklan, widget facebook like, widget follow twitter, bahkan widget iklan disini</center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>

Catatan Penting  :

Ukuran widget ini 220px dapat anda rubah sesuai keinginan.
Widget ini sudah setting untuk berada di sebelah kiri, untuk modifikasi Anda bisa mengubahnya dengan mengubah bagian yang sudah saya tandai kuning, dari tadinya left menjadi right (untuk widget melayang sebelah kanan).
Warna border saya setting jadi warna merah, untuk mengubahnya silahkan ubah kode warna di bagian yang sudah saya tandai Biru solid #000000, sesuai dengan warna kesukaan Anda. Kode warnanya dapat Anda cari sendiri di Google , hehehe.
Backgroud dapat Anda rubah sesuai dengan kehendak Anda sendiri, modifikasi dengan mengubah bagian yang sudah saya tandai Hijau. Kode warna cari sendiri di google.
Pada bagian yang diberi efek italic dan Bold, silahkan Anda masukkan kode HTML apa saja yang mau Anda buat melayang. Bisa kode iklan. Sosial Media dll .Widget ini akan melayang di posting, di klik 2 kali baru keluar.

5. Klik simpan, Kemudian Pratinjau untuk melihat apakah tutorial blog ini berhasil.

6. Setelah berhasil, klik simpan.

Nah itulah tutorial singkat dari saya, semoga bermanfaat sampai jumpa. ^_^