Cara Membuat Elemen Sembunyi di-Sisi Kiri

Rabu, 17 Oktober 2012

Postingan saya sebelumnya Cara Membuat Elemen Sembunyi disisi Kanan, sekarang saya akan berbagi lagi dengan kawan Cara Membuat Elemen Sembunyi di sisi Kiri :z; hal ini saya sampaikan karena selera kita berbeda-beda dan yang paling sering saya lihat pada Blog terutama yang disisi kanan, kalau kawan berminat dua-duanya tidak ada masalah karena kode scriptnya sudah saya bedakan :x;
Caranya sama dengan yang sebelumnya : 
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML / JavaScript
  • Copas Script berikut kedalamnya

<style type="text/css">
#bbl {
position:fixed;
top:50px;left:0px;
z-index:+1000;
}
* html #bbl {position:relative;}
.bbltab {
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://4.bp.blogspot.com/-XkkW-lW5fYg/UH1-QYBk_8I/AAAAAAAAFa4/2Naj4B2f7AA/s1600/Komen-tar.png') no-repeat;
}
.bblcontent {
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
.bb-credit {font-size:9px}
.bb-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidebbl(){
var bbl = document.getElementById("bbl");
var w = bbl.offsetWidth;
bbl.opened ? movebbl(0, 30-w) : movebbl(20-w, 0);
bbl.opened = !bbl.opened;
}
function movebbl(x0, xf){
var bbl = document.getElementById("bbl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
bbl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movebbl("+x+", "+xf+")", 10);}
}
</script>
<div id="bbl">
<div class="bblcontent">
<center>=====SIMPAN FILE DISINI=====</center>

<div class="bb-credit">
<span style="float:right">
<a href="javascript:showHidebbl()">
[close]
</a></span></div></div>
<div class="bbltab" onclick="showHidebbl()"> </div>
<script type="text/javascript">
var bbl = document.getElementById("bbl");
bbl.style.left = (30-bbl.offsetWidth).toString() + "px";
</script></div>

  • Teks yang berwarna merah untuk posisi silahkan disesuaikan
  • Teks yang berwarna biru silahkan diganti dan disesuaikan dengan isinya
  • Script Cara Membuat Elemen Sembunyi disisi kanan maupun disisi kiri ini bisa juga kawan simpan pada Template Blog sebelum </body></html> dan jangan lupa di-parse dulu :q; 
Selamat Mencoba !!!


0 komentar:

Posting Komentar