cara membuat buku tamu melayang di kiri blog [Edisi2]]


        Oke ini adalah lanjutan dari Post saya yang sebelumnya. kali ini saya akan berbagi caranya membuat buku tamu yang melayang di kiri blog anda.



Untuk Memasang buku tamu di sisi sebelah kiri blog anda :

Tambahkan kode HTML / Script di bawah ini di widget blog Anda




<!-- left hidden chatbox by http://www.sobatfauza.co.vu/ START -->

<style>

#hcl {

position:fixed;top:100px;

left:0px;

z-index:+1000;

}

* html #hcl {position:relative;}

.hcltab {height:100px;width:30px;

float:left;

cursor:pointer;

background:url('http://i1227.photobucket.com/albums/ee440/danghilal/idesainer/shoutbox-1.png') no-repeat;

}

.hclcontent {

float:left;

border:2px solid #790909;

background:#f3f6f7;

padding:10px;

}

.hc-credit {font-size:9px}

.hc-credit a {text-decoration:none}

</style>

<script type="text/javascript">

function showHidehcl(){

var hcl = document.getElementById("hcl");

var w = hcl.offsetWidth;

hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);

hcl.opened = !hcl.opened;

}

function movehcl(x0, xf){

var hcl = document.getElementById("hcl");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

hcl.style.left = x.toString() + "px";

if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}

}

</script>

<div id="hcl">

<div class="hclcontent">

Silakan Pasang Kode Buku Tamu sobat yang sudah di copy tadi Di Sini

<br />

<div class="hc-credit">

<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<span >

<span > Get this</span>

<a href="http://www.sobatfauza.co.vu/2013/03/cara-membuat-buku-tamu-yang-melayang-di.html" target="_blank">

<span class="Apple-style-span" > Desaign1</span> </a>

</span>

</span>

<span style="float:right">

<a href="javascript:showHidehcl()">

[close]

</a>

</span>

</div>

</div>

<div class="hcltab" onclick="showHidehcl()"> </div>

</div>

<script type="text/javascript">

var hcl = document.getElementById("hcl");

hcl.style.left = (30-hcl.offsetWidth).toString() + "px";

</script>

<!-- left hidden chatbox by http://www.sobatfauza.co.vu/ END -->



Note : Ganti Kode yang berwarna hijau dengan kode buku tamu / shoutbox Anda









How to Instalasi :



 Step yang
Pertama :

Anda Login terlebih dahulu ke akun Blogger Anda



Kedua :

Pergi ke Rancangan / Design pada Dashboard Anda



Selanjutnya :

Untuk Meletakkan Buku Tamu Disisi Kanan Blog :

Tambahkan kode HTML / Script di bawah ked widget blog anda (Anda sudah pasti tahu)



Dan Step yang
Terakhir :

Simpan Template dan Lihat Hasilnya.