membuat cbox buka tutup di sebelah kiri

udah lama banget gak bikin postingan, maklumlah.. dunia nyata lebih susah di atur ketimbang dunia maya. pada posting sebelumnya saya sudah membahas MEMBUAT BUKU TAMU BUKA TUTUP DI SAMPING. namun pada posting yang ini posisi buku tamunya ada di sebelah kiri. biar penjelasannya ga panjang langsung di simak aja tutornya.

BIASAKAN BACKUP ATAU DOWNLOAD TEMPLATE SEBELUM DI EDIT
TUTORIAL

1. Tentunya kamu harus punya script Cbox dulu. kalau belum ada baca ini.
2. Kalau sudah punya lanjut Login dan masuk Profil Blog kamu.
3. Selanjutnya klik Tata Letak , Tambah gadget ( posisnya bebas ), pilih HTML/JavaScript.
4. Kemudian copy - paste kode di bawah ini pada kotak yang tersedia.

<style>
#hcl {
position:fixed; top:23px;;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {height:190px;width:40px;
float:left;
cursor:pointer;
background:url('http://i1347.photobucket.com/albums/p704/artaa666/BUKUTAMUcyan2_zps7f61176f.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #ffffff;
background:#F5F5F5;
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">

     LETAKAN KODE SCRIPT CBOX DI SINI
<br />
<div class="hc-credit">
<span style="float:left">
</span>
<span style="float:right">
</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>

Keterangan:
Text yang berwarna merah gati dengan kode dan gambar yang kamu punya.
untuk gambar kamu bisa cari di google atau bisa klik disini

5. Kemudian Save, dan lihat blog mu. semoga berhasil ya.. :)

Semoga artikel singkat ini bisa membantu.

Share artikel ke: Facebook Twitter Google+ Linkedin Technorati Digg