membuat Buku Tamu melayang

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.
7 Komentar untuk "membuat Buku Tamu melayang"

Mantap pak..., Selamat berktivitas semoga semua lancar2 saja.., Aamin... *smile

keren nih, bisa melayang-layang di udara nih buku tamunya ... :)

memang membuat buku tamu melayang sangat bagus dan terasa rapi
thanks sobat

kebetulan saya sudah menerapkannya di blog saya sobat, buku tamunya jadi keren dan dapat memberi ruang lain untuk widget lain di blog sobat....

mantap ya sob ternyata cbox awal ane sampe kesini :)) huahahhaa mantap!! "open chating" dan "CloseComment" gambar nya sebenernya dari ane, cuman di kopas sama anak anak bandal :D

@Farixsantips lagi Bosen aja, pengen ganti style sob,
wah, gambarnye punya ente ya sob, ane nemu di blognya siapaaa gitu, lupa,hehe.....
thanks sobb.....dah ketemu ne Founder gambarnya,
harus ditambah sumbernya ni di postingannye,hehe

tak perlu sob :) biarlah menyebar sendirinya, dan tunggu hasilnya :D

"Thanks telah mampir dan Berkomentar Disini, yo kita saling vote dan comment"

Back To Top