Oke cukup basa basinya mari kita praktekin.
1. Langkah pertama copy kode HTML di bawah ini
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:right;
cursor:pointer;
background:url('http://i1182.photobucket.com/albums/x453/marioadit/foto%20web/martabs.png') no-repeat;
}
.gbcontent{
float:right;
border:2px solid #00FF7F;
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.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- Gantilah Teks ini dengan kode HTML ShoutBox Anda-->
<br/>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
<div style="text-align:right; font-size:80%">
Widget by:
<a href="http://mariozoner.blogspot.com">
Mario Zoner
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.left = (30-gb.offsetWidth).toString() + "px";
</script></div>
Keterangan :
* Kode yang berwarna biru ganti dengan kode HTML shoutbox anda
* Kode yang berwarna merah (http://i1182.photobucket.com/albums/x453/marioadit/foto%20web/martabs.png) adalah gambar tabs nya. Sobat bisa memasukkan gambar tab sobat sendiri yang sudah di upload ke internet. Apabila sobat tidak ingin repot-repot sobat bisa menggunakan url tabs hasil kreasi saya disini : http://s1182.photobucket.com/albums/x453/marioadit/Kreasiku/. :-)
2. Kemudian Loginlah ke akun blog sobat
3. Pilih Rancangan > Elemen Laman > Tambah Gadget > Pilih HTML/JavaScript
4. Kemudian Paste kode HTML yang sudah di copy tadi ke kotak konten
5. Klik Simpan dan lihat hasilnya
Untuk Shoutbox dibawah halaman berikut kodenya
Untuk dibagian kanan halaman
Semoga artikelnya bermanfaat
0 comments:
Post a Comment
Mohon tinggalkan jejak/komentar sobat disini. Dilarang SPAM. Okey...