Dengan memanfaatkan ruang kita bisa membuat widget buku tamu terselip di samping. Jadi singkatnya kamu bisa menghemat ruang yang ada di blog kamu. Gimana yah kira-kira caranya membuat buku tamu menjadi terselip di samping blog?. yuk mari kita buat tutorialnya bareng-bareng.
Langkah pertama yang harus kamu lakukan adalah kamu harus memiliki kode shoutbox untuk buku tamu kamu. sebelumnya lihat dulu dafar shoutbox gratis rekomendasi dari saya dan juga cara membuat shoutbox.
Kalo kamu sebelumnya sudah punya ga masalah di manfaatkan aja.
1. Login ke dasbor blogger kamu.
2. KLIK Rancangan/Tata Letak --- Tambah Getget --- HTML/JavaScript+.
3. Copy-Paste-kan Code di bawah ini :
<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://i827.photobucket.com/albums/zz194/depalpiss/bukutamu5.png') no-repeat;} .gbcontent{ float:left; border:2px solid #000000; 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"> <div> <span class="Apple-style-span" style="font-size: x-small;">Tinggalkan Pesan Kamu di Sini!</span> </div> <a href="http://piss-blogger.blogspot.com/"><span class="Apple-style-span" style="font-size: x-small;">Salam Blogger Mania Indonesia</span></a> Masukkan Kode ShoutBox Kamu disini! <div> <span class="Apple-style-span" style="font-size: x-small;">Pengen Punya Widget kaya gini </span></div> <a href="http://piss-blogger.blogspot.com/2010/06/buku-tamu-terselip-di-samping.html">baca tutorialnya! di sini</a> <br /> <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>
4. Hapus kata
Yap! oke kah! widgetnya, jadi hemat ruang.. he he he! well enjoy.. salam...
Tags:
Blogspot
markasih bro dapat tips bagus lagi
BalasHapusTutorial yang bagus, aku suka sama design tombol buka/tutup yang ke-3 salam ngeblog
BalasHapusyoi boleh juga nih widget! makin hemat makin cermat. Nice tutorial gan.
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusPerhatikan kode berikut letaknya paling atas
BalasHapus<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
Kode top:50px di ganti center:50px
jadinya akan seperti di bawah ini
<style type="text/css">
#gb{
position:fixed;
center:50px;
kemudian sesuiakan shoutboxnya kira-kira berkisar antara : width="200" height="150"
Contohnya silahkan lihat di xsample-blogger.blogspot.com
terima kasih mas, maaf, itu post-nya kehapus . . . tadi lupa saya . . . :D
BalasHapusUdah saya tes, sukses mas!!
BalasHapushttp://banyoesoft.blogspot.com
terima kasih banyak . .
hai mas, ...terimakasih banyak udah berhasil aku buat buku tamunya yg buka tutup, cuma aku pakai gambar sendiri pas gambarnya kembali kok cuma setengah yg terlihat ya??? tolong advisenya mas....
BalasHapusUkurannya ga pasa kali Eva kalo aku pake design gambar buku tamunya 30(lebar) X 100(tinggi)pixel
BalasHapusKamu bisa pake ukuran lebih kecil dari itu misalnya 25 X 95