Jumat, 08 November 2013

Browse Manual » Wiring » » » » » » » » Cara Membuat Elemen Sembunyi di Sisi Kiri

Cara Membuat Elemen Sembunyi di Sisi Kiri


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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLE1dE9QD1BaiLZi4Vler079dtrdt1x9Z1A88bofvtyPbIkQOtsyyFtH1DB_VqvIBb-2Y1bw7ORd2JxAsFKn9CMM7Ml8gGBOMSVk-3fszYbwmqr7ddDwMbpKn_EqcU6yAjikbfX0V3uFU/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 !!!


Tidak ada komentar:

Posting Komentar