Wadah Madrasah Pengalaman: Tutorial Ajax Float (lebih cepat nak load...)


Monday, July 19, 2010

Tutorial Ajax Float (lebih cepat nak load...)


.








Jom tutorial


Bagi pengguna Layout/design

Login to blogger >> Click Dashboard >> Click Layout/design >>add widget HTML
PAstikan widget nie korang letak paling bawah or paling atas k.klik save nanti tengok yang mane paling cepat load..Law atas lambat load korang letak bawah k..


Bagi pengguna Template

Korang cari < / body> dalam HTML code. Law tak dapat gak cari gune mate..Tekan keyboard korang CTRL+F..lepas tu korang paste kod yang Wan bagi kat bawah nie nanti k.. Owh ye..Law nak cepat Load lagi korang letak betul betul kat Bawah < HTML>..Korang bleh cari dekat atas < / body>tu je..



Pastikan width='261' dan height='380' untuk Shoutmix korang contoh kat bawah nie..


<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="261" height="380" src="http://www2.cbox.ws/box/?boxid=1932907&boxtag=4108&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="261" height="380" src="http://www2.cbox.ws/box/?boxid=1932907&boxtag=4108&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX --></u><br>



Ok kod untuk AJAX float pop up k..

Copy kod and paste kat notepad dulu k..lepas tu edit and lepas tu baru copy and paste kat BLOG





<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:0px; right:-0px;'>
<br>
<a class='linkopacity' href='http://wanhazel.blogspot.com/2010/07/tutorial-ajax-float-lebih-cepat-nak.html' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Get Shoutbox AJAX float'><img border="0" src="http://i1009.photobucket.com/albums/af215/wanhazel252909/iconlink.gif" /></a><br />


<!-- Start Ajax Popup Shoutbox by -->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>

$(document).ready(function() {

//select all the a tag with name equal to modal

$('a[name=modal]').click(function(e) {

//Cancel the link behavior

e.preventDefault();



//Get the A tag

var id = $(this).attr('href');



//Get the screen height and width

var maskHeight = $(document).height();

var maskWidth = $(window).width();



//Set heigth and width to mask to fill up the whole screen

$('#mask').css({'width':maskWidth,'height':maskHeight});







//Get the window height and width

var winH = $(window).height();

var winW = $(window).width();



//Set the popup window to center

$(id).css('top', winH/2-$(id).height()/2);

$(id).css('left', winW/2-$(id).width()/2);



//transition effect

$(id).fadeIn(2000);



});



//if close button is clicked

$('.window .close').click(function (e) {

//Cancel the link behavior

e.preventDefault();



$('#mask').hide();

$('.window').hide();

});



//if mask is clicked

$('#mask').click(function () {

$(this).hide();

$('.window').hide();

});



});

</script>

<style>

img { border: none; }

#mask {

position:absolute;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}



#boxes .window {

position:fixed;

left:0;

top:0;

width:440px;

height:200px;

display:none;

z-index:9999;

padding:20px;

}

#boxes #wanhazelshoutbox {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7g7NuIJPqrhFORE7j2ytsGk9LSj6bIGtdwkQloql0rrcuazAuPjQ8GUEw_wRisyOt87TtjfPAaGUYUUs-jD2Av1tgksf926pdPtIgXK98wZu7i5Be_l1TYRF9uZENqAd4N2fuSuOQylE/s1600/red.png
) no-repeat 0 0 transparent;

width:425px;

height:460px;

padding:56px 0 20px 5px;

}

#closesb {

padding:2px 0 0 0;

}

#author {

padding:8px 0 0 168px;

}

</style>

<ul><center> <a href="#wanhazelshoutbox" name="modal"><img src="http://i921.photobucket.com/albums/ad52/wanhazel25290988/shoutoutz.gif" border="0" /></a> </center> </ul>

<div id="boxes">

<!-- Start Shoutbox -->

<div id="wanhazelshoutbox" class="window">

<!-- Begin ShoutMix - http://www.shoutmix.com --><center>




KOD SHOUTMIX/CBOX KORANG




</center>
<!-- End ShoutMix -->

<div id="author"></a>

</div><div id="closesb"><input type="button" value="Close" class="close" />

</div></div><!-- End of Ajax Shoutbox -->

<!-- Mask to cover the whole screen -->

<div id="mask"></div></div>

