Rabu, 16 Februari 2011
1
Membuat fitur kolom melayang
Nah buat kolom tambahan buat tempat kotak saran/dll deh.biar blog kalian gak terkesan rame/acak2kan. klo blog kalian bisa dihemat dengan bantuan script ini kan enak.
langsung aj buat tambahkan widget baru : Html/javascript
copy code dibawah ini :
--------------------------------------------------------------------------------
<span class="fullpost"> </span>
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:70px;
width:70px;
float:left;
cursor:pointer;
background:url(' http://h1.ripway.com/efanfadilah/visitor.png ') no-repeat;
}
.gbcontent{
float:left;
border:1px solid #BDBDBD;
background:#FFFFFF;
width:290px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 60-w) : moveGB(60-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<!-- masukkan code laenx dibawah ini -->
isikan script lainnya didalam sini ....
<!-- akhir tambahan kode lain2-->
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (60-gb.offsetWidth).toString() + "px";
</script></div></div>
<div style="text-align: right;">
<a href="javascript:showHideGB()">
</a></div>
--------------------------------------------------------------------------------
garis2nya gak usah dicopy yow hehehe.
next kalian bisa tambahkan script laenx di antara tulisan merah di atas :
tepatnya di tulisan warna biru kaya ini
--------------------------------------------------------------------------------
<!-- masukkan code laenx dibawah ini -->
isikan script lainnya didalam sini ....
<!-- akhir tambahan kode lain2-->
--------------------------------------------------------------------------------
nah tugas beres deh. simpen dan nikmati hasilnya .....
langsung aj buat tambahkan widget baru : Html/javascript
copy code dibawah ini :
--------------------------------------------------------------------------------
<span class="fullpost"> </span>
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:70px;
width:70px;
float:left;
cursor:pointer;
background:url(' http://h1.ripway.com/efanfadilah/visitor.png ') no-repeat;
}
.gbcontent{
float:left;
border:1px solid #BDBDBD;
background:#FFFFFF;
width:290px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 60-w) : moveGB(60-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<!-- masukkan code laenx dibawah ini -->
isikan script lainnya didalam sini ....
<!-- akhir tambahan kode lain2-->
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (60-gb.offsetWidth).toString() + "px";
</script></div></div>
<div style="text-align: right;">
<a href="javascript:showHideGB()">
</a></div>
--------------------------------------------------------------------------------
garis2nya gak usah dicopy yow hehehe.
next kalian bisa tambahkan script laenx di antara tulisan merah di atas :
tepatnya di tulisan warna biru kaya ini
--------------------------------------------------------------------------------
<!-- masukkan code laenx dibawah ini -->
isikan script lainnya didalam sini ....
<!-- akhir tambahan kode lain2-->
--------------------------------------------------------------------------------
nah tugas beres deh. simpen dan nikmati hasilnya .....
Langganan:
Posting Komentar (Atom)
1 Responses to “Membuat fitur kolom melayang”
16 Desember 2011 pukul 14.58
Makasih infonya keren cuy
Posting Komentar