Cara buat Ajax Float Shoutbox

Monday, January 09, 2012

Assalamualaikum..


hi semua,

lamanya tak buat tutorial kan. ini semua sebab Shoutmix buat hal. jadi terus berposak-posak cari alternatif lain dan yess, saya jumpa yang lebih AWEsome. oke mungkin Ajak Float Shoutbox ni ramai da buat, but mungkin ada lagi yang tak tahu kot hehe ayat penyedap hati.


gegurl punya!


oyea, kalau nak tengok tutorial sorok shoutbox kat tepi blog, tengok SINI. mari cekkidaud cara nak buat ajax float shoutbox ni ya. cara sama jugak macam nak masukkan widget baru.

oke baeklah, mari mulakan ya..

1. Design > Add and Arrange Page Elements > Add a gadget > HTML/JavaScript

2. copy (ctrl+c) code ni, dan paste (ctrl+v) pada kotak html/javascript tadi.

<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(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>
<center> <a href="#wanhazelshoutbox" name="modal"><img src="ICON SHOUTBOX" 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>


3. klik save, then save lagi kat bahagian atas dan view blog..
.....

yang Merah tu, masukkan url background yang korang pilih.
pilihan background tengok SINI

yang HIJAU tu, masukkan url icon shoutbox yang korang pilih.
pilihan icon tengok SINI

yang BIRU tu, masukkan code shoutbox yang korang pilih.
pilihan shoutbox tengok SINI




yeah da siap..ehehee, selamat mencuba uols. 
nak tengok tutorial lain, klik SINI.
~wassalam~

pst : tutorial ni untuk yang tak tahu oke..pada yang tahu dan pakar..diam..diam..kredit untuk wanhazel

da buat?komen sini yaa..terima kasih.

You Might Also Like

6 Comments

  1. haha,,, baik.. saya diam.. ...... :O
    cube test tgok FIBOX pula, best cantik lagi kemas.. :)
    blogwalking singgah2 sini ye,, jangan mare.. heee :'D

    ReplyDelete
  2. @akuamir

    hehhee, da try da.oke jgk, just ada smthing yg xsesuai sket kot..a

    ReplyDelete
  3. Thanks for this tuto . Menjadi lah :D

    ReplyDelete
  4. tq mia. i follow tuto ni. jd. terbaikk :)

    ReplyDelete

SHARE LINK ANDA DI SINI

<a href="URL LINK BLOG U OLS"> NAMA BLOG U OLS</a>

thanks for dropping by...
^__^