Minggu, 13 Februari 2011

Cara Membuat Floating Gadget Di Blogger

Hoam,,, Capek Banget Hari Ni gw, Bolak-Balik Dari Rumah Ke Vihara. Ngomong-Ngomong Masalah Bolak-Balik, Pasti Kalian Semua Pernah Merasa Malas Karena Harus Bolak-Balik scrolling Untuk Menemukan Suatu Gadget Pada Blog. Namun Kini Sudah Gak Usah Bolak-Balik Lagi Buat Nemuin Tuh Gadget. Karena Sekarang Rhenz Bakal Nulis Artikel Tentang Cara Membuat Floating Gadget, Jadi Sekarang Gantian Si Gadget Yang Ngejar-Ngejar Kita :D.

Mau Bikin Floating Gadget? Gampang Koq, Ikuti Langkah Di Bawah Ini Brother:
1) Login Dulu Ke Blogger Anda(So, Pasti)
2) Masuk Ke Rancangan > Elemen Laman > Tambah Gadget
3) Pilih Html/Java Script
4) Paste Code Di Bawah Ini:


<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
>
5) Pada Tulisan <!-- Kode Isi Gadget Terapung --> Tersebut, Ganti Dengan Script Gadget Yang Ingin Anda Masukkan



6) aligment Pada Gadget Terapung Tergantung Dimana Anda Meletakkan Html/Java Scriptnya, Bila Anda meletakkan di kanan Maka Akan Tampil Di Kanan, Begitu Juga Sebaliknya


7) Save


Sekarang Coba Lah Preview Blog Anda


Happy Blogging
Reactions

0 Comment:

Poskan Komentar

Terima Kasih Sudah Membaca Artikel Dari Rhenz Blog, Silahkan Tinggalkan Komentar Untuk Blog Saya Baik Via Facebook Ataupun Blogger~...
Jangan Lupa Like FanPage Rhenz Blog Dan Follow Twitter Atau blog Ini Ya ;D


Terima Kasih Kunjungannya

Alexa Ranks