cara membuat cbox melayang hide di sebelah kiri
hai teman - teman tadi saya sudah bahas tentang membuat yang ke kanan
sekarang saya mau share nihh yang ke kiri :)
langsung aja nih caranya :
1. blogger.com > layout/tata letak > add gadget/tambah gadget > html/javascript
2. paste kode dibawah ini
Merah : HTML CBOX KALIAN
BIRU : url BLOG KALIAN
3. save dan lihat hasilnya
nah, sekian infonya semoga bermanfaat buat teman - teman blogger sekalian :)
sekarang saya mau share nihh yang ke kiri :)
1. blogger.com > layout/tata letak > add gadget/tambah gadget > html/javascript
2. paste kode dibawah ini
<!-- right hidden chatbox byhttp://kunaruh.blogspot.com/START -->
<style>
#hcl {
position:fixed;
top:35px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98iCDJA8QGIg_0_LFZUefvTTVnIYiJDoFG1GFOnXPg5DBs0Uk6L4jtZiA6CeTW1Re6_SIaScJY-iNjkftaEKtY37U5KpFcYqrinsDqUJwy0bKlJzROWnRHxMfJ87B_0hDVmHE_m9Jen0/s400/cbred-LEFT.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">
<style>
#hcl {
position:fixed;
top:35px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98iCDJA8QGIg_0_LFZUefvTTVnIYiJDoFG1GFOnXPg5DBs0Uk6L4jtZiA6CeTW1Re6_SIaScJY-iNjkftaEKtY37U5KpFcYqrinsDqUJwy0bKlJzROWnRHxMfJ87B_0hDVmHE_m9Jen0/s400/cbred-LEFT.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">
PASTE KODE KALIAN DISINI
<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
Get this
<a href=http://kunaruh.blogspot.com/2013/03/cara-membuat-cbox-melayang-hidden-di.html
target="_blank">Widget</a>.By:<a href=http://kunaruh.blogspot.com/
target="_blank">kunaruhblog</a></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>
<!-- right hidden chatbox by http://kunaruh.blogspot.com/END -->
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
Get this
<a href=http://kunaruh.blogspot.com/2013/03/cara-membuat-cbox-melayang-hidden-di.html
target="_blank">Widget</a>.By:<a href=http://kunaruh.blogspot.com/
target="_blank">kunaruhblog</a></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>
<!-- right hidden chatbox by http://kunaruh.blogspot.com/END -->
Merah : HTML CBOX KALIAN
BIRU : url BLOG KALIAN
3. save dan lihat hasilnya
nah, sekian infonya semoga bermanfaat buat teman - teman blogger sekalian :)
Diposting Oleh : Unknown ~ Kunaruhblog
Artikel cara membuat cbox melayang hide di sebelah kiri adalah artikel untuk semua orang tanpa terkecuali, dan semua blogger patut dihargai jadi saya harapkan tolong untuk memberikan link tautan atau link sumber http://kunaruh.blogspot.com, terima kasih :)
Categories:
info blog,
seputar komputer
terimakasih infomasinya gan...
BalasHapusyoi sama2..
BalasHapusgk bisa
BalasHapusmohon penjelasan yg lebih detail
Work neh gan, makasih ya
BalasHapusTerima Kasih Banyak Tutorialnya Sukses Berat
BalasHapus100% work gan....di tunggu kunjungan baliknya
BalasHapuslensatourtravel.blogspot.com