Tutorial; Ajax Float Shoutbox

Ok, kalau korang perasan, kat blog aku ni de dua tutorial pasal shoutbox. Jangan confuse okay. Yang lagi satu tu shoutbox drag dari tepi, yang ni float, paham? Tajuk lebih kurang same. Tak paham? Aku memang lemah sikit bab explaination ni ;( Takpe, klik aku punye “Jerit!” & tengok shoutbox tetibe appear kat tengah kan. Hahh, nampak tak.. Berminat? Ok, meh wat same2.. Miss Tora & Kieroro Muchy wat gak okay! :D






 Dashboard > Deisgn > Page Elments > Add a Gadget > HTML


 Masukkan kod di bawah;

<style type='text/css'>

a.linkopacity img {

filter:alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;

-khtml-opacity: 0.5;}

a.linkopacity:hover img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

-khtml-opacity: 1.0; }

</style>

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

<br />

<!-- 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: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 #wanhazelshoutbox {

background:url(URL background shoutbox) no-repeat 0 0 transparent;

width:425px;

height:460px;

padding:55px 0 15px 6px;

}

#closesb {

padding:2px 0 0 0;

}

#author {

padding:8px 0 0 168px;

}

</style>

<ul><center> <a href="#wanhazelshoutbox" name="modal"><img src="http://s467.photobucket.com/albums/rr37/aimd0710/Blog%20material/?action=view&current=tabs.png" border="0" /></a> </center> </ul>

<div id="boxes">

<!-- Start Shoutbox -->

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

<!-- Begin ShoutMix - http://www.shoutmix.com --><left>

Masukkan kod shout mix korang kat sini!

</left>

<!-- End ShoutMix -->

<div id="author">

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

</div>

Antara pilihan shoutbox background yang de;


Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJ9vJ9mHAYVxKsuQ7kUpK1akVEmG1JwHlxa82IhrSzRpZO-WSuetlMlgUbpQPXzfrJTHQ5An7KmPe52dVp0Td74wEwljX2J_kFdEVNcjy7xojpw8KBlYLnGzn5zgc_ty-dfaTI6t7rsw/s1600/red.png

Pink

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA-scmo2MMlQ53psIMm1Xd_6GLg4bXe9M3t3bUAnXb1V8S5WVy2BBaxImkN27WDLyIKIZJlrYjjRwtYUSkS8Dy-gGFKEqMtLdfewVMKkScCvq0MV4MmVpD7pG77KyLzKv1KCZ89JgbseM/s1600/pink.PNG

Oren

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-wEAcAvVqAU2hyphenhyphenD9PUT1xg1VR3aVL54ctsVBxMSOb9Z4sbDu_ovGpfYWnNvsvldqjc-b86C7guJWDV09q2f74yHkXtJs2yiwX4SHUmFlHzm-jJKaxLxIbwJt0WqwsXy3B8zhfQFwWp_o/s1600/orange.PNG

Purple

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwIXERGaS4VP7Lu3HVxTYR3WcMYFV_9pu5CDf4pUgiTvereckubVDsBA-tzEVXOvYRFE20ssStEcjbNoUGouQcMuP8qhq9FxqWsyHeyNlsmDxUaEgjXOOuwKwS5XhX_Gwhb_oBKCLh-18/s1600/lightpurple.PNG

Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQzynCp-ykTGHgBmoWMMq5N9008mRv2DMVsKj84Q5p5NXwZpRWB4WCoQkBXU6ZOLRMeU0-5KOKcA67Gca58zBuUgkVNLOTMGaTJVx_k9NSH1_hT35HKpVZFEL5y3Di8cHM9j6B9iTVvNA/s1600/lightgreen.PNG

Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRimeOEFVKcOA7eYVpNndX_Laj1_6QJf8jevvfjP6KwhWbWJaMdfUSNJtSRZVKvCcUaTaFAb-_26m995B8BX17EHrKlXUPe5YgpsYhyIXdO7WxOfBWmUKk-XDCKdedwi5znCgsbguWnYQ/s1600/lightblack.PNG

Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi21cA7X5HmsPh6AoSUxlvNQ7AP_uzRxk44wVSMjl1Xct35xUO4UIv4G7lZEtGlvbrP_bgUt7rabpyr81yqJdoJDnSsiMOTkcT1ktXGSQEA0htheqIDrcEEMrCg00sNlLrvf2o4OgUFo6w/s1600/cloudblue.PNG

 Save! ;D

This tutorial is credit to Wan Hazel.

p.s; Kalau de pape masalah, kasitau kat comment. Aku akan cuba tolong! ;) && edit kod dalam notepad dulu sebelum paste ke HTML.

---

Kasi komen sikit k?

---