Wednesday, 10 October 2012

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 comments:

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

    ReplyDelete
    Replies
    1. oww.. gitu ya..

      ini hnya sekedar share buat yg belum punya buku tamu

      Delete
  2. Mantef banget nih bang tutornya trims ya.

    ReplyDelete
  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

    ReplyDelete
    Replies
    1. ok...

      terserah sobat gimana cara mngatur blog sndiri..

      hnya sekedar share,,

      Delete
  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 . .

    ReplyDelete
    Replies
    1. hehe... terserah sobat gimana mau nya..
      yang penting happy Blogging

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

    ReplyDelete
    Replies
    1. rupanya sobat pernah mencoba nya ya..

      hmm

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

    ReplyDelete
    Replies
    1. sma-sma,, semoga bisa bermanfaat utk semua nya

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

    ReplyDelete
    Replies
    1. sma-sma sobat,,

      silahkan dipilih sesuai selera sobat

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

    kodenya panjang lagi/....

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

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

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

    ReplyDelete

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!!!