Celoteh Sang Galang

Blog Tempat Berbagi Tips dan Trik Dunia Blogger
English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified
Celoteh Sang Galang
Hanya Sebuah Catatan...

Cara Membuat Buku Tamu Show/Hide dari Atas

Posted by Galang 7 April 2011
Daftar Sekarang Bonus $10 langsung dari PROFITCLICKING


Kali ini saya akan membagi tips dan trik "Cara Membuat Buku Tamu Show/Hide dari Atas".  Gak Pake Lama langsung aja Dach...

  1. Login blogger
  2. Rancangan, Tambah GadgetHtml/java script
  3. Dan Simpan kode berikut  : 
Kode Script
<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 #999;
background: #000;
-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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-E5AN1cLbhLVaHac_YYlYrCs9pbMZlZ0oykPODIomp5tPh624XfMx-xlZX-WPpDI_hbFejQKONoCrNFolpwVoj2i-6JpB6YN-2tbF-33_pN7LN5tPdLlaWy27ZXXYdjxSSWE0hEY9PWrm/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>

</div></div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/GUESTBOOK.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

Catatan:
Jika ingin menampilkan posisi Tombol di samping seperti Blog saya ini, Tinggal ganti Kode di bawah ini
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/GUESTBOOK.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

Dengan Kode di bawah ini
<div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/CHATBOX.png"  /></a>
</div>

Sekian Terima Kasih...

GET UPDATE ARTIKEL MENARIK CELOTEH GALANG
Dapatkan kiriman artikel terbaru langsung ke email anda!

Artikel Terkait:

  1. nice trik sob..thanks ya dh sharing..hhe..jangan lupa jga komentar balik di blogku ya sobat

     
  2. dedy Says:
  3. soutboxnya mana gan?
    ane ki$$ ya :D

     
  4. Anonim Says:
  5. Salut
    Beragi memang indah
    Terima kasih ya sob :)

     
  6. Unknown Says:
  7. Salam sahabat
    Bagus dan memberikan informadi bagi saya jadi lebih diharuskan untuk memahami kode kode yang ada
    Oh iya dah saya follow thanks ya

     
  8. Anonim Says:
  9. FOLLOW BACK GAN GALANG..

     
  10. hahah okey,,mksh sob infonya,,,ttrick ini udah nacep di blog saya :)

     
  11. BlackCyber Says:
  12. kk kalao bikin chatbox yang ada backgroundnya kea apa caranya kk mohon di kasihtau caranya....


    and FOLLOW BACK

     
  13. admin Says:
  14. mantap gan,,,, ane dah pasang,,,cek dimari, thx ya gan. ^^

     
  15. nanya nie gan'
    gimana ya klo show hide na dri bawah???kya chat facebook gtu" hehehe
    thank dlu infox. :)

     
  16. Mas Mur Says:
  17. Makasih Mas, ini sangat membantu saya..maklum masih pemula...heheh

     
  18. Harveyfani Says:
  19. thanks gan dah beri ilmunya.. :)
    ijin copas yah,
    maklum masih newbie

     
  20. Galang Says:
  21. @husni_fadillah:ok copas aja asal kasih link sumbernya aja...

     
  22. Anonim Says:
  23. keren,,, cara ganti smiliesnya gimana?? kayak yg di blog ini, soalnya lucu

     
  24. DekaloR Says:
  25. ijin sedot gan :D

     
  26. Unknown Says:
  27. gan maaf tolong di cek di http://mbahtrik.blogspot.com/ karena punya saya gak mulus padahal sudah ngikutin caranya seperti yg di atas

     
  28. Unknown Says:
  29. thx ya mas...ini sangat banyak membantu saya...tp yg saya copy sptnya ga ngefek ya...tdk ada perubahan untuk sharing is caringnya.
    http://decomile.blogspot.com/
    ini blog saya sdh saya ikuti semuanya dan hasilnya biasa aja...ga ada perubahan...mohon bantuannya ya...thx

     
  30. Unknown Says:
  31. Kunjungi blog ane yg newby ya gan...
    http://rodelaide.blogspot.com/

     
  32. Andri Says:
  33. bagus infonya sob ,jangan lupa mampir yaaa...http://kink-exclusive.blogspot.com/

     
  34. Anonim Says:
  35. oke, mas mksih tutorialnya
    templatenya keren :D
    http://dunia-android21.blogspot.com

     
  36. Unknown Says:
  37. makasih kang infonya

    http://adutburza.blogspot.com/
    ww.giribig.com
    duniagame.info
    idcheat.com

     

Posting Komentar


close