Cara Membuat Buku Tamu "Autohide"



Setelah kemarin saya menjelaskan tentang cara membuat widget melayang (Buku Tamu). Sekarang saya akan menjelaskan cara membuat buku tamu yang autohide seperti yang ada di blog ini.
Ikuti langkah langkah berikut:


1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini... lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:117px;
width:50px;
float:left;
cursor:pointer;
background:url('http://sites.google.com/site/pahingdesign/images/tabs-paper-cuss-Clip.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #E0E0E0;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 47-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="pahingjepara" src="http://www6.shoutmix.com/?pahingjepara" width="200" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?pahingjepara">View shoutbox</a>
</iframe>
<br /><a href="http://catatancuss.blogspot.com/" title="Mau Membuat Yang Seperti Ini..???">Klik Aja Ini</a><br />
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
<!-- End ShoutMix -->
</div>


<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>


Keterangan :
  1. Ganti kode yang berwarna biru dengan kode Shoutmix  anda.
  2. Jika ingin merubah desain buku tamu, perhatikan kode yang berwarna merah. Berikut penjelasannya 
top:50px; (untuk merubah ketinggian buku tamu, bisa diubah dengan 40px atau sesuai kebutuhan) 
height:117px; width:50px; (untuk merubah tinggi dan lebar design yang selalu muncul, ganti ukuran sesuai dengan design baru) 
background:url('http://sites.google.com/site/pahingdesign/images/tabs-paper-cuss-Clip.png') no-repeat; (sesuaikan dengan alamat URL, tempat gambar/design baru disimpan) 
border:2px solid #E0E0E0; (Untuk merubah ukuran dan warna border atau garis keliling buku tamu)
background:#F5F5F5; (Untuk merubah Warna Background Buku Tamu
    Note: Untuk merubah  gambar gunakan format .PNG Transparan

    Nah semoga berhasil..Ditunggu komentarnya..
    Sumber: http://www.catatancuss.co.cc/









    15 Respones to "Cara Membuat Buku Tamu "Autohide""

    Andi Wong mengatakan...

    kalo buku tamunya menarik.. pengunjung blog akan terpesona melihat kegantengan fitur blogmu gan.. wowww !!!.. the Coolest blog... hehe.. trik ini emg keren


    8/08/2010
    Penyo mengatakan...

    thanks tuk tipsnya mas.. sangat bermanfaat sekali..

    oh iya, blognya dah saya link balik di page link exchange.. maaf, agak telat mas..

    salam kenal dan semoga sukses selalu..


    8/21/2010
    Belajar komuter mengatakan...

    sangat bagus patut di coba


    9/04/2010
    DonDenasBlog mengatakan...

    mantaP bang....


    1/29/2011
    Afris tkj1 SMKNPUR mengatakan...

    thx gan.... sangat bermanfaat...


    4/18/2011
    shinji mengatakan...

    arigatou ne~~~~~~~~~~


    11/20/2011
    Arif Rahman Prasetyo mengatakan...

    wah,tampilan blog anda yang tulisan berjalan anda juga icon dari buku tamu saya mirip dengan blog saya.Kalu gitu saya ja yang ganti ja

    by : http://www.berbagipengetahuan3.tk dan telah berganti menjadi http://www.infonetgue.com


    6/07/2012
    SEGALANYA mengatakan...

    terimakasih atas informasinya... visit back!!!!!


    6/27/2012
    Asruvi Al Murukany mengatakan...

    OK gan,, sebagai pemula, ini sangat membantu, thank`s


    9/03/2012
    Bulu Perindu mengatakan...

    Situsnya bagus sekali. Senang bisa berkunjung ke situs ini.


    2/05/2013
    Batu Mata Kucing mengatakan...

    Makasih uda share cara membuat buku tamunya..


    2/05/2013
    Dunia Paranormal mengatakan...

    Mantap info buku tamunya.. tetap semangat posting ya.. :)


    2/13/2013
    Batu Sulaiman mengatakan...

    Langsung dicoba tips membuat buku tamunya bro..


    2/13/2013
    Fauzan Hibatullah mengatakan...

    blognya agak berat gan, saran saya sih kurangi widget yang gak perlu aja


    8/05/2013
    Fauzan Hibatullah mengatakan...

    koment lagi. mantab gan, ane suka yg begini karna gak sensitive ketika kesentuh mouse.....


    8/05/2013

    Posting Komentar

    SILAHKAN TINGGALKAN KOMENTAR, KRITIK ATAU SARAN
    KOMENTAR DAN SARAN ANDA SANGAT BERHARGA BAGI KAMI
    TERIMA KASIH SUDAH MENGUNJUNGI SEMOGA BERMANFAAT

     

    © 2011 Personal Blog All Rights Reserved Blogger