Tutorial AJAX shoutmix

amboi...tajuk entry ngancam dowh..haha.


tapi biasa je sebenarnya..tuink-tuink...

okeyhla!!nak wat juga tutorial ni..
ni permintaan daripada cik SHIGELLA ZOSTER




yela...shoutmixx saja tu ala-alakazam gitu..hehe.

ok jom START the tutorial!!

macam biasa..

dashboard--design--add gadget--edit Html/javascript

Lepas tu korang kna COPY code kat bawah ni then PASTE tempat korang buka tadi k..


 <!-- SHOUTBOX AJAX Start -->
    <div style='display:scroll; position:fixed; top:30px; right:-0px;'>
    <br />
    <a class='linkopacity' href='http://www.masahmadsafwan.com' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feewit'></a><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 #masahmadsafwan {
    background:url(BACKGROUND SHOUTMIXX KORANG MCAM CEMOXX PUNYA,XNK LETAK PUN XPE) no-repeat 0 0 transparent;
    width:275px;
    height:480px;
    padding:56px 0 0px 0px;
    }
    #closesb {
    padding:2px 0 0 0px;
    }
    #author {
    padding:8px 0 0 168px;
    }
    </style>
    <center> <a href="#masahmadsafwan" name="modal"><img src="URL GAMBAR" border="0"/></a> </center>
    <div id="boxes">
    <!-- Start Shoutbox -->
    <div id="masahmadsafwan" class="window">



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




    MASUKKAN CODE SHOUTMIXX KORANG





    </center>
    <!-- End ShoutMix -->
    <div id="author">
    </div>
    <center>
    <div id="closesb"><input type="button" value="KETUK CEMOXX CiNI" class="close" />
    </div></center>
    </div><!-- End of Ajax Shoutbox -->
    <!-- Mask to cover the whole screen -->
    <div id="mask"></div></div>
    <!-- End of Ajax Popup Shoutbox-->



    <!-- SHOUTBOX AJAX END --></div>



jangan lupa nak tukar k yang da kena BOLD tu..cubit  korang nanti lau tak tukar..hehe


jeng..jeng...jeng.....
da siap...

now da siap sumanya....
korang boleh la SAVE dengan bangganya...

terima kacehh!!!

da belajar tu,tingalkan komen tanda terima kasih dan berpuas aty k..

tak baik taw curik-curik belajar tanpa berterima kasih..


saya gembira anda komen :-)

4 orang tengah mencarut:

Salbiah Mohd said...

nak tny..i dh buat cm yg u ajr dlm tutorial nih tp xjd la..kenapa ek..huhu

Joan Jairey Gubod Gondiloh said...

@Salbiah Zakeri

u kna baca betul2 dear...

Anonymous said...

dy xbole na tutop la.. cne ekk,, nk adekn button tutup ?

n ade x tuto back to the top?


thxx.. ^^

Joan Jairey Gubod Gondiloh said...

@Anonymous

iyep!!!button tutop msty ade..kalo adik bca tul2..pasty berjaya punya..oky..nnt akak wat tuto back to top !!!