. Buku Tamu Show/Hide dari Atas | Catatan Si Virgo Girl

 Subscribe in a reader

Berlangganan gratis Via Email Di bawah ini

Friday, August 26, 2011

Buku Tamu Show/Hide dari Atas

Beberapa waktu yang lalu ada yang menanyakan gimana cara membuat guets book seperti yang ada pada blog saya ini, nah pada kesempatan kali ini saya bakal memberikan ulasannya, langsung ja ya...

     Cara membuatnya :
1.      Login blogger
2.      Rancangan, Tambah GadgetHtml/Java Script 
3.      Dan Simpan kode berikut :

     <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBLy7m1PkYR7XpvVQ1NaIC5G87QbOPP0Crz3DTfL7VO3yP93IT4ndCCn4bf0943tWiDTpSChHrtk89GqlVaiQfcED3WsJCZ83UsQTNDSMxHTIkF08qvSRuFt7eZG9iSgmaXkOS3R0PCnU/s1600/Guestbook.png" border="0" /></a></div>
</div>

Pertama saya melihat guest book ini ada pada blog http://tip-triksblogger.blogspot.com sangat menarik dan cute, saya coba di blog ini dan berhasil. Selamat Mencoba

17 comments:

ya sama-sama, moga bermanfaat...

Izin Menerapkan Sob...

silahkan... moga berhasil.

sist, klo udah punya trus ganti yg ne..kira-kira isi guest book yg lama ilang gk?

gak bakalan hilang, kita cuman merubah tampilan guestbook'y aja... klo isi'y tetap, di javascript'y kita bisa gunakan room chat yang sudah kita miliki,,,
jangan segan2 jika ada yang perlu di tanyakan lagi... :)

dulu sih aku suka pasang buku tamu, tapi sayang sekali aku gak pake buku tamu untuk sekarang ini semenjak pembanned-an akun Google Adsense beberapa bulan yg lalu, hehe..

seep cha..thanks infox..bakal dicoba :D

yupz... selamat mencoba...

bagus gan, tapi sayang bikin berat blog

Mantaaap ... ntr kapan2 ikut masang ah .. :)

emng rada berat sich, n saya blom ketemu kodenya yang lebih ringan..

bisa buat wordpress gak nich???

wah.. klo itu q kurang tau jga, coz q ambilnya dari blog tip-triksblogger.blogspot.com, di atas juga q posting url'y.. coba aja tanya ma dia.. :)

makasih sist share'a.......berhasilllllllll

yg tulisan biru diapain tuh sist?

yang tulisan biru itu di copas ama kode cbox yang kita punya

 

My Followers

Page Like

Copyright© 2011 Catatan Si Virgo Girl | Template Blogger Designer by : Utta' |