17 June 2009

Tutorial | Sorok Shoutbox dengan Cute Image

Jom ramai ramai kita sorok shoutbox dengan cute image! Mari mari!

Dashboard > DESIGN > PAGE ELEMENT > ADD GADGET > HTMT/JAVASCRIPT

Copy semua code kat bawah ni and pastekan dalam ruangan HTML/JAVASCRIPT tuh.


<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:400px;
width:150px;
float:left;
cursor:pointer;
background:url(URL GAMBAR) 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, 150-w) : moveGB(170-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 KOD SHOUTBOX ANDA DISINI

<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 = (140-gb.offsetWidth).toString() + "px";
</script>


***SILA MASUKKAN KOD SHOUTBOX ANDA DAN URL GAMBAR DAN PASTEKAN DITEMPAT YANG DITULIS 'URL GAMBAR' DAN 'MASUKKAN KOD SHOUTBOX ANDA DISINI'

Kod shoutbox nak dapat kat mana?
Korang pergi dekat gadget shoutbox lama korang dan cari yang macam kat bawah ni dan copy

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="fashoyy" src="http://www5.shoutmix.com/?fashoyy" width="200" height="400" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?USERNAME SHOUTMIX KORANG">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->

***KALAU RASA NAK UBAH WIDTH AND HEIGHT GAMBAR, ADJUST NOMBOR KAT BAHAGIAN INI


height:400px;
width:150px;

***KALAU RASA NAK UBAH KESOROKKAN GAMBAR TAKUT DIA MENYOROK SAMPAI TAK NAMPAK, UBAH NOMBOR PADA CODE NI


gb.style.right = (140-gb.offsetWidth).toString() + "px";

okayy, sekarang tinggal nak pilih gambar yang sesuai je. Kau orang boleh google sendiri atau buat sendiri guna photoshop or photoscape or what else.
Kalau nak guna yang aku buat ni, pun okay jugak. I very appreciate it! sobs, sobs... =,=





http://i1142.photobucket.com/albums/n604/nurulfasya/maruko.png





http://i1142.photobucket.com/albums/n604/nurulfasya/buggirl_snail_--_800copy-1.png


http://i1142.photobucket.com/albums/n604/nurulfasya/shout-1.png


http://i1142.photobucket.com/albums/n604/nurulfasya/Untitled-2.png


http://i1142.photobucket.com/albums/n604/nurulfasya/e.png


http://i1142.photobucket.com/albums/n604/nurulfasya/domo-5-inch-valentines-day-plush-figure.png

http://i1142.photobucket.com/albums/n604/nurulfasya/ta-1.png



*****kalau rujuk tutorial ni, comment okay. feedback needed :)

GRACIAS

13 juri jemputan, 1 juri tetap (Comment here):

wAwA said...

kak fasya..tengs..hahah..na curik stu shout tiut tue.. hihihi..

wAwA said...

TA BOLEH COPY PON..

natashaborhan said...

saya ambik satu :)
nyway , tenggs :D

Fasya said...

@wAwAkalau nak copy, hold Ctrl+C. okay? :)

N'epyfiQah aLzikry said...

nk amek 1 dear :) hehe . comeii .

cik ena said...

kte amik stu ek..

cahayanabila94 said...

alhamdulillah dah jadi ... tanx :)

Fasya said...

@cahayanabila94like! :D

NoRa DaDiLLa said...

hai fasya.. kenal akak x? kwn k.lyne.. heee.. fasya nk tnye... cmne ek nk bg image tu xde frame? transparent.. sebab akak wat sume ade frame.. jd x cantik... huu... hope fasya ley tolong...=))

Fasya said...

@NoRa DaDiLLahehe, kenal :) kalau nk buat transparent, guna photoshope. tekan File, then New. akan keluar pop-out. Dekat situ tengok bwh skali kat background contents, pilih transparent! :D

fAiRuz said...

sy nk amik satu eh..tQ..

FlowerGirl said...

x reti + x jadi okeyy . ika x reti

awek muzik-Nurul R'roll said...

comel sangat , i follow and take one dear . terima kaseh XD

 

100% Harta Benda dalam Blog ini adalah bukan SelenaGomez punya.