Marhaban Ya Ramadhan "Selamat Datang Bulan Suci Ramadhan",”Bulan Yang Penuh Berkah” dan ”Bulan Yang Lebih Mulia dari Seribu Bulan” “Selamat Menunaikan Ibadah Puasa“

Trik Membuat Buku Tamu Melayang

Pernah tidak melihat sebuah blog yang di samping kanan atas ada tulisan Buku Tamu dengan background hijau, yang kalau diklik akan keluar form isian yang menanyakan Nama, Website dan Message. Buku Tamu tersebut melayang artinya tidak terpengaruh oleh scroll mouse, walaupun mouse digulir ke bawah Buku Tamu tersebut tetap nampak. Mau tahu caranya?


  1. Sign in ke blogger dan silahkan Login dengan Account Anda

  2. Pilih Layout/Tata Letak

  3. Pilih Page Elemen/Elemen Halaman

  4. Klik Add a Gadget/Tambah Gadget

  5. Lalu pilih "HTML/JavaScript"

  6. Kemudian Copy-Paste kode 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://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">
    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 :
  7. Ganti tulisan yang berwarna merah dengan kode yang anda peroleh dari ShoutMix

  8. Icon Buku Tamu dapat anda ganti sesuka hati dengan terlebih dahulu merancangnya di Photoshop atau di CorelDraw, setelah itu upload di hosting image seperti photobucket dsb. lalu ambil URLnya dan pasang di background seperti blog teman kita ini. Klik Disini

  9. Selamat Mencoba
.

Comments :

16 komentar to “Trik Membuat Buku Tamu Melayang”
RASUL RAHMAN mengatakan...
on 

wow kren bos

Unknown mengatakan...
on 

mas cara ngilangin buku tamunya gmn?
aq dah coba cari kode htmlnya tu gak ktemu2!
masalahnya buku tamu pnya aq sama ma pnya mas, dan skrng aq dah pnya versi aq sndiri,
dlu pas mau pasang gak baca tutorial no 6-8,jd sama deh..
mohon bantuanya,,, newbie ne,,,

Anonim mengatakan...
on 

wow..! terimakasih tips-ny..!! ane boleh tanya ga bos...! itu yg dikode merah bisa di isi apa aja kan?? ga cuma shoutmix (ex gambar, menu, widget lainnya..) tul ga???

Solahudin mengatakan...
on 

Makasih kang atas infonya...saya pake untuk http://hpareview.blogspot.com

Jaka Zulham mengatakan...
on 

aha, blok aku udah semakin keren neh,
makasih gan infonya...
buku tamu aku udah ganti neh,,,
jadi lebih keren :)
liat aja, di http://jakazulham.blogspot[dot]com

Muhib Faisal mengatakan...
on 

Makasih tutornya :D

Unknown mengatakan...
on 

kren banget hasilnya.... thanks za mas..... kunjungi juga situs ini http://pmrwab.blogspot.com

https://www.arieffun.co.id mengatakan...
on 

makasih banget tips'a bermanfaat banget buat blog saya http://ariefkitaro.blogspot.com/
sekarang blog saya sudah punya buku tamu sendiri..hehehe
makasih banget

Ianside mengatakan...
on 

nice info, thanks....
lihat blog saya yang ini ya: http://halyangkusuka.blogspot.com

Dedek Ceria mengatakan...
on 

assalaamu'alaikum...klo mau bkin buku tamunya di sebelah kanan apanya yg di rubah dr scrip?? trimakasih.. wassalam...

Asriyatno mengatakan...
on 

sip bos dijajal

farhan.adriene mengatakan...
on 

tengkyu Oom.....

david setiawan mengatakan...
on 

terima kasih

INFANTRI MEDIA mengatakan...
on 

terima kasih bos

Taufik N.R. mengatakan...
on 

mantab, gimana caranya biar animasinya lebih cepet?? ^__^

Info Kutai Timur mengatakan...
on 

Terima kasih gan informasinya, sukses selalu dan salam kenal dari saya.

Posting Komentar