Membuat Buku tamu Keluar Masuk

Hallo sobat semuanya ,sebelumnya saya ucapkan selamat pagi mungkin sobat semua dalam keadaan sehat walafiat,ok kali ini saya akan memberikan tips“Cara Membuat Buku Tamu Tersembunyi”Yang berada di pojok kanan , Jika sobat klik, Buku tamu ini otomatis bergeser keluar masuk,bagi sobat yang ingin memasangnya di blog sobat silahkan ikuti tips berikut ini:

Berikut langkah-langkahnya

1. Seperti biasa Login ke blogger sobat

2. Klik menu Layout

3. Klik Page Elements

4. Klik Add a Page Element

5. Klik ADD TO BLOG pada menu HTML

6. Lalu sobat kopas aja kode berikut Pada kotak HTML


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqOafqUMB5Ol7DMA6r-XDY5EBU8I8MuejC8yBv8QSF6F6iCeqVkVbMddUJs7XzlmEFCLgbAhLdRrGNYDbJ1kEh2Kw8Kj_DAcNdsoyDjPrty6W6qJfeUYcz9TOYuHW3r9K-WhUNj6g7YkaJ/s1600/CHAT+ROOM3.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">

<PASTEKA BUKU TAMU ANDA DISINI>

<div style="text-align:right">
<a href="http://sastranett.blogspot.com/2011/02/membuat-buku-kelur-masuk.html">
[INGIN SEPERTI INI KLIK DISINI]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>



<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

7.Save Widget tersebut.

Jika langkah tersebut diatas sudah sobat lakukan,sobat dapat melihat hasilnya pada blog sobat masing-masing

Ok sobat selamat mencoba........

Posted in: TIPS AND TRIK