Tutorial Ajax Shoutbox

Assalamualaikum ..

Ajax shoutbox ni macam yang Tia tengah guna sekarang. Tengok dekat tepi tu. Slow motion tergedik-gedik je dia nak keluar kan. Hahaa! Dah Tia pun tergedik-gedik nak pakai. Tapi okeylah, boleh jimat ruang sikit. Berat tu, Tia tak terasa sangat.

Korang boleh reka sendiri sebenarnya background shoutbox tu dengan gambar utama tu (Tia tak tau nak gelar apa). Tapi kena pandai adjust lah nanti sampai shoutmix tu betul-betul masuk dalam background tu.

Sebelum tu, jangan gedik-gedik nak tanya Tia dari mana Tia dapat tutorial ni sebab Tia dah tak ingat. Okey kita mula..

Step 1 : Settings > Design > Page Elements > Add a Gadget > Pilih HTML/JavaScript > Masukkan code di bawah..

-----------------------------------------------------------

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxtD8D9ot4LHLuGhGBYvDSaTtuW3rG-HUF7bIcWiaWfMBgR0lXJOYl7VyMk81N1RcX0An_3GJGVPQcqBIc6uMFVc-vfhZhoXrv5KEiNqDanuU5gbdhsGSclwQI9zV5OcENi3Ir0Evpp8c/s1600/lightblack.PNG) 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="http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/shoutboxtab2.png" border="0" /></a> </center> </ul>

<div id="boxes">

<!-- Start Shoutbox -->

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

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

CODE SHOUTMIX

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

-----------------------------------------------------------

Tia tau panjang. Tapi percayalah, tak susah mana pun. Sekarang korang kena edit sikit. Tengok warna-warna tulisan yang Tia warnakan dalam code kat atas tu ye..

Merah : Itu background shoutbox korang. Kalau korang ada reka sendiri, gantikan aje URL tulisan warna merah tu dengan URL gambar background korang ye. Kalau tak nak, tak payah tukar..

Fuchsia : Yang tu gambar utama. Kan kena klik dulu baru keluar kotak shout. Itulah dia. Kalau korang pun ada buat rekaan sendiri contoh gambar korang ke, haa! Ganti URL tu dengan URL gambar korang sendiri. Tak nak, tak payah usik.

Biru : Nampak tak betapa besar gedabaknya tulisan tu. Hahaa! Yaa, kat situ code shoutmix korang.

Hijau : Sekiranya korang guna background shout korang sendiri, korang kena try and error pada tulisan berwarna hijau tu supaya kotak shout korang betul-betul masuk dalam background tu ye.

Okey selesai sudah tutorial ni. Hahaaa! Hmm, maaf. Tia tau ada lagi beberapa request tutorial. Tia akan cuba selaju mungkin siapkan tutorial tu yee..

Sekian...

• Tweet
• Share
• Share
• Share
• Share

PENAFIAN

Segala artikel yang dihasilkan oleh pemilik blog ini hanya sekadar pendapat peribadi yang mahu dikongsi bersama para pembaca blog ini serta untuk koleksi rujukan buat pemilik blog untuk kegunaan pada masa hadapan. Sebarang pertanyaan ataupun cadangan, sila emelkan ke inikisahtia@gmail.com

Related Post