July 26, 2011

TUTORIAL : AJAX FLOAT SHOUTBOX/SHOUTMIX


Assalammualaikum & Selamat Sejahtera

tak mahu cakap banyak..jom kita buat sama-sama Ajax Float shoutbox/shoutmix ini, tutorial ini diminta oleh SHIDA


Step 1
korang kena reka sendiri button shoutmix/shoutbox korang yang selalu korang letak dekat bahagian tepi tu.

contoh button yang aida buat



untuk button ini korang buat saiz 64x64 pun dah cukup, kalau nak transparent pun boleh tak nak pun boleh. Korang buat la ikut kreativiti korang..hehe. Korang kan kreatif..


kemudian korang dapatkan URL bagi button tu ok? cara nak dapatkan URL korang tahu kan..photobucket, imageshack atau upload dalam blog pun boleh. 

Step 2
Korang edit plak background untuk shoutmix/shoutbox korang pulak, saiz ikut korang nya shoutmix/shoutbox. Kalau width korang 260 dan height korang 300 korang buat la saiz background korang 350x350 korang lebih kan sikit saiz dari saiz asal. Edit lah bagi cun-cun, smart-smart. 

contoh background



kemudian save dan dapatkan URL nya.

Step 3
Dashboard > Design > Add a Gadget > HTML/Javascript

Step 4
Copy code dibawah ini dan paste kan dekat HTML/Javascript

<!-- 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:400px;
height:500px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #ajax {
background:url(URL BACKGROUND) no-repeat 0 0
transparent;
width:400px;
height:500px;
padding:56px 0 20px 5px;
}
#closesb {
padding:2px 0 0 0;
}
#author {
padding:8px 0 0 168px;
}
</style>
<ul><center> <a href="#ajax" name="modal"><img
src="URL BUTTON" border="0" /></a> </center> </ul>
<div id="boxes">
<!-- Start Shoutbox -->
<div id="ajax" class="window"><!-- Begin ShoutMix
- http://www.shoutmix.com/ --><center>


<br/>
<br/>
<center>
CODE SHOUTMIX/SHOUTBOX
</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-->


Step 5 
korang masukkan URL button, background dan shoutmix/shoutbox korang dekat tulisan yang warna MERAH tu.. Kemudian save dan try tengok menjadi atau tak..apa-apa korang tanya ok?





14 comments:

Shida Radzuan said...

shida punya jadi..dan dah siap hehe..siap ade org tu baik hati bt kan backgrnd smix kita hehe..^^

nic tutor dear :)

Mr iz said...

nanti saya nak terai tengok menjadi tak...terima kasih ye...he he he

♥ cik_farah ♥ said...

nak tanye
code shoutmix tu yg mne eh?

Izzie said...

cik Aida..nak tau tak?
tengah2 cuba ikut step cik Aida ni, laptop boleh jamm pulak..
stress je..

Diari Si Froggie said...

@shida'R shida nie..malooo aida. hahaha... terima kasih shida :)

Diari Si Froggie said...

@Mr iz try tau mr iz..nanti bagitau aida jadi x. hehe

Diari Si Froggie said...

@♥ cik_farah ♥ code shoutmix yang selalu orang amek first time daftar shoutmix tu..

Diari Si Froggie said...

@Izzie Alamak..haha. hang pulak.

miss lollipop said...

apa beza antra url background n code shoutmix?

Diari Si Froggie said...

@miss lollipop url background utk background dan code shoutmix yg amek dkt shoutmix tu..

Ayuni said...

dpt wat, thanx!

papela said...

thx sgt2

Diari Si Froggie said...

@Ayuni Alhamdulillah.. welcome dear :)

Diari Si Froggie said...

@papela welcome dear :)

Small Cute Green Pointer

Get this tabber widget

Create By :


About Me