Cara Membuat Buku Tamu Show dan Hide Dari Atas

http://sigli-cyber.blogspot.com



Lihatlah Widget buku tamu Pada Blog Sigli-Cyber ini,,itu Merupakan Buku tamu yang Show Dam Hide (terbitkan dan sembunyikan) dari atas ke bawah.
Silahkan Lihat DEMO nya di samping Layar sobat.

Jadi,Pada kesempatan ini,Saya akan membahas bagaimana 
Cara Membuat Buku Tamu Show dan Hide Dari Atas seperti Yang saya terapkan di Blog Sigli-Cyber ini.
Bagi Yang berminat.,silahkan ikuti langkah-langkah dibawah ini:




1. Login Ke Akun Blog Sobat
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilhan HTML/JavaScript
6. Pastekan script di bawah ini ke kolom Konten.



<style type="text/css"> #at{ position:fixed; right:450px; z-index:+1000; } * html #at{position:relative;} .attab{ height:100px; width:30px; float:left; cursor:pointer; background:url(); } .atcontent{ float:left; border:2px solid #33e104; background:url(http://i846.photobucket.com/albums/ab26/arifins/fire.gif)#000000 repeat-x bottom center scroll; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; padding:10px; -moz-box-shadow: 0px 2px 5px 0px #f8f9b9; } </style> <script type="text/javascript"> function showHideAT(){ var at = document.getElementById("at"); var w = at.offsetWidth; at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0); at.opened = !at.opened; } function moveAT(x0, xf){ var at = document.getElementById("at"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; at.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);} } </script> <div id="at"> <div class="attab" onclick="showHideAT()"> </div> <div class="atcontent"> <div align="center"> <div style="background:#000;"> 

<!-- Simpan Kode cbox atau shoutmix nya disini --> 


 </div> </div> <br /> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" alt="close" title="Click here to Close Cbox" /></a></div> <span ><a href=http://sigli-cyber.blogspot.com/2012/10/cara-membuat-buku-tamu-show-dan-hide.html"><div style="color: rgb(68, 68, 68);"> <span style="font-size:xx-small;">Get This Gadget</span></div></a></span> </div></div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script> <a href="javascript:showHideAT()"/><img border="0" src="http://i634.photobucket.com/albums/uu66/oktri_2009/o0c2d.png" alt="Fivers" title="Klik untuk membuka Buku Tamu" style="display:scroll;position: fixed; bottom:350px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ; /></a> </div>


7.Simpan

NB:

  • Ganti texs berwarna merah dengan kode buku tamu Sobat.
  • Ganti juga teks warna biru dengan gambar yg Sobat inginkan
  • Text warna Putih merupakan position dari gambar yang kita inginkan



Selamat Mencoba

28 komentar:

  1. kebetulan sudah pasang juga di blog saya sobat...

    BalasHapus
    Balasan
    1. oww.. gitu ya..

      ini hnya sekedar share buat yg belum punya buku tamu

      Hapus
  2. Mantef banget nih bang tutornya trims ya.

    BalasHapus
  3. wah keren sob...? saya dulu juga pernah pake seperti ini,
    sampai ahirnya saya hapus buku tmunya,biar semuapengunjung meninggalkan jejak di komentar saja...? nice tips

    BalasHapus
    Balasan
    1. ok...

      terserah sobat gimana cara mngatur blog sndiri..

      hnya sekedar share,,

      Hapus
  4. . . kalo aq pasang kayak gituan, takut gak bisa berkunjung n kasihan nanti yg udah ketik n mampir kecewa. jadi lebih baek aq gak pasang . .

    BalasHapus
  5. saya juga dulu pernah pasang bukutamu sperti ini sob, tpi saya rasa bikin ribet, jdi saya copot lgi :D

    BalasHapus
  6. Thanks triknya sangat membantu untuk blogger lain ..

    BalasHapus
    Balasan
    1. sma-sma,, semoga bisa bermanfaat utk semua nya

      Hapus
  7. wah lebih keren dari yang buka tutup ke samping ya sob, bungkus dulu ah, makasih sob

    BalasHapus
    Balasan
    1. sma-sma sobat,,

      silahkan dipilih sesuai selera sobat

      Hapus
  8. apa g berat nih sob, pake javascript...

    kodenya panjang lagi/....

    BalasHapus
    Balasan
    1. apakah blog ini terasa berat oleh sobat,,(krna buku tamu ini sya terapkan di blog sya)

      jika tidak..?? berarti tidak membuat blog kita menjadi berat..ASALkan!! tidak memakai widget2 yg tidak seharusnya diperlukan..

      Hapus
  9. Ijin bookmark gan... sapa tau ntar buruh... heee

    BalasHapus
  10. wah, penting nih, aku pengen pasang buku tamu seperti itu sob, maklum blogku msh baru

    BalasHapus

Silahkan Anda Berkomentar Dengan Baik dan Sopan.

~Pesan Komentar Yang Menyertakan Link Hidup,SPAM,JUNK ,dan sejenisnya ,akan Saya Hapus Dari Postingan ini.

~Bagi Yang Meng-Follow Blog Ini,Jangan Lupa Dikonfirmasi Agar Saya Bisa Meng-Follow sobat kembali

~Maaf juga jika saya sering kali tidak membalas komentar dari Anda

Komentar Anda sangat bermanfaat untuk perkembangan blog ini. Terima Kasih!!!

Diberdayakan oleh Blogger.