<!-- End of Ajax Popup Shoutbox-->


</div>














Ok yang nie Untuk Backgound Shoutbox korang,,law nak tuka kaler..Kod yang Wan kaler Hijau tu yang korang tuka law nak guna Background kaler len..



Merah
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7g7NuIJPqrhFORE7j2ytsGk9LSj6bIGtdwkQloql0rrcuazAuPjQ8GUEw_wRisyOt87TtjfPAaGUYUUs-jD2Av1tgksf926pdPtIgXK98wZu7i5Be_l1TYRF9uZENqAd4N2fuSuOQylE/s1600/red.png

Pink
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTEG7lm7HPQj_mFFes7O6ywgTmRIEMbxFslUaUlH_1lK0NrVQNkjkmQNwRiGJi_wLiH-bGz7-xvHoTm5PUM-0KBBG4JaqEr7Lyk_ZlNJtVETz-Dw0_qBWLRfvVqad5n-cGoqRw2hogtQU/s1600/pink.PNG

Oren
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiqTy2EFnYXiDI8g6t9ofNRTB3rG7WGpVR74U0-Y3h-fa9cnRD_k9yrMswPk_fb0VNkU5srPl92Ue5Nf1K-5LM95CvGwvBt6S5A519SiQXpFzIJbLruW1hN5LOVDbMkFpPjfl8Pq7O-bU/s1600/orange.PNG

Purple
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwdYhq9j9lhdxaXwK5U1Uo9e3cUWlEiwdX7LxhzUA8zFDtDv1g1_-H1R30zfoDMWUtUPIkCe_E1tN1dmGFZ6DhSZlvMN60yLpSio8n-VEzD04kVxf0CPRS8nY93MqbG7bOs-TzKDw8r-0/s1600/lightpurple.PNG

Hijau
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_A2Qq4EHjNzyfZ5lNY9lsDxt4wjs3dglJNnBDvxpIejTNyoabFMBR2oPXb3DK9TWomf_iFSSsri5nzdUuUDEHoElBgzyI02fLv2-NKrpcqv2Q4Pg2s-uh3KqYnDwE9SOS2FR1X4i0w-E/s1600/lightgreen.PNG

Hitam
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNTFRTYq3JryRsRmcOAwzDeLUWsag43xiiz3E_ItVg03QJqQ9RWnOXKOjzE7jucJds3HnBTy4_CYYHqSFdAVDUea8HXDD9_rKE6lIr-Wkucdxd7YPxQGeHxBTIPcikB0GfwjbHqsZ9PI4/s1600/lightblack.PNG

Biru
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6HuJpIeJYo7XY2uCjomJ7r4DraCZGStct663C5v32qGErXXtsa7op-t3B2gtN1CkcBQhLj7FwK8c8gPVTUbhoTlpnsUx8aFNSs5or74K5aOkoY1NRuxxRoieuYXoE8xbQCJmbde-rKyM/s1600/cloudblue.PNG



Law Nak tukar Background lain..korang edit lah sendiri ye..Wan punya shoutbox tu..Wan dah edit..huhuhu..

LAw nak guna Background sendiri..cara nya kat sini..














320 comments:

«Oldest   ‹Older   201 – 320 of 320
Wan_hazel said...

ok wan cek

Wan_hazel said...

SUCI KUDUS

welkam..eheheh

Habibah said...

ngee~...
tak paham...bnyk kali dh study...
tulun2...

Wan_hazel said...

m!ss sufea

PM wan kat facebook k..wan hazel

azza rynna said...

saya tak brape faham lah yg wan cakap ni"PAstikan widget nie korang letak paling bawah or paling atas k.klik save nanti tengok yang mane paling cepat load..Law atas lambat load korang letak bawah k.."ape yg cepat lambat load thu...saya tak brape paham

Wan_hazel said...

ajax nie lah..law letak kat atas lambat tak ajax shout nie nak open..mase klik tu..law lambat letak kat bawah..

Lulu Rahman said...

