Sekarang saatnya buat saya berbagi kembali dengan kalian satu tutorial. Sebelumnya salah satu teman saya bertanya bagaimana cara membuat daftar tamu/kotak komentar kita bisa sembunyi sendiri (auto hide) di bagian kanan blog. Jadi untuk itu tanpa panjang lebar, mari kita mulai.
Sebelumnya untuk kamu semua yang belum memiliki kotak komentar dapat membuatnya di shoutmix atau cbox. Maka kalian akan mendapatkan kode untuk dipasang di blog kalian. Di sini kita akan tahu bagaimana membuat kotak komentar tidak seperti biasa, cekidot.
Pertama, buka blog kalian dan masuk ke pengaturan
Kedua, pilih tambah gadget kemudian pilih HTML/JAVASCRIPT
Ketiga, Copy-Paste Kode di bawah ini
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh99djna0qwEMfCIvIGUGPSGxYcjfx-UwUFTbHz-gzXw6XhcnRV6LHbf0ZsG1nc92AqFgpOWn0WhlRcBFnL6DqWPreiSuKW5EpdpXpHoBlHrAC9pPWB1ECE4B9YQ2axD9Z3qSZyNUvNhWCJ/') 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/>
<br/>
<a href="http://forantum.blogspot.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
Selanjutnya, Pada kode di atas, cari kode dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya.
Selesai.
Mudah bukan??
Sekarang saatnya kalian mencoba.
