tutorial: sorokkan shoutBOX




Malam-malam ni nak wat tutorial sikit lah . pasal shoutbox . mesti ramai dah tahu kan pasal Sorokkan shoutbox ni . tapi takpa, saya ajarkan jugak k? bagi yang taktau tu TRY lah buat yeah . Ini request dari Bestie:62: saya . senang je nak buat benda ni . tak pening kepala lah . HAHA .

863287d81fb051ea1973530885a469fa Design>add gadget>html/javascripts
d408702d44383ed4394ce8a19356b435 ctrl+C untuk copy code di bawah ni & paste kan
<style type="text/css">
#gb{
position:fixed;
top:70px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:170px;
width:50px;
float:left;
cursor:pointer;
background:url('URL KOTAK JERIT DISINI') 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, 200-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 SHOUT BOX DI 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 = (150-gb.offsetWidth).toString() + "px";
</script>



4199061f501eca26b90b5269a52bb4f5 pilih tulisan kotak JERIT di bawah, dan masukkan di "URL KOTAK JERIT" & masukkan CODE SHOUTBOX anda di "MASUKKAN CODE SHOUTBOX KORANG KAT SINI" .



Photobucket

http://i1132.photobucket.com/albums/m574/MimiRuslan/shout3.png


Photobucket

http://i1132.photobucket.com/albums/m574/MimiRuslan/shout2.png


Photobucket

http://i1132.photobucket.com/albums/m574/MimiRuslan/shout1.png


Photobucket

http://i1132.photobucket.com/albums/m574/MimiRuslan/shout.png

P/S: korang boleh design sendiri benda ni =)

Dah ambil tu jangan lupa tinggalkan komen :)

14 comments:

  1. kalo nk tukar word 'kotak jerit' tuhh jd warne hitam bley taa ?

    ReplyDelete
  2. mcm mne na ! cri code toh ! xtw lha ! tolong ! :)
    dipo bru bt blog ! xrety lha na letk !

    ReplyDelete
  3. @Miera Zukey u Edit word tu di mana2. then tuka la . he .

    ReplyDelete
  4. Salam perkenalan babychoco @ sya..huhu..
    saya nk tnya la..mngenai shoutbox..mcm mane kita nk tuka design mcm yang ada disebelah kanan awk skrg nie?..mksd saya ada x design lain yg kita boleh dptkn kat mane2 site?..Then kalo xde pun mcm mner kte boleh tuka warna tulisan kotak jerit tue?..saya dah pun tuka kod warna tapi still merah jgak//tq

    ReplyDelete
  5. @JUNKO-EL-HIDA i edit sendiri kotak jerit tu. if u nak tuka, u kena edit gmba pape.. n gantikan kod tu :)

    ReplyDelete
  6. i xphm la u,i dah wt tp still not work out.
    act,mcm page i memg dah ade cbox,so juz copy code then gantikn code merah 2 ngn cbox code kite ker??ke kena wt lain?

    ReplyDelete
  7. hello...nice blog yawl..btw adeq nk tnyer nim cmner nk ltk pict laen selain dr pict ~kotak jerit~ tu...

    ReplyDelete
  8. code yang mana?
    mksd code 2 url ke?
    npe wt xjd pn?

    ReplyDelete

Thanks For Reading My Blogg
Please Drop You Suggestion or comments :)

 
Semua didalam Belog ini kepunyaan Cik Mimi Ruslan. ©copyright 2010-2013 CikMimiRuslan all rights reserved