membuat Buku Tamu melayang

Bagikan :

Tweet

salam Sahabat blogger semua. gimana kabarnya pagi ini. kali ini ane mo share tentang membuat buku tamu melayang untuk menambah Posting Tutorial Blog, hehe.... contoh DEMO nya seperti yang ada di Blog ini, terletak di pojok kanan atas. maklum, bosen dengan model yang sebelumnya.

baik, langsung saja kita Ke TKP membuat Buku Tamu melayang :


1.Login Blogger anda  >>>>Rancangan >>>Elemen Laman >>>Add Gadget >HTML/JavaScript
2.kemudian Copy dan Masukkan Masukka  Kode/Script dibawah ini kedalam kolom HTML/JavaScript tadi. berikut Kodenya yang diletakkan kedalam kolom HTML.JavaSript yang harus Dicopy  :

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFWhvUQSgBkorZjUYEh3rwPOCpVw1WKJ8UsyN_3IqCdThOQst947dzYypIkAuMzZheiC5LHw-6Vw1LrLxeKupxrv8gbkxEItJ5qtDQj3TjTdvvUbaNcc4ShxT0HOjbobYMIXFdAxzWHiT4/s1600/api.gif) no-repeat bottom;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
<center>


Kode Cbox kamu


<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr />
<div style="text-align:right"> <font size="2"><a href="http://besttaufiqblog.blogspot.com/2011/04/cara-membuat-buku-tamu-keren.html"target=_blank"><div style="color: #ffffff;">
<span style="font-size: xx-small;">:: Get This Widget! ::</span></div></a></font></div>
</center>
</a>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script></div>

3.kemudian Save. Selesai dan Lihat Hasilnya.

Mudah Bukan, ternyata tidak sulit membuat Buku tamu melayang di Blog. Langsung Dicoba ya gan. Moga bermanfaat.

Tag : Tutorial Blog