Home > Blogger > Show Hiden Buku Tamu di Samping Kanan Blog

Show Hiden Buku Tamu di Samping Kanan Blog

Cara dan gaya buku tamu seperti ini banyak digunakan oleh para bloger, yang salah satu alasannya untuk memperirit penempatan pada halaman blog, juga untuk memudahkan para mengunjung untuk menulis dan mengisi buku tamu tanpa harus membuka halaman lagi.
Pada awalnya, saya rasa cara seperti ini dapat menambah beban berat loading halaman blog pas kita membukanya. 
Kalau kita membuat satu halaman lagi untuk buku tamu, berarti kita harus membuka dan menunggu loading lagi untuk nyampai di buku tamu / guestbook..! Ya.. sama saja..! Mending kita selipin saja di samping kanan blog, simpel kan..?!

Baik, kita coba ikuti langkah dan cara-caranya:

  • Login dengan akun blogger kita
  • Masuk ke rancangan
  • Tambah gadget
  • Pilih HTML / Javascript
  • Masukan script di bawah:

<!– Start Guestbook –>
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url(‘http://3.bp.blogspot.com/-oNAeGdK6VSY/T78PNPCy9JI/AAAAAAAAA1o/FFtny1WcuFs/s1600/Guest.png&#8217;) no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#efefef;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type=”text/javascript”>
function showHidehcr(){
var hcr = document.getElementById(“hcr”);
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById(“hcr”);
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + “px”;
if(x0!=xf){setTimeout(“movehcr(“+x+”, “+xf+”)”, 10);}
}
</script>
<div id=”hcr”>
<div class=”hcrtab” onclick=”showHidehcr()”> </div>
<div class=”hcrcontent”>
CODE SCRIPT BUKU TAMU / CBOX KITA TEMPATKAN DI SINI!

<div class=”hc-credit”>
<span style=”float:left”>
</span>
</div>
</div>
</div>
<script type=”text/javascript”>
var hcr = document.getElementById(“hcr”);
hcr.style.right = (30-hcr.offsetWidth).toString() + “px”;
</script>
<!– End Guestbook –>

  • Selesai..
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: