6 June 2011

Tutorial Ajax Float Shoutbox






Annyonghaseyo blogger ! ( cakap korea pulak Daya kan ..ehehe )
Daya asyik senyum je hari ni ..Nape ek ? hihi nie lah tanda2 Daya nak bagi tutorial dekat korang . Tapi ni dah lapok la kott .. 

Daya nak ajar korang buat ajax float shoutbox .. Ape tuuu ? Haa ni shoutbox yang tiba-tiba muncul .. faham ?  kalau faham BAGUS ..kalau tak ? hmm korang try jela buat .. huhuhui

Mari mula kan pembelajaran 

  Dashboard -> Design -> Add Gadget -> Html/JavaScript

 Copy paste code yang Daya bagi dekat bawah ni dalam ruangan Html/JavaScript tu ..

<div style='display:scroll; position:fixed; top:70px; right:-0px;'>

<!-- 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:center;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}



#boxes .window {

position:fixed;

left:0;

top:0;

width:271px;

height:480px;

display:none;

z-index:9999;

padding:20px;

}

#boxes #wanhazelshoutbox {

background:url(BACKGROUND SHOUTBOX) no-repeat 0 0 transparent;

width:271px;

height:480px;

padding:56px 0 20px 5px;

}

#closesb {

padding:2px 0 0 0;

}

#author {

padding:8px 0 0 168px;

}

</style>

<center> <a href="#wanhazelshoutbox" name="modal"><img src="ICON SHOUTBOX" border="0" /></a> </center> 

<div id="boxes">

<!-- Start Shoutbox -->

<div id="wanhazelshoutbox" class="window">
<!-- Begin ShoutMix - http://www.shoutmix.com/ --><center>




Code Shoutbox anda



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

<div id="author">

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

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

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

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

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

  Yang warna HIJAU tu , korang kena tukar dengan background yang korang nak ..

Contoh 

http://i759.photobucket.com/albums/xx240/hanamiekame/1011.gif


 Yang warna MERAH , gantikan dengan icon comel2 yang korang suka ..

Contoh 


http://4.bp.blogspot.com/_ke5XBEZtQwM/TTEfOMQ_8-I/AAAAAAAAAmU/gTNrAs2q4Lc/s1600/star_by_ribbonheart-d356ga3.png

Kalau tak suka yang ni , boleh la pergi ke SINI untuk tengok yang lain ..

 Yang warna BIRU pulak gantikan dengan code shoutbox korang

 Dah siap semua lepas tu save .. Ha kan senang tu .. Tak faham atau tak jadi tanya ye ~



20 comments:

cik myrha said...

awak,background ade pilihan yang lain x?kite nak try buat? :)

Daya The Sixth ! said...

@cik myrha Awak kene cari sendiri or buat aje sendiri :D

leesa suhaimi said...

code shoutbox tu, ape?

Daya The Sixth ! said...

@leesa suhaimi Itu shoutbox awak , awak boleh buad dekat sini --->http://yayahmiss93.blogspot.com/2011/06/tutorial-buat-shoutmix-dan-cara-setting.html

Pinky Lily said...

akak mcm mana nk dapat kan code
yg lain semua jadi cuma code je.

Pinky Lily said...

akak code nak dpt dkt mana yee
thanx

Pinky Lily said...

@Daya The Sixth !akak code nk dpt kan dkt mana yeee

Daya The Sixth ! said...

@Pinky LilyAdik kene buad shoutbox laa syg :)

Amalina Mustaffa said...

akak, sy gune tutorial nie yer ...thanks akak <3

Ashikin Mahamut said...

kak daya , cemne nak dapatkan code shoutmix ktowngg ?

Daya The Sixth ! said...

@Ashikin Mahamut Adek cuba laa tengok tutorial shoutbox dan cara setting .. Akak ade buat :)

noraauliyya said...

cne ea na dptkn button CLOSE tuk shoutbox tu .pls bg taw at blog sy .

Daya The Sixth ! said...

@noraauliyya Tu kene tulis CLOSE je dear :)

aTuL oSaKa said...

@Daya The Sixth ! tulis CLOSE kt maner akak ?

cik fazma's ♥ said...

adik daya , akak ada buat shoutbox tapi tade pulak dalam page element ..macam mana ni ek ??

Unaa Laa` RinaQaisa said...

akak amek ea adek :)
thanks tau.

budak kecik said...

sy amek yea. thanks a lot. comel!

jia creatifelt said...

THNAKS..dah jadi...sy amik bckground shout...

zaza said...

kalau untuk blogsin, mcm mane ek..?

Atyqah Azry said...

kak daya . . knape sy buat takkboley ea ? --,'