Cara Membuat Shoutbox Versi Ajax

Posted by mije Senin, 05 Juli 2010 0 komentar

Salam..Mijie baru je buat pasal shoutbox guna ajax ni dan ingin juga mijie berkongsi dengan korang semua cara untuk membuatnya. Untuk pengetahuan korang semua, penggunaan kod  ajax lebih ringan daripada biasa(javascript). Untuk lebih lanjut baca tentang ajax. Korang boleh minta tolong je dengan pakcik google..Confirm dia bantu. Ok dengan masa yg sedikit ni(curik opis hour). Mijie akan akan terangkan step2 nye...

Step 1 : Login Dashboard => Design => Add a Widget => Pilih HTML/Javascript .
Step 2 : Copy kod dibawah dan pastekan pada content..  
<!-- Start Ajax Popup Shoutbox by Mijie -->
<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});



//transition effect

$('#mask').fadeIn(1000);

$('#mask').fadeTo("slow",0.8);



//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 #mijieshoutbox {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuJ2_dVTSTprghHxrHO9XX9-a4iynfNHQarIhAqaEWrpB3rVBSw6nDDV3YR8O3xKhd1JW_QOavL6LtHFvKb3Qe4TKFYgGrjUwpqGr4Pf8bwDr_RD5_dV6rsgxmMlpho0bcsTp0YS-V_r8/s1600/lightblack.PNG) no-repeat 0 0 transparent;

width:272px;

height:460px;

padding:56px 0 20px 5px;

}
#closesb {

padding:2px 0 0 0;

}
#author {

padding:8px 0 0 168px;

}
</style>


<ul><center> <a href="#mijieshoutbox" name="modal"><img src="http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/shoutboxtab.png" border="0" width="158" height="58" /></a> </center> </ul>

<div id="boxes">

<!-- Start Shoutbox -->

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

<!-- Begin ShoutMix - http://www.shoutmix.com -->
Masukkan Kod ShoutBox Anda Disini
<!-- End ShoutMix -->

<div id="author"><a target="blank" href="http://mymijie.blogspot.com/2010/07/cara-membuat-shoutbox-dengan-ajax.html"/><img src="http://img.photobucket.com/albums/v486/mafiatrg/linky.png" /></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 by Mijie -->

Step 3 : Masukkan kod shout anda pada perkataan “Masukkan Kod Shoutbox Anda Disini” diatas.
Step 4 : Pastikan width='261' dan height='380' . Contoh seperti dibawah. 

<!-- Begin ShoutMix - http://www.shoutmix.com -->     <iframe frameborder='0' height='380px' scrolling='yes' src='http://www5.shoutmix.com/?mijie0512' title='mijie0512' width='261px'><a href='http://www5.shoutmix.com/?mijie0512'>View shoutbox</a></iframe><br /><a href='http://www.shoutmix.com' title='get your own free shoutbox chat widget at shoutmix!' target='_blank'>GetShoutBox</a><br /><!-- End ShoutMix -->


Step 5 : kemudian SAVE. Klik PREVIEW untuk lihat hasilnya.
Untuk menukar frame shoutbox. Anda tukar kod ni
http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/lightblack.png dan untuk menukar images pada blog anda tukar kod nie
http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/shoutboxtab.png.
Untuk mendapatkan lebih banyak frame untuk kesukaan anda. Silalah ke blog Raybond. Mijie dapat kod ni pun dari sana tapi kod yang ni telah dikemaskini semula oleh mijie.Thanks a lot Raybond. Jasa mu dikenang..:)

Lagi tutorial klik sini..
Adsense Content. bottom of article

0 komentar:

Posting Komentar