Asas aku buat macam ni adalah untuk memudahkan rakan blogger atau yang baru berjinak-jinak nak menjadi blogger memilih tab yang bersesuaian dengan template..dulu aku punyala susah nak mencari tab yang sesuai untuk template blog aku..so tadi aku kerjakan mata dan tangan serta seluruh anggota badan (cess..) kumpulkan semua tab-tab hidden shoutbox ni..itupun ada yang aku belum jumpa, jadi yang ini je lar yang aku mampu share dengan korang.
Pelbagai warna korang boleh pilih, float kiri dan kanan..tunggu apa lagi, rembatla..haha..kepada sesiapa yang ada buat tab shoutbox sendiri, especially animated, apa salahnya korang tinggalkan link tab tu di ruangan komen..sharing is caring right ? kalau yang belum tahu macam mana nak change tab lihat di bawah.
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://t0.gstatic.com/images?q=tbn:ANd9GcRxfe4ZtVmMeuKwCUYcPz1msUoor-ir57oqTelhQQFhVw5e2J8&t=1&usg=__RaMprK_txFewFnqw3xcWibskelU=') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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">
--- kod shoutmix/cbox/live stream ---
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
korang nampak yang ini ?
http://t0.gstatic.com/images?q=tbn:ANd9GcRxfe4ZtVmMeuKwCUYcPz1msUoor-ir57oqTelhQQFhVw5e2J8&t=1&usg=__RaMprK_txFewFnqw3xcWibskelU=
sekarang gantikan url nih dengan url tab pilihan korang yang di atas..macam mana ek ? hehe..korang pergi kat pic tab pilihan korang tu, pastu click open image in new tab..highlight kan url dan copy kemudian gantikannya url di atas dengan url tab pilihan korang..ada contoh di bawah ni..
satu lagi kalau nak floatkan sebelah kanan gantikan :
.gbtab{
height:100px;
width:30px;
float:left;
dengan yang ini :
.gbtab{
height:100px;
width:30px;
float:right;
10 comments:
waa , pemurah . THANKS :)
@alisha
sama-sama..untuk kemudahan bersama.. :)
sudah lama kucari
akhirnya kutemui
yayyyy!!
tq!
err jap
mcm mana nak guna?
T___T
dah tambah cara nak guna..
tq :D
Cmne nk tukar wrna?
Tak faham laa..
Sy nak kaler putih tuu
@suey
gantikan jer url tuh :
background:url('http://t0.gstatic.com/images?q=tbn:ANd9GcRxfe4ZtVmMeuKwCUYcPz1msUoor-ir57oqTelhQQFhVw5e2J8&t=1&usg=__RaMprK_txFewFnqw3xcWibskelU=') no-repeat;
}
dengan url tab pilihan suey..cara nak dapatkan url sudah ada di atas :)
Hello,..asl xde warna bru mcm wrna pink tuh,,mesti lebih cntk..xleh tukar ke?
tengkiu bro...aku amik satu na..aku mmg dok cari yg warna biru tu nak bagi sama dgn blog theme...
Post a Comment