29 Okt 2010

Sembunyikan Shout Box Di Tepi Blog

Kali ini aku nak kongsi pasal nak buat ruang sembang korang sembunyi atau berada kat tepi blog korang.Caranya mudah sahaja.
1.Log in ke akaun blog=>Reka bentuk=>Elemen Laman=>tambah alat(add a widget)=>html/Java script.
2.Copy kod 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://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/
AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') 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">

MASUKKAN CODE SHOUTBOX KORANG KAT SINI 

<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>
3.Paste kod yang korang dah copy tadi kat 'Html/Javascript'.
4.Kod warna MERAH bermakna korang kena letak kod Shoutmix atau cbox anda.
5.Dah semua,korang bolehlah save..Untuk peringatan jangan letak title.Selesai.

***Update  22/5/11***
1.Cara tukar gambar tab shoutbox.
-Cari kod warna hijau seperti di atas.
http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/
AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png
-Buang kod tersebut dan gantikan dengan link gambar korang mahu.
-kalau tak ada link upload gambar kat photobucket@imageshark.
-Pastu ambil direct link seperti gambar kat bawah.
-Jadi kod akan jadi mcm ni.
 
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('LINK GAMBAR') no-repeat;
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>
 

7 ulasan:

  1. Thank you for the tutorial.Encik Kool da follow ur blog. Hope you can do the same. TQ

    BalasPadam
  2. knapa mcam lain jak jdinya neyh...tlonk tngokkn~

    BalasPadam
  3. @Abel a.k.a Fadly
    knp shoutmix terus melekat kat tepi e?try buat sekali lg..mungkin ada kod ttinggal.

    BalasPadam
  4. nk tanye cmne dye buat gmbr nie??? http://justiema.blogspot.com/ tgk coutbox dye plizz...

    BalasPadam
  5. @axoe wanie
    kalau nak tuka pic tukar je link ni http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/
    AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png.kat link pic yang awk nak.

    BalasPadam
  6. tak jdi la buat .. cuba tgk kt blog sy .. kecik jek .... =(

    BalasPadam