Cara Menyembunyikan Widget Buku Tamu

Pada Kesempatan Hari ini Saya Akan memposting Bagaimana Sih Caranya Menyembunyikan/Menghiden Widget Buku Tamu dengan sangat mudah dan benar ??? Caranya Sangat Mudah Sekali , Cara Ini Sama Seperti Cara Menyembunyikan Widget Followers

kalo belum tau silahkan Baca Dulu ........ Ok Langsung Ke Pokok Pembahasan saja :

Bahan-bahan yang di Butuhkan :

*. Seperti Biasa Ambilah Makanan Ringan + Minuman nya

*. Ketelitian Sangat di Butuhkan Sekali

*. Siapkan Kode HTML Buku Tamunya .

Tutorial :

1. Buka Blog Sahabat

2. Klik Rancangan >>> Element Halaman

3. Tambah Gadget >>> Html/Javascript

4. Copas Kode di bawah ini dan tempatkan di HTML/JavaScript tersebut , :

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('http://i142.photobucket.com/albums/r81/gusdiwanto/tab.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

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.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu kamu -->

<font size="2"><a href="http://www.orizaman.co.cc/2011/06/cara-menyembunyikan-widget-buku-tamu.html">klik</a>

<div style="text-align:right">

<a href="javascript:showHideGB()">

[close]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

Catatan :

1. kode yang berwarna biru dengan tulisan top:50px; di atas adalah Penempatan Widget nya bisa Sobat Ganti Sesuai Kebutuhan

2. kode yang berwarna biru dengan tulisan height:100px; width:30px; adalah ukuran Widget nya bisa di sesuaikan Sesuai Keinginan Sobat

3. kode yang berwarna biru dengantulisan http://i142.photobucket.com/albums/r81/gusdiwanto/tab.png

Adalah Gambar Widget nya , gambar tersebut bisa sobat Ganti Sesuai Kreatifitas Sobat Sendiri

4. kode yang berwarna biru dengan tulisan adalah Isi Dengan Code Buku Tamu yang telah di buat Sebelumnya

5. kode yang berwarna biru dengan tulisan close bisa Sobat Ganti Dengan Kata-kata yang Lain misalnya Keluar Ataw Apalah Terserah

Step Selanjutnya Lalu Simpan .....dan Lihat Hasilnya ........

Semoga Bermanfaat ...... Jangan Lupa untuk Follow Blog Saya Dan Berikan ( +1 ) dalam Setiap Postingan Saya ..... Trimakasih

Salam Hangat Oriza