May 8, 2011

Tutorial : Ajax Float Shoutbox

hohoiiihoiii..hye peeps ! tadi Yana jenguk-jenguk shoutbox Yana lah kan..then tengok ramai blogger lain mintak ajarkan buat shoutbox macam Yana..shoutbox nie kite panggil Ajax Float Shoutbox ye kawan-kawan sekalian..bile click icon shoutbox then shoutbox akan float dekat tengah-tengah gituu..nak jugak shoutbox comel cenggini? sini Yana ajarkan tau :)


1) Log In>> Dashboard>> Design>> Add gadget>> HTML/Javascript


2) Copy and paste semua code dibawah nie tau



<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(BODY/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>

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

<div id="boxes">

<!-- Start Shoutbox -->

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




CODE SHOUTMIX




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

<div id="author">

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

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

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

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

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

3) Untuk Icon Shoutbox dan Code Shoutbox..jangan lupe tukar dengan yang korang punya URL tau

4) Untuk background pula,korang boleh adjust dengan kaler-kaler yang lawa..kat bawah nie ade contoh untuk code background shoutbox

5) Bila dah siap,SAVE ye :)

#contoh2 code background seperti dibawah :

BLUEISH :
http://i1180.photobucket.com/albums/x416/whatevagurl/anigifbiru.gif
GREENY :
http://i1180.photobucket.com/albums/x416/whatevagurl/anigifhijau.gif
PURPLELICIOUS :
 http://i1180.photobucket.com/albums/x416/whatevagurl/anigifpepel.gif 
PINK
 http://i1180.photobucket.com/albums/x416/whatevagurl/ainaamaniaanimated.gif

SELAMAT MENCUBAA~~
credit to : wan+ainaa
Suka? LIKE je! :)


LIKE Fan Page Yana sekali yer! :)

20 comments:

Misz Jenny said...

yea!!! akhirnyaaaaa

yqnq ellyana said...

@ misz jenny :whoahh..dh menjadi ye? tahniah ! :)

Misz Jenny said...

eh, xbuat lg...tggu ujung mggu..haha

Farhan Ibn Yahya said...

uit...
xx jadi pon...

hanis :) said...
This comment has been removed by the author.
hanis :) said...
This comment has been removed by the author.
Kumiko Ryou | Farah Amira said...

wah!..tenkiu sgt2

misTeddy♡ said...

dear..sis wat jadi tp icon tu xdok tepi laa...huhuhu

yqnq ellyana said...

@ misz jenny : LOL XD..engat dh buat,,huuhuu

yqnq ellyana said...

@farhan :salah coding kot

yqnq ellyana said...

@ kumiko :ur welkame ^^

Mimie said...

yes! finally dapat buat tutorial nie. thanks a lot. Mintak kebenaran guna background

Che Deen™ said...

yna, camne ea nak lebar kan cam yna punye?

lia_choc said...

cam ne nk dptkan code shoutbox tu...uwaaa

wardatul jannah said...

akhirnye jd jugak..thx yep

Anonymous said...

mne nak dpt kan code shoutbox tuhh

sALjU cHIntA said...

jadi mmg jadi . tpy butt0n cl0se ta de p0wn

jija said...

c0de sh0utbox nak amik kat mana???
help!!!

jija said...

c0de sh0utbox nak amik kat mana???
help!!!

SuperMerlin said...

x menjadi la..camnne ne?

Post a Comment

Terima kaseh drops komen
Esok-esok drops komen lagi oke ! :)