Jika Berkunjung Jangan Lupa Meninggalkan Jejak Di BUKU TAMU INI... :)
Buku Tamu

Cara Membuat Buku Tamu Tersembunyi




Tutorial ini saya temukan di blog milik salah satu sobat Blogger yang merupakan tutorial tentang cara membuat buku tersembunyi dengan efek yang berbeda seperti yang pernah saya share dahulu pada anda. Baiklah langsung saja ikuti langkah-langkah untuk membuatnya

=>Seperti biasa login dahulu ke akun blogger milik anda.
=>Klik Rancangan, Tambah Gadget, Html/Java Script.
=>Dan copas kode di bawah ini.




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

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.gbcontent{
float:left;
border:2px solid  #0F0;
background:#ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">

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


<!--  Script Chatbox nya disini -->


<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>

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

<a class="west" href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="http://3.bp.blogspot.com/-cD5CX57Wiho/TdPXDxgD1LI/AAAAAAAAAB0/ZP-mdEbmJl8/s1600/Guestbook.png" border="0" /></a>

=>Simpan

Dan yang ingin Tab Image Buku Tamunya melayang di samping copas script berikut ini :

<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
#tabGb {
position:fixed;_position:relative;top:50px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); }
* html #gb{position:relative;}

.gbcontent{
float:left;
border:2px solid  #4173af;
background:#ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">


<div class="gbcontent">


<!--  Script Chatbox nya disini -->



<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>

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

<div id="tabGb"><a href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="http://3.bp.blogspot.com/-uOFA4zVgMqE/TeZSCUxRvnI/AAAAAAAAACw/m3VYHrlDH0Q/s1600/Guestbook.png" border="0" /></a></div>
</div>


Keterangan : Taruh script buku tamu milik anda di tulisan yang berwarna kuning, dan untuk tulisan yang berwarna merah adalah Tab Image buku tamu anda yang dapat anda ganti sesuka hati.




Setelah Membaca Artikel Cara Membuat Buku Tamu Tersembunyi jangan lupa klik LIKE yaa.. dan Semoga bermanfaat bagi sobat . Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar atau di Buku Tamu. Sertakan link di bawah ini bila anda ingin COPAS.



0 komentar:

Posting Komentar