Cara Membuat Buku Tamu Slide

Cara Membuat Buku Tamu Slide

Untuk Tip's Blog kali ini saya akan menjelaskan tentang Cara Membuat Buku Tamu Slide. Dengan cara Slide maka buku tamu akan  bergerak ke luar dan kedalam pada sisi blog ketika kita klik. maka dengan cara ini bisa lebih menghemat tempat di blog kita. Selain itu ini bisa juga sebagai salah satu cara yang membuat blog kita unik.

Untuk langkah-langkah Cara Membuat Buku Tamu Slide akan saya jelaskan di bawah ini :

1. Buat dulu Buku tamu di situs penyedia buku tamu, atau baca postingan tentang Membuta Buku Tamu

2. Setelah Mendapatkan kode HTML nya, Lalu Masuk Ke Layout lalu Tambah Gadget

3. Pilih HTML Java Script lalu masukkan kode di bawah ini :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:120px;
width:40px;
float:left;
cursor:pointer;
background:url('https://lh3.googleusercontent.com/-HF3Q19LmRvk/Ti_sffiuz-I/AAAAAAAAAuE/9KgxweM7bxM/s800/Capture.PNG&#039;) no-repeat;
}
.gbcontent{
float:left;
border:1px solid #78D0FF;
background: #f6f8f8;
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">
 (Masukkan kode HTML Buku Tamu Yang Telah Anda Buat Disini)

Keterangan : Kode yang berwarna biru adalah link gambar untuk nama buku tamu bisa di ganti dengan gambar kreasi anda sendiri. Bagi yang belum mengetahui caranya akan saya jelaskan di postingan selanjutnya tentang Cara Membuat Link Gambar Sendiri.

4. Tinggal Klik Save lalu lihat hasilnya

Sekian postingan kali ini tentang Cara Membuat Buku Tamu Slide semoga bisa membantu, Selamat Mencoba.

1 comments:

sedang cari tutorial seperti ini, terimakasih kawan, sangat bermanfaat.

Reply

Posting Komentar