search

Minggu, 10 Februari 2013

cara membuat buku tamu

Kali ini saya akan memposting "Cara Memasang Buku Tamu Unik di Blog. Biasanya pada blog-blog orang lain terdapat buku tamu, nah biasanya cara pemasangan buku tamu berbeda-beda, ada yang memasang dengan cara biasa, ada juga dengan cara menyembunyikannya. Nah saya akan menjelaskan bagaimana cara memasang buku tamu di blog dengan teknik floating. Nah langsung saja langkah-langkahnya sebagai berikut :
Klik "Tambah Gadget" pada blog anda lalu pilih "HTML/JavaScript" dan letakkan script berikut di dalam formulirnya
<div style="position:fixed; left:0px; bottom:0px;">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js'></script>
<script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle(600, "easeOutBounce") $(this).toggleClass("active"); return false; }); }); </script>
<style type="text/css"> a:focus {outline: none; } #panel {background: #555;border:1px solid #000; color:#FFFFFF;     height: auto;display: none;text-align:justify; } .slide {margin: 0;padding: 0;border-top: solid 4px #422410;     background: #000 no-repeat center top; } .btn-slide { background: no-repeat right -50px; text-align: center;width: 70px; height: 15px; padding: 3px 3px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; }</style>
<div id="panel">Script Buku Tamu anda atau bisa juga widget yang lain<br /> 
</div><p class="slide"><a href="#" class="btn-slide"></a></p></div>
- Pada text color:#FFFFFF; anda bisa ganti dengan warna lain.
- Lalu pada baris background: url(URL ANDA).
- Anda juga dapat merubah letak floatingnya yaitu dengan merubah pada <div style="position:fixed;   left:0px; bottom:0px;"> atau bisa juga menghapusnya.
- Kemudian pada baris $("#panel").slideToggle(600, "easeOutBounce") anda dapat merubah tulisan "easeOutBounce" dapat di ganti dengan : -"easeInBack" atau "easeOutBack" atau "easeInOutBack"  dan dapat di lihat hasilnya sendiri.
- Anda pun dapat merubah kecepatan animasi pada baris (600, "easeOutBounce") anda dapat mengganti angka 600 dengan angka lain, semakin besar angka maka effect animasi semakin lambat.
Itu saja tutorial dari saya, semoga bermanfaat. :D

1 komentar:

Diberdayakan oleh Blogger.

slide to unlock