Cara Membuat Buku Tamu Melayang Di Blog

Diposkan oleh Fransiscus on Sabtu, 10 April 2010

Buku tamu merupakan hal yang penting dalam blog, dikarenakan disinilah para blogger saling menyapa dan memberikan pendapatnya mengenai blog kita. Namun salah satu yang bikin masalah yaitu mencari peletakanya. Kadang - kadang para blogger binggung memasangnya dimana. Nah kalo masalah itu ada solusinya yaitu memasang Buku tamu yang melayang.

Salah satu keuntungnya yaitu ini akan mengikuti letak kusor, naik maupun turun. Tapi di setiap keuntungan ada kerugian, kerugianya adalah aga lambat dalam meload. Maka dari itu sebelum memasang ini harus diperhitungkan juga masalah kecepatanya.

Nah saya tak akan memperpanjang lagi pembahasan, saya langsung saja memberikan script tersebut yaitu :

<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://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/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">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="m4n0" src="http://www6.shoutmix.com/?m4n0" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?m4n0">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->
<br/>
Anda berminat buat Buku Tamu seperti ini?<br/>
Klik di
<a href="http://makassar-09.blogspot.com/2009/08/trik-membuat-buku-tamu-melayang.html&quot;>
sini </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>

 Catatan:
  1. Jangan satukan dengan iklan yang melayang karena akan menjadi kacau.
  2. Yang diberi tanda berupa huruf yang merah dapat diganti, contohnya  buku tamu anda yang shoutbox atau cbox.
Selamat mencoba........

Sumber :
Faisal

{ 30 komentar... read them below or add one }

GADO GADO mengatakan...

wah.. Bisa melayang.. Ku coba deh.. Thx ya infonya..

Rizky2009 mengatakan...

kalau cara ini susah BW via hp

Bisnis Fantastis mengatakan...

wah mengganggu pemandangan gak ya..? nice info thanks

Samuel adinugraha mengatakan...

thanks infonya :)
tapi lebih suka yang normal ah..
Music

Capila blog mengatakan...

di coba dulu bang

Download Ebook Gratis | cara-blog | kumpulan bisnis online mengatakan...

mantab dan bagus banget nich blognya, kunjungan balik ya bro di download ebook gratis :)

SMP PGRI 17 BOGOR mengatakan...

Keren.....Trims Yups...

Hyde Inside mengatakan...

:33

wbw-wbw mengatakan...

kyknya bagus nih....sy pasang diblog sy ya mas....

nawir mengatakan...

Biar agak ke bawa dikit buku tamunya gmn caranya....?

MP3 Indo mengatakan...

lansung di coba,,thanks

Pemula mengatakan...

domain grTIS .COM http://lang-sink.blogspot.com/2011/01/persingkat-domain-anda-dengan-com-net.html

Achmad Izzuddin mengatakan...

thanks gan.....

Eggy mengatakan...

Terima kasih gan Akhirnya udah ada Buku tamu di Blog aku...
http://diseputar.blogspot.com/

igjepara mengatakan...

sip....

Radira mengatakan...
Komentar ini telah dihapus oleh penulis.
kbg mengatakan...

Makasih,...

gotriogo mengatakan...

Thanks atas infonya. bermakna sekali buat saya yang newbie ini. ^_^

lumi mengatakan...

Ya lumayan lah, bisa buat masang buku tamu diblogku yang 1 lagi, thanks bro

ISMAIL MH mengatakan...

ijin menyerap ilmu...thnks...

Blogger Katro mengatakan...

thanks :D

Imam syafaat mengatakan...

Siip Nih....LinkBack yaaaa

DEBRIAN RUHUT BLOG mengatakan...

Perlu diketahui bahwa tidak semua browser menampilkan sempurna chat box melayang di atas. Bila menggunakan firefox, tampilan chat box akan menonjol ke depan (tidak enak dipandang). Maka ganti javascript terakhir dengan yang satu ini untuk mendapatkan kompatibilitas di berbagai browser (100% Tested):

var gb = document.getElementById("gb");
if (window.opera) {
gb.style.right = (30-gb.offsetWidth).toString() + "px";
}else {
gb.style.right = (-gb.offsetWidth).toString() + "px";
}

Best Regard,
http://debrianruhut.blogspot.com/

Belajar Blog | Bikin Blog | Belajar SEO mengatakan...

terima kasih info nya mas
langsung ke TKP

bloggerpelajar mengatakan...

izin sedot ya kkak...makasih Artikel nya ...
kunjungi blog saya juga ya kak di http://tutorialsangpelajar.blogspot.com/

anku lareh (jack saparow) mengatakan...

mantap bossssss

PUTRA DCD mengatakan...

pagi sobb.... kalau mau rubah gambar sampul dari buku tamu yang melayang tu.... itu kan tulisannya buku tamu warna hijau, dan sudah banyak yang punya,,,, sobat ada alamat gambarnya apa tidak,??? kalau punya ane tolong di kasih tau ya,,,,

Farid mengatakan...

langsung saya praktekin gan ?

Uem Cuters mengatakan...

Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

Uem Cuters mengatakan...

Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

Poskan Komentar