sumpah susa. tapi nak sgt guna. =(
lulu gune template. tapi takpaham tuto ni.

Wan_hazel said...

Lulu Rahman

pm wan kat FB k..nanti wan tlg kodingkan

Anonymous said...

yg ade name hazel banyak2 tu nak ubah gak ke??hehee.. xfhm la... :((

Wan_hazel said...

Anonymous

tak perlu ubah...tak faham??law tak faham PM wan kat FB k..wan hazel

epal hirata said...

slm wan..sy xphm la wan..nk copy mne 1,nk edit mne 1?
btw..suke gile onepiece..cmne nk wat ni..=(

Wan_hazel said...

epal hirata

tak faham???law nak wat leh PM wan kat FB k..wan hazel

eVariena♥ said...

salam..tlg tgk shoutbox sy..knpe jd cmtu n cmne nk edit blek..?

eVariena♥ said...

xjd..

Wan_hazel said...

eVariena♥

law tak taw gak..pm wan kat FB k...wan hazel

Nurfazilah Cipa said...

cipa link tuto ni kt blog cipa k??
:)
boley x?

Wan_hazel said...

Nurfazilah Cipa

bboleh je cipa..no hal.ehehhetengs taw

Falling . said...

awk!!!! npe shOutbOx sy dy tulis
"diz image or video has been moved
or deleted.photobucket"? plis help me!!!!

Wan_hazel said...

..arcmabaharin..

ok..tgk tuto tuka icon shoutbox lak k..

Falling . said...

shoutbox sy tuh..

x jd...

Wan_hazel said...

PM wan kat FB je k..nanti wan kodingkan shout awak

akmazaid said...

abg wan , kt mna nk lex kod shoutmix ?? dah pening ni tengok kod abg wan kasi . pnjang sgt .... cepat ! tulun2 !!

Wan_hazel said...

Skyies with Blackheart

ade je wan tlis kat situ letak kod shout tu..

saffa hamzah said...

dah try!!! tp x jd laa.. stu lg x fhm...

Wan_hazel said...

law tak taw kasi kod shoutmix kat wan k...PM FB wan

QHaziq said...

wan cube tengok blog sayer punyer cbox...www.qhaziq.blogspot.com

Wan_hazel said...

ok..wan tgk

Unknown said...

tenks yer :)

Wan_hazel said...

welkam...

Purpleo_93 said...

xpam lh cam ne nk wat..
yg mne nk copy kat html n yg mne kne ltk kat add gadget tu??

Wan_hazel said...

Purpleo_93

letak kat add gadget>HTMl taw..bukan edit HTML

Artisyazulkipli said...

camne nak ketengahkan perkataan close tu erk ?? abg wan

Wan_hazel said...

tambahkan perkatan < center> dari atas kod dan bawah kod < / center>

Kita Masih Muda said...

sriuz x kuar ape2...pening siot, bnyak kod...tolong aku...

Kita Masih Muda said...

aku dah paham kenape dorang smua x paham camne nk wat...stelah aku godek2 kod "ko" mf eh...x biasa la sy awak..malu plak..haha....stelah aku godek2 kod ko, baru aku paham bhawa...."KOD SHOUTMIX/CBOX KORANG"
dorang x paham kt sini, dorang copy kod ko bulat2, tp x letak dorang pnye kod shoutmix, aku pn tkena, ptt x jadi2....lembab tol aku nie.....tp aku pnye box keluar padang la bro...melampau2 tkeluarnye....brejam aku godek nie...

Kita Masih Muda said...

aku da try....tp box x centre....lari ckit...ko tgk la..... http://azmanteddy91.blogspot.com

a.R said...

wan camana nak buat blockquote tuh ye?

Wan_hazel said...

Kita Masih Muda

ok yang nie ko ubah kat nhgian frame taw..try godek tutorial cute frame lak..ubah size die..

Wan_hazel said...

Cik Muda Sae

bquate yg mane erk?>??

Cik SCC said...

er..xpaham la wan :(

Wan_hazel said...

tak faham tu yang mane??

♥blackberry city's♥ said...

wan



niko dah ade shoutmix..tp nk edit bg ade...cartoon kew..ap2..je la..mcm mne.....tgok blog niko

http://niko-ily.blogspot.com/

shoutmix..ad...tp edit at..mne....

♥blackberry city's♥ said...

wan..my blogger dah..jdi..mcm code yg dbri la..tpkn...mcmna..nk uat..pic..shout box..2 wan..tlong niko...jp..please....wan..buat pic hellow..kitty...kew..n bg code ad....niko...please...helme.. :D

http://niko-ily.blogspot.com/

i2 blog niko....tolong..ye

Wan_hazel said...

♥baby niko♥

law nak wan tlg watkan PM wan kat FB k..wan hazel....law nak wat sendri tu..ade je tuto utk cute frame ajax n tutyo icon ajax..cari je

♥blackberry city's♥ said...

ade kew....niiko..dah add dah..tp x de pon

Wan_hazel said...

niiko..msg wan kat FB k...

ASMAH HARUN said...

adik napa chatbox dia kuar dr frame ek??akak dah ikut coding dia...

ila said...

abg wan hazel.
iLa amik ea?
time kasih.
jase mu dikenang

Wan_hazel said...

sama2..ehehhe..ambik lah k

Wan_hazel said...

SYIMA

PM kat FB k

Anonymous said...

hmm tak jadi pun?

Wan_hazel said...

Syafiqa Ahmad

tak jadi??ok2..PM wan kat FB k..wan hazel

ultramen cokelat said...

ehem ehem, tumpang tanya sat, yang nak set height ngn width tu nak edit tang mana? Ke memang dah set kann?

Wan_hazel said...

yg tu kene ubah kat shoutmix ultramen...

safwah said...

salam...wan, np sy wt xjadi pun?dh dkt 3X dh try..huh..yg kluar hnyalah gmbr yg link ke blog wan..

Wan_hazel said...

safwah

law camtu kasi kod shout kat wan k..PM je FB wan..wan hazel

iSmi_HanUm said...

ok...thanks..

Acha Swifties said...

wan . cam ane nk wt? xpham la? tlong wat kn utk sy leyh x? klu bole la . klu xbole xpe.

Wan_hazel said...

Marshallow Girl

ok boleh je..kais kod shout kat wan k..PM FB wan..wan hazel

iSmi_HanUm said...

wan, safwah dh sent...

Wan_hazel said...

mUjaHidah_SaFwaH

save kat mane???

Sya said...

wan tolong please... :'(
penat cuba!
waa..

Wan_hazel said...

Sya

PM wan kat FB k..Wan hazel

iSmi_HanUm said...

pm kt fb le...xdpt eh?

Wan_hazel said...

mUjaHidah_SaFwaH

ok dah dapat

she's a little girl ★ said...

wawan ! ape neyh ~ xpham yawww ! atoyai ... need some help ~!

she's a little girl ★ said...

haish laaa ~!

Wan_hazel said...

the only xeyra ,,,

PM wna kat FBG k..wan hazel

syira syahirah said...

thanx :DD berjaya buat suke snggt2 weeeeeee

Wan_hazel said...

gud2..tepuk skit..heeh

Naniy Hana said...

Login to blogger >> Click Dashboard >> Click Layout/design >>add widget HTML

'add widget HTML' 2 ktner..
xdapt pn.. :(

pstu ap beza kod yg pnjggg ngn yg pendek tu..
nk copy mn stu??

Wan_hazel said...

maksudnya add gadget dan pilioh gadget HTML k...law tak fahm pm je wan kat FB,.wan hazel

zuraini said...

bengang..sbb still xmnjadik buat nih
=(

Wan_hazel said...

lse msdih tak leh wat tu..PM wan kat FB k..wan hazel

~TyKaH~ said...

salam , ,

na kena edit ap lgy dalam kod tu ?
nape ta jdi ? :(

tolong saya , ,

Wan_hazel said...

law tak faham..PM wan kat FB k...wan hazel

Faten said...

thx wan. :)

Wan_hazel said...

ok..welkam.hehehe

cik-ANNE said...

eeii wan . nape tamau jadi .cube tgk kat blog anne .tamau kuar pon . sedih T_T

Wan_hazel said...

cik-ANNE

ok wan tgk k...

Naqib Winx said...

abang leh tolong tak? sebb . bile nk tekn shoutbox tu kan ade gambar, mane code untok tuka bende tu? please help! hantar mesej kat my shoutbox tau! :) thanks

Wan_hazel said...

kan dah de tuto tu..tak cari ye..ehehhe..ok wan kasi link kat shout k

'adawiyah az-zahraa' said...

wan, pinjam tuto ini. kredit nama wan :)

Wan_hazel said...

ok..boleh je...

Unknown said...

abang wan , tasha pakai tutorial ny taw :)

♂ epyfiQah aLzikry ♀ said...

nak 1 :) hehe .

Wan_hazel said...

ambik je..ehehhe

Anonymous said...

salam...wan..camne nak buat nie..juz kuar frame dy jer..isinya kosong..:(

Wan_hazel said...

dah masukn shout dlm kod tu ke???kalau yg nie susah sgt kan better try yg slide float shoutbox tu

Dyla Abdillah said...

thnx yup for the tutorial..nice!tp nk tye,mcm mne nk same kn shoutbox dgn background shoutbox?pastu icon tu dah xde..dah dlte ehh..tQ :)

Dyla Abdillah said...

thnx for the nice tutorial :)..nk tye mcm mne nk sama kn shoutbox dgn shoutbox background?die center sama2 la..pastu icon tu dah dlte ekk,sbb xde

