Halaman

misther-junett.blogspot.com
  • Web
  • misther-junett

    • Sabtu, 25 Juni 2011

    Cara Membuat Gadget Terapung (Floating Widget)

    Sebelumnya Blogger Tune-Up pernah membahas cara membuat Menu Navigasi Terapung dan Float Nav Bar. 
    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-Up menggunakan 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
    0 komentar