14 June, 2010

Buku Tamu Terselip di samping

Buat kamu yang suka, dengan blogwalking pasti senang banget kalo di blog yang kamu kunjungi mempunyai shout box/chat mix atau buku tamu. Di sini kamu bisa meninggalkan jejak berupa link blog/website kamu dan juga pesan untuk si empunya blog.

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 Masukan Kode shoutbox Kamu di sini!(yang saya bold merah di atas), ganti dengan kode Skhoutbox yang Kamu punya dan Simpan. Kamu Juga Bisa mengganti design tombol buka/tutup widget buku tamu kamu dengan tombol, design buatan saya sendiri di bawah ini. Caranya : Perhatikan Kode yang saya bold warna biru di atas. Ganti kode Direct Link-nya dengan kode Direct Link dari gambar design saya di bawah. Note : Tanda  '   ' (petik) pada awal dan akhir kode jangan sampai hilang.

























Yap! oke kah! widgetnya, jadi hemat ruang.. he he he! well enjoy.. salam...

9 comments

  1. markasih bro dapat tips bagus lagi

    ReplyDelete
  2. Tutorial yang bagus, aku suka sama design tombol buka/tutup yang ke-3 salam ngeblog

    ReplyDelete
  3. yoi boleh juga nih widget! makin hemat makin cermat. Nice tutorial gan.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Perhatikan kode berikut letaknya paling atas

    <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

    ReplyDelete
  6. terima kasih mas, maaf, itu post-nya kehapus . . . tadi lupa saya . . . :D

    ReplyDelete
  7. Udah saya tes, sukses mas!!

    http://banyoesoft.blogspot.com

    terima kasih banyak . .

    ReplyDelete
  8. 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....

    ReplyDelete
  9. Ukurannya ga pasa kali Eva kalo aku pake design gambar buku tamunya 30(lebar) X 100(tinggi)pixel

    Kamu bisa pake ukuran lebih kecil dari itu misalnya 25 X 95

    ReplyDelete


Copyright © 2016 Photoshop blog dan Blogger