Cara Membuat Widget Melayang Floating Ada Tombol Close

Cara membuat widget melayang floating ada tombol close tutup, maksudnya adalah buat kotak / box floating mengapung / terbang beserta tombol tutup klose nya, diletakkan di bawah atas kanan kiri pada bagian header body sidebar maupun footer.

Maksud dari penjelasan diatas adalah membikin mengedit suatu widget agar bisa float / melayang di bagian manapun anda mau meletakkannya dan ada button close nya. Bisa anda gunakan untuk widget social sharing seperti like facebook, twitter, g+, iklan, dll. Perhatikan langkah-langkahnya dibawah ini.

Sebelum melanjutkan sekedar informasi bahwa anda juga bisa buat widget melayang tanpa ada tombol close nya, bagaimana caranya? klik disini

Langkah - Langkah nya:

• Log in Blog anda
• Ke Menu Layout atau Tampilan >> add a gadget >> html/javascript. Lalu anda paste kan kode nya di kolom kode tersebut.

Contoh widget nya seperti dibawah ini

Gambar 1. klik gambar untuk perbesar tampilan.

Dari contoh gambar widget melayang diatas, tombol close nya adalah berbentuk kata .:[Close].: . Anda bisa rubah sendiri kata yang sesuai selera anda. Kode widget nya seperti dibawah ini.

• Copy dan Paste kan kode dibawah ini pada menu "html/javascript" yang dari "add a gadget" tadi.

Kodenya:

<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:1px 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]:. </a> </div> <center>
CONTOH WIDGET FLOATING MELAYANG GUSTI OI..OI CONTOH WIDGET FLOATING MELAYANG GUSTI OI..OI 
</center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>

Note: Anda bisa mengatur sendiri yang warna merah diatas sesuai keinginan anda dari mulai border, padding, margin, background, jenis tulisan, dan sebagainya. Dan anda bisa menambahkan atau menyisipkan kode tambahan di dalamnya.

• Simpan dan lihat hasilnya.

Atau jika anda ingin memakai widget melayang versi saya sendiri yang saya gunakan untuk sebagai pesan di blog saya ini, anda bisa pakai kode nya dan hanya tinggal edit sedikit sesuai selera anda. Coba perhatikan contoh gambar dibawah ini.

Gambar 2. klik gambar untuk perbesar tampilan.

Dari contoh gambar 2 diatas saya gunakan widget untuk sebagai pesan di blog saya, dan saya menampilkan foto beserta kata-kata kalimat saya. Anda bisa mengedit sendiri warna merah yang dibawah bisa diatur sesuai selera anda, pelajari lah dengan teliti, coba-coba saja, pasti bisa. Lihat kode nya dibawah ini.

<style type="text/css"> #gb{ position:fixed; top:175px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:170px;margin-right:273px; border:0px solid #000000; background:transparent; padding:5px; } </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:center; background-color:white; margin-left:17.5em; margin-right:17.5em;"> <a href="javascript:showHideGB()" rel="nofollow"> .:[Close][Klik 2x]:. </a> </div> <center>
<div style="text-align: justify;">
<a href="http://gustilubis.blogspot.com/" imageanchor="1" rel="nofollow" style="clear: left; float: left; margin-right: 1em;"><img alt="Ahmad Gusti Lubis" border="0" height="103" rel="nofollow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj30i8vVN2gKrgcnl3-A932IBhfaLexKZNMUHFHozenxe2gk9uA96PP737wjhlUZgFq1doGEhL3FQvaAjZo8qxj2N1-wusHYgcmV7LcyAN2pvK_C4jILOVjy3n_lvdJhfG03csKr0fm5HE/s320/DSC_0025.jpg" title="Sir Gusti oi..oi" width="83" /></a><div style="background-color: black; margin-left: 10em;"><span style="font-family: &quot;Courier New&quot;,Courier,monospace;"><b>...Wellcome...</b></span><br />
<span style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">Bagi Teman - Teman Jika Blog ini Bermanfaat Jangan Lupa Di <i><b>Share</b></i> Ya. Bagi Teman Blogger Jangan Lupa Juga Tinggalkan Komentar Agar Saya Bisa Berkunjung Ke Blog Anda. Jalin Pertemanan Dengan Add Melalui <span style="color: red;"><i><b>FB Like</b></i></span>, <span style="color: red;"><i><b>Twitter Followers</b></i></span>, <span style="color: red;"><i><b>G+</b></i></span>, <span style="color: red;"><i><b>Google Friend</b></i></span>. Pasti Saya Akan Add Kembali<b>. </b>Terima Kasih.<b>&nbsp;</b></span></div> </div>
</center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>

Note: Yang paling penting adalah kode yang warna orange diatas ganti dengan alamat url serta url foto anda. Contoh:
*

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj30i8vVN2gKrgcnl3-A932IBhfaLexKZNMUHFHozenxe2gk9uA96PP737wjhlUZgFq1doGEhL3FQvaAjZo8qxj2N1-wusHYgcmV7LcyAN2pvK_C4jILOVjy3n_lvdJhfG03csKr0fm5HE/s320/DSC_0025.jpg >>> Ganti dengan alamat url gambar anda.

*

http://gustilubis.blogspot.com >>> Ganti dengan alamat blog anda, agar ketika gambar di klik akan mengarah ke blog anda.

*

Sir Gusti oi..oi >>> Ganti dengan nama anda, agar ketika mouse diarahkan ke foto akan keluar tittle tag nama anda.

height="103" >>> Untuk mengatur panjang foto

width="83" >>> Untuk mengatur lebar foto

Silahkan dicoba dan semoga berhasil. Maaf saya tidak bisa menjelaskan satu-persatu fungsinya karena pasti akan membutuhkan waktu yang sangat panjang. Tapi saya sudah siapkan artikel untuk menjelaskan semua fungsi-fungsi kode diatas, anda hanya perlu membaca dan mencoba nya. Silahkan baca artikel rekomendasi dibawah ini.

Artikel Rekomendasi:
1. Cara Membuat Warna Background Teks Di Postingan Blog.
2. Cara Mengatur dan Mengedit Jenis Tulisan Teks Lengkap di Blog.
3. Fungsi border, jenis dan contohnya.
4. Fungsi padding, jenis dan contohnya.
5. Fungsi margin, jenis dan contohnya.
6. Cara buat widget melayang tanpa ada tombol close

Terima Kasih.
Cara Membuat Widget Melayang Floating Ada Tombol Close.