berbagi ilmu seputar Dunia kita

Cara Membuat Buku Tamu Tersembunyi di blog

Share on :

 Sekarang saya akan share sedikit trik Cara Membuat Buku Tamu Tersembunyi di blog. Trik ini berguna sekali bagi kalian yang ingin memasang buku tamu, tapi tidak memiliki ruang yang cukup. Dengan script ini, buku tamu kalian akan tersembunyi, yang berada tepat di samping kanan. Berikut screenshotnya :




Untuk membukanya, klik saja gambar buku tamunya, maka buku tamunya akan tampil secara slide ke kiri (Lihat Screenshot berikut)


Berminat bagaimana cara membuatnya? Langsung saja sob :

1. Siapkan dulu sob, script buku tamu kalian. Bisa Shoutmix, bisa Cbox. Lalu simpan di notepad.
2. Login ke blogger, lalu klik Rancangan, Add Widget, HTML/Javascript ( Tips : Tempatkan widget di samping kiri dan jangan diberi judul)
3. Copy paste script berikut :

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

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh53YiKyHoXxVbqX0VQnt_jrkVHY8-OVVfxlpixcHFuVCIvA16llNcB2EZNAp4Its_atwtiMziIQjo6uIq-Oaqjz-aY5VuFGmkpEyXaiz3WxwExo5ntuei3JG9HdB2Xm9N5Qa0PgTbjO3I/') 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">

( Tempatkan Script Buku Tamu kalian disini)
<br/>

<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>
Warna Merah : Ganti dengan script buku tamu kalian yang telah disimpan di notepad
Warna Biru : Bisa diganti dengan url gambar tombol buku tamu. Kalau malas, dibiarkan saja juga tidak apa-apa.

4. Tinggal save

0 komentar on Cara Membuat Buku Tamu Tersembunyi di blog :

Post a Comment and Don't Spam!

 

Ganti Background

Change Background of This Blog!


dapatkan gadget ini

_