Cara Membuat Buku Tamu Hide Dari Atas

Thursday, July 28, 2011

Kembali lagi berbagi tentang tutorial blogger yang pada tutorial sebelumnya Membuat buku tamu tersembunyi dan Cara Menyembunyikan Widget Follow kali ini oktri akan berbagi tutorial yaitu Cara Membuat Buku Tamu Show/Hide Dari Atas, Pada prinsipnya tutorial ini sama saja dengan tutorial sebelumnya seperti tutorial cara menyembunyikan widget follow,apabila pada tutorial tersebut kita klik gambar muncul lah follow dari bawah,nah pada tutorial ini saya membuat buku tamu show hide dari atas kebalikan dari tutorial cara menyembunyikan widget follow,
Sekian gambar tutorial tersebut, Apabila ingin melihat Demo nya klik

http://tips-blog-informasi.blogspot.com/

Untuk membuat buku tamu show/hide dari atas ikuti langkah-langkah berikut:
1. Masuk ke account Blogger kamu, pilih Layout: kemudian Page Elements.
2. Klik "Add a Gadget" yang mana saja, kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:
<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;">



</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://www.oktri.co.cc/2011/06/cara-membuat-buku-tamu-showhide-dari.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;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ; /></a>
</div>

4. SIMPAN

Catatan :

Ganti texs berwarna merah dengan kode buku tamu anda.
Text warna kuning merupakan position dari gambar yang kita inginkan
Ganti teks warna biru dengan gambar yg diinginkan