Cara membuat Gadget Terapung | GENGTETTEL ™

Sabtu, 14 Juli 2012

Cara membuat Gadget Terapung

Cara membuat Gadget Terapung >>
Sebelumnya Blogger Tune-Up pernah membahas cara membuatMenu Navigasi Terapung dan Float Nav Bar. Pada artikel kali ini merupakan pengembangan dari trik-trik blogger hack yang pernah dibahas, yaitu kita akan membuat gadget terapung yang tidak terpengaruh oleh scrollbar dan selalu dalam posisi tetap.
Mungkin teman-teman pernah jalan-jalan ke blog orang lain dan menemukan sebuah tombol di pinggir halaman yang jika di klik akan menampilkan sesuatu (misal; shoutbox, buku tamu, subscriber, dan lain sebagainya) dan posisinya selalu tetap walaupun halaman tersebut kita geser atas bawah kiri kanan. Sebenarnya hal tersebut pada dasarnya adalah sebuah gadget yang diatur seakan-akan mengapung atau menempel pada halaman. Sebagai contoh Blogger Tune-Upmenggunakan gadget terapung ini untuk menempatkan ShoutMix yang sudah lama hilang pada sebelah kanan atas dengan tombol bertuliskan "PESAN".

Langkah integrasi gadget terapung (floating widget)

Langkah 1
Login ke blogger
Langkah 2
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 3
"Tambah Gadget" Baru dengan tipe "HTML/JavaScript"
Langkah 4
Masukan (copy paste) kode dibawah ini pada isi/konten gadget yang baru kita buat:
 
<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">
<!-- Kode Isi Gadget Terapung -->
<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>
Langkah 5
Ganti <!-- Kode Isi Gadget Terapung --> dengan kode yang akan kita tampilkan pada gadget terapung.
Langkah 6
Simpan Gadget dan Preview blog

Keterangan:
  • Jika ingin membuat kotak pesan seperti pada blog ini, silahkan buat account di ShoutMix dan ambil kode yang diberikan, masukan kode tersebut menggantikan kode <!-- Kode Isi Gadget Terapung -->.
Selamat mencoba dan semoga berhasil, jangan lupa tinggalkan jejak dengan mengisi komentar dibawah. Happy Blogging... :)

Terima kasih telah membaca artikel Cara membuat Gadget Terapung.Silahkan baca artikel GENGTETTEL ™ tentang yang lainya dibawah ini!
4.5 23.05
Sabar Muanas 9 out of 10 based on 24 ratings. 5 user reviews.

Tidak ada komentar pada artikel Cara membuat Gadget Terapung

Kami sangat membutuhkan Kritikan anda untuk kemajuan blog geng tettel !!
Berikan semangat dan dukungan anda buat blog ini.....?!!

By..GENGTETTEL.COM