Wednesday, October 27, 2010

Home » , , » Pilihan Tab Hidden Shoutbox

Pilihan Tab Hidden Shoutbox

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:

Aina said...

waa , pemurah . THANKS :)

Syed Hakimi said...

@alisha
sama-sama..untuk kemudahan bersama.. :)

Anis said...

sudah lama kucari
akhirnya kutemui
yayyyy!!
tq!

Anis said...

err jap
mcm mana nak guna?
T___T

Syed Hakimi said...

dah tambah cara nak guna..

Anis said...

tq :D

Tiq said...

Cmne nk tukar wrna?

Tak faham laa..
Sy nak kaler putih tuu

Syed Hakimi said...

@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 :)

Putri Almaya said...

Hello,..asl xde warna bru mcm wrna pink tuh,,mesti lebih cntk..xleh tukar ke?

iniialahaku said...

tengkiu bro...aku amik satu na..aku mmg dok cari yg warna biru tu nak bagi sama dgn blog theme...

http://Link-exchange.comxa.com Free Auto Backlinks Free Auto Backlinks Free Auto Backlink Generator Get a Free Backlink

Related Posts with Thumbnails

ShoutMix chat widget