Posted by AWAN THE KILL
-
-
Kemarin kita belajar
MEMBUAT RECENT POST DENGAN JQUERY sekarang saatnya kita belajar menampilkan buku tamu yang tersembunyi selain karena bosan dengan penampilan buku tamu ini jadi tidak kelihatan kalau buku tamu kita jarang di isi.
Buku tamu ini akan disembunyikan dibagian samping halaman blog kita, dan akan muncul ketika kita mengklik tombol buku tamu atau sebaliknya akan tutup jika kita mengklik tombolnya kembali.
LANGKAH LANGKAH MUDAH MEMBUAT BUKU TAMU TERSEMBUNYI
1. Login ke blogger
2. Klik tata letak
3. Tambahkan Gadjet pada elemen halaman
4. Pilih HTML JavaScript
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-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">
<!-- Ganti ini dengan kode buku tamu kamu -->
<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://asmancounter.blogspot.com/">
sini (Info Blog)
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
5. Ganti kode yang berwarna merah dengan kode chat box kita atau buku Tamu kita.
Selamat Mencoba dan lihat hasilnya.
Sumber@blogtrikdantips.blogspot
