Wednesday, January 16, 2013
Jika blog anda sudah tidak ada ruang untuk menampilkan buku tamu atau
anda sudah bosan dengan penampilan buku tamu yang ala kadarnya, maka
anda harus coba tutorial berikut ini yaitu membuat buku tamu tersembunyi.
Buku tamu tersembunyi yang saya maksud adalah buku tamu yang
disembunyikan dibagian samping halaman blog anda, dan akan muncul ketika
anda mengklik tombol buku tamu atau sebaliknya akan tutup jika anda
mengklik tombolnya kembali. Untuk cara membuatnya sangat mudah ikuti
langkahnya dibawah ini:1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan Gadjet lalu pilih HTML/JavaScript
4. Masukan kode berikut ini:
<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://1.bp.blogspot.com/-Q5TgNw6u0_M/T7s_czTIedI/AAAAAAAADTM/xTgzEQV5Dfs/s400/tabs.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 -->
<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di sini:
<a href="http://blogtrikdantips.blogspot.com/2009/09/membuat-buku-tamu-tersembunyi.html">
(Blog Trik dan Tips)
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
6. Ganti kode berwarna merah diatas dengan kode buku tamu anda.
7. Simpan gadjet tersebut
Demikian langkah-langkah untuk membuat buku tamu tersembunyi. Selamat mencoba!!!!