Wan_hazel said...

a ah..icon tu ad malash skit..try guna nie k..

wanhazel.blogspot.com/2011/05/tutorial-slide-float-shoutbox-with-cute.html

Nur Aishah Nabila ❤️ said...

cm ne nak kecik kan icon shoutbox tuh ek ?? da bnyk kali wat.. tpy besar je..help me..

fiesha said...

sush nye nk wat tuto nie =,=

hanimzainuddin said...

tak jadi pon wan ,,

Wan_hazel said...

try guna slide shoutbox k

Anonymous said...

ta fham la , hmmm ):

Wan_hazel said...

law tak fahm yg nie try guna yg slide shoutbox k

Unknown said...

Wan boletak copy paste tuto nie? Ade org mintak.

Wan_hazel said...

boleh aje...silakn..

Anonymous said...

HYE..SY BWU WAT BLOG NI..TPI X TAU NK EDIT CMNE..PENING SGT..BLEY TLG X???

Wan_hazel said...

nak tolong ape??

CoMoTღDoMoT said...

da dpt buat, tp cbox tu xmsuk2 lam frame...da xtau nk ubah kt mne lg... :((
wan....tlg sy.... T_T

Wan_hazel said...

kene ubah kod..buang or tambah kod < br > yg kat atas kod shout k..try n erro sampai dpt

CoMoTღDoMoT said...

slps digodek2 kod shout tu,akhirnye brjaya gk...
yepiii....tenkiu wan:))

