DhanY SlahLU
Masih Kita membahas tentang mendesain blog....
kali ini saya impian relugais12 akan membahas tentang judul di atas tersebut.
mungkin biar tidak banyak ucapan ge saya akan langsung saja memberikan cara-caranya...
kali ini saya impian relugais12 akan membahas tentang judul di atas tersebut.
mungkin biar tidak banyak ucapan ge saya akan langsung saja memberikan cara-caranya...
Langsung saja yach>>>>>
1. Loginlah dulu di Blogger >Rancangan > Elemen Laman > KlikTambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini...
lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...1. Loginlah dulu di Blogger >Rancangan > Elemen Laman > KlikTambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini...
<style type="text/css">
#gb{
position:fixed;
top:0px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:110px;
float:left;
cursor:pointer;
background:url('http://i915.photobucket.com/albums/ac357/adiluvdv/buku-tamu_03.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-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"> <!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="gaga12" src="http://www4.shoutmix.com/?gaga12" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www4.shoutmix.com/?gaga12">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->
<br/>
Anda berminat buat Buku Tamu seperti ini?<br/>
Klik di
<a href="http://impianrelugais12.blogspot.com/2010/08/suatu-ketika-lagi-ngenet-tiba-tiba.html">
sini </a>#gb{
position:fixed;
top:0px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:110px;
float:left;
cursor:pointer;
background:url('http://i915.photobucket.com/albums/ac357/adiluvdv/buku-tamu_03.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-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"> <!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="gaga12" src="http://www4.shoutmix.com/?gaga12" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www4.shoutmix.com/?gaga12">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->
<br/>
Anda berminat buat Buku Tamu seperti ini?<br/>
Klik di
<a href="http://impianrelugais12.blogspot.com/2010/08/suatu-ketika-lagi-ngenet-tiba-tiba.html">
<div style="text-align:right">Contoh di atas adalah 'Widget Melayang Shoutmix'
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Keterangan :
Merah = Gantilah dengan kode Scripts Widget yang akan kamu tampilkan Misalnya kode Scripts Widget Shoutmix..
Biru = Gantilah dengan URL Gambar Tab kamu (atau pakai saja url gambar tab diatas tdi) .. Gambarnya bisa kamu buat dengan Program seperti Photoshop.. lalu kamu Upload/simpan gambar tsb diPhotobucket ..baru kamu bisa mendapat kode url Direct Link gambar tdi..
4. Simpanlah dan Selesai dech^_^... namun sebaiknya posisi widgetnya di Bagian Tata letak di letakan paling bawah lalu klik simpan.. Untuk melihat hasilnya silahkan Refresh,reload tab,atau tekan f5 pada blog kamu.. Mudahkan.. ;-)
Posted in: 
