Home » » Membuat Gadget Terapung (Floating Gadget)

Membuat Gadget Terapung (Floating Gadget)

Diposting Oleh Bang Dayat ; Hari Minggu, 05 Agustus 2012 Jam 12.00

Halo sobat Bang Dayat apa kabar semuanya? Kemaren sempet cari-cari script buat membuat tampilan menu melayang tapi malah ketemu Gadget Melayang. Jadi dalam postingan ini BD ingin sharing membuat Floating Gadget.

Sebenarnya floating gadget itu apa sih? Wah Bang Dayat pun bingung mau jelasinnya. Mungkin sobat pernah menjumpai blog yang memasang sebuah tombol dipinggir halaman jika diklik akan muncul atau keluar atau bergeser. Biasanya digunakan untuk pesan, shoutbox, dan lain sebagainya.

Itu merupakan sebuah gadget yang terapung diblog. Pembuatannya pun cukup mudah karena kita tidak perlu otak-atik html blog kita, kita hanya menggunakan widget javascript/html. Gadget terapung kelihatan lebih indah karena menggunakan javascript.

Ini sobat salah satu contohnya menggunakan shoutmix :


Bagi sobat yang ingin mencobanya berikut caranya :

1. Login ke akun blogger sobat.

2. Masuk ke Tata Letak dan Tambah Gadget.

3. Pilih Gadget HTML/JavaScript.

4. Masukkan kode dibawah ini kedalam Gadget tadi.

<style type="text/css">
#nempel{position:fixed;top:65px;z-index:+1000;}
* html #nempel{position:relative;}
.nempeltab{height:100px;width:30px;float:left;cursor:pointer;background: #A5BD51 url('http://lh5.ggpht.com/_xcD4JK_dIjU/Stq23DPOQUI/AAAAAAAADhQ/2imPnFpVUrA/d/floatnav.jpg')no-repeat;}
.nempelisi{float:left;border:2px solid #A5BD51;background:#CCFFFF;padding:8px;}
</style>
<script type="text/javascript">function showHideNempel(){var nempel = document.getElementById("nempel");var w = nempel.offsetWidth;nempel.opened ? moveNempel(0, 30-w) : moveNempel(20-w, 0);nempel.opened = !nempel.opened;}function moveNempel(x0, xf){var nempel = document.getElementById("nempel");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;nempel.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveNempel("+x+", "+xf+")", 10);}}</script>
<div id="nempel">
<div class="nempeltab" onclick="showHideNempel()"></div>
<div class="nempelisi">
<!-- ISI DENGAN KODE GADGET -->
<div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[Close]</a></div>
<span><a style="font-size: 10px; cursor:pointer; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #999" href="http://modification-blog.blogspot.com/2009/10/gadget-terapung-floating-widget.html" target="_blank">Widget by Blogger Tune-Up</a></span>
</div>
</div>
<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>

5. Ganti  <!-- ISI DENGAN KODE GADGET --> dengan kode gadget yang akan dipasang.


6. Kemudian simpan.

7. Bagi sobat yang ingin pasang shoutmix atau shoutbox harus daftar dulu.

Semoga bermanfaat.
Berbagi dengan artikel ini :
Ditulis oleh : Bang Dayat
Description: Membuat Gadget Terapung (Floating Gadget) , Rating: 5
Reviewer: Bang Dayat, ItemReviewed: Membuat Gadget Terapung (Floating Gadget)

Artikel terkait tentang

Berlangganan Artikel BD
Masukkan Email Anda:

 
Support : Bang Dayat
Copyright © 2012-2017. Bang Dayat Blog's - All Rights Reserved

Proudly powered by Blogger