QHaziq said...

wan camne nk ubah kedudukan frame ke kiri ckit??

Wan_hazel said...

frame tu kene ubah keduduakn dkt add gadget kat page element tu taw..

Ckin Kembaq said...

wan, ada benda nak tanya ni..hope dapat membantu...kan sy buat stail macam ni gak en, jadinya perkataan 'close' tu jauh sangat...boleh tak tolong gtau cmna nak bagi dia duk dekat ngan kotak cbox tu? yang frame buat bnyk kali tapi still lari..last2 pakai biasa je la..hehe tqvm

Wan_hazel said...

close tu jauh sgt ke bawah..link blog wan nak tgk

Annur said...

waw!..jeles tengok org lain daa jdik..huhu..saya punya x jdi2lah..cmne ek?..ermm,,agk pening sbb x buat blockquote..hoho..tercopy mnde yg x kaitan..

Wan_hazel said...

aik...try guna yg slide shout..yg tu pun ok gak

iela_dekla said...

cbox trkeluar pda frame...cm ne nk centre kn...pas2 image kt blog pon xda...help me please

.sukesuki. said...

salam. dh try bwat nie tp x centre la. cmne nk bwat bia dye jd centre ? tq... (:

Wan_hazel said...

add gadget tu letak kat tgh2 page element k

Nik Salsabiila said...

Salam kenal...
I'm come from Indonesia..
I like ur photos on flickr...
I'm new in photography's world..
Mohon bimbingannya yaa...^_^

Wan_hazel said...

cari kat google cbox or shoutbusuk

kuroyuri keyn said...

hai, saya keyn, saya nak coba tapi ada bahasa yang tida jelas for saya read--a
setelah saya try di blog kaka saya ternyata lucu juga ya^o^/
thanks for share ^u^

nurul shahida said...

salam.. wan, xdptla nk msukkan shoutbox tu....

nurul shahida said...

salam.. wan, xdptla nk msukkan shoutbox tu....

nurul shahida said...

wan, banner wan sy ltk lm blog sy, tp just kuar "my banner" .. sy nk nmpk banner "wan production tu skali..

«Oldest ‹Older   201 – 320 of 320   Newer› Newest»