Tutorial Ajax Float Shoutbox

11:56 PTG

Haipp...You all perasan tak ramai di kalangan blogger sekarang sudah menggunakan 'Ajax Flout Shoutbox' ni.Tak tahu apa itu ajax float shoutbox?Di sini d'ya akan buat tutorial walau ada la jugak request untuk d'ya buat tutorial ni.Kalau takde orang request pon d'ya akan buat jugak tutorial ni.Degil jugak kann d'ya ni?Tapi takpe lagipun sharing is caring.Tak baik tau kedekut ilmu.Nanti tuhan mara.Hehe.Mari kita mulakan pembelajaran kita hari ni.Biar cikgu D'ya Marshmello ajar yea.Owh ya sebelum d'ya terlupa jangan lupa picit ctrl+c untuk copy code tauu..  ;)



 Pergi ke dashboard>design>add gadget>html/javascript




  Copy code di bawah and press ctrl+c untuk copy code okayy.


<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(http://i759.photobucket.com/albums/xx240/hanamiekame/1011.gif) 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="http://4.bp.blogspot.com/_ke5XBEZtQwM/TTEfOMQ_8-I/AAAAAAAAAmU/gTNrAs2q4Lc/s1600/star_by_ribbonheart-d356ga3.png" 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 d'ya merahkan you all boleh tukarkan dengan icon yang you all nak.Boleh cari dekat Photobucket dan carilah ikon-ikon yang comel tau.



 Yang d'ya birukan korang tukar dengan background shoutbox pilihan u all.Boleh cari dekat Google dan Photobucket.



 Okay,tadi d'ya baru je edit ICON kawaii untuk shoutbox.Kalau ada sesiapa yang nak icon tuh,pakai jela.d'ya ikhlas editkan.Tapi kalau dah ambik komen la tau.Penat tau d'ya edit.heheh



http://i1101.photobucket.com/albums/g422/Dekya135/sho11.png



 Untuk pengetahuan kalau nak tukar icon sila gantikan URL IMAGE yang d'ya edit ini dengan kod yang bewarna MERAH.Senang jer kan nak buat fungsi ni.Kalau sudah dapat buat rajin-rajinkan diri komen and picit like kalau dah ambik.Anytime kalau ada masa d'ya edit cantik-cantik okayy...Selamat Maju Jaya. ;)



KREDIT : NURUL FARHANA



Photobucket

You Might Also Like

53 marshmallow komen