Buku Tamu Tersembunyi Di Blog

Mendengar judul di atas sobat pasti tidak asing lagi dengan yang namanya Buku Tamu tersembunyi, maksudnya buku tamu tersebut ngumpet disalah satu halaman blog sobat dan apabila ada pengunjung yang mampir dan mengkliknya maka si buku tamu pada akan keluar dari persembunyiannya..hehe ngerti g? kalo g ngerti y ane juga pada g tahu thu maksud ane sendiri.hahahaha :). Biar lebih mudahnya silahkan lihat buku tamu di samping halaman blog saya. Kerenz kan? Gitu thu maksudnya. Do you understand ?
Oke cukup basa basinya mari kita praktekin.
1. Langkah pertama copy kode HTML di bawah ini

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:right;

cursor:pointer;

background:url('http://i1182.photobucket.com/albums/x453/marioadit/foto%20web/martabs.png') no-repeat;

}

.gbcontent{

float:right;

border:2px solid #00FF7F;

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

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

}

</script>

<div id="gb">

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

<div class="gbcontent">

<!-- Gantilah Teks ini dengan kode HTML ShoutBox Anda-->

<br/>

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

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

[tutup]

</a>

</div>

<div style="text-align:right; font-size:80%">

Widget by:

<a href="http://mariozoner.blogspot.com">

Mario Zoner

</a>

</div>

</div>

</div>

<script type="text/javascript">

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

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

</script></div>

Keterangan :
* Kode yang berwarna biru ganti dengan kode HTML shoutbox anda
* Kode yang berwarna merah (http://i1182.photobucket.com/albums/x453/marioadit/foto%20web/martabs.png) adalah gambar tabs nya. Sobat bisa memasukkan gambar tab sobat sendiri yang sudah di upload ke internet. Apabila sobat tidak ingin repot-repot sobat bisa menggunakan url tabs hasil kreasi saya disini  : http://s1182.photobucket.com/albums/x453/marioadit/Kreasiku/. :-)

2. Kemudian Loginlah ke akun blog sobat
3. Pilih Rancangan > Elemen Laman > Tambah Gadget > Pilih HTML/JavaScript
4. Kemudian Paste kode HTML yang sudah di copy tadi ke kotak konten
5. Klik Simpan dan lihat hasilnya

Untuk Shoutbox dibawah halaman berikut kodenya

<style type="text/css"> #gb{ position:fixed; right:30px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ width:100px; height:30px; color:white; text-align:center; cursor:pointer; background:url('http://i1182.photobucket.com/albums/x453/marioadit/Kreasiku/by_mz.png') no-repeat; } .gbcontent{ border:2px solid #000000; background:#FFFAFA; padding:10px; } </style><br /> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetHeight; gb.opened ? moveGB(0, 30-w) : moveGB(30-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.bottom = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script><br /> <div id="gb"><div class="gbtab" onclick="showHideGB()"></div><div class="gbcontent"><br /> <!-- Gantilah teks ini dengan Kode Html ShoutBox Anda --><br /> <br /> <br/><br /> <div style="text-align:right"><a href="javascript:showHideGB()"><br /> [tutup]<br /> </a><br /> </div><div style="text-align:right; font-size:80%">Widget by:<br /> <a href="http://mariozoner.blogspot.com"><br /> Mario Zoner<br /> </a><br /> </div></div></div><br /> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.bottom = (30-gb.offsetHeight).toString() + "px"; </script><br />

Untuk dibagian kanan halaman

<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://i1182.photobucket.com/albums/x453/marioadit/Kreasiku/saringan_kanan.png') no-repeat; } .gbcontent{ float:left; border:2px solid #00FF7F; background:#F5F5F5; padding:10px; } </style><br /> <br /> <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><br /> <br /> <div id="gb"><br /> <div class="gbtab" onclick="showHideGB()"></div><br /> <div class="gbcontent"><br /> <!-- Gantilah teks ini dengan Kode Html ShoutBox Anda --><br /> <br /> <br/><br /> <div style="text-align:right"><a href="javascript:showHideGB()"><br /> [tutup]<br /> </a><br /> </div><div style="text-align:right; font-size:80%">Widget by:<br /> <a href="http://mariozoner.blogspot.com"><br /> Mario Zoner<br /> </a><br /> </div></div></div>

Semoga artikelnya bermanfaat

Related Post