Sunday 5 February 2012

tutorial shoutbox AJAX float


hee .. terase nak wat tutorial utk blog plak .. owg len wat iela pon nak wat gak .. gatal ;> saje jer
iela nak share tutorial sembunyikan shoutbox mcm iela gune skrang nie..

1. dashboard>design>add a gadget>HTML/javascript
2. copy and paste

<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:0px; right:-0px;'>
<br>
<a class='linkopacity' href='http://wanhazel.blogspot.com/2010/07/tutorial-ajax-float-lebih-cepat-nak.html' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Get Shoutbox AJAX float'><img border="0" src="http://i1009.photobucket.com/albums/af215/wanhazel252909/iconlink.gif" /></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 #wanhazelshoutbox {
background:url(url background shoutbox yg korang suke
) no-repeat 0 0 transparent ;
width:425px;
height:460px;
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg51LNIipn3GXofjdQU0vExqxThB7y0kTBhCfxY_hREFyR21Tm_yYyjWMPv26e8Ep7IqGJ0yjIB7VIe6CUtT4t-JhZbV9rkXuMO1YgiHcMS5X_GcgA5g-hLpfoR1d3tJzMJl4OoyTVnWUk/s1600/blacksb2.png
" border="0" /></a> </center> </ul>


<div id="boxes">
<!-- Start Shoutbox -->
<div id="wanhazelshoutbox" class="window">
<!-- Begin ShoutMix - http://www.shoutmix.com --><center>




kod shoutbox disini




</center>
<!-- End ShoutMix -->
<div id="author"></a>
</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-->


yg colour pink tu korang tukar ape2 jer icon yg korang suke 
klu ta paham, pegi SINI
contoh yg iela boleh bagi kat korang, iela pinjam dari blog owg len 
iela bru blajar2 nak wat shoutbox icon sndiri
klu dah pandai, t iela share2 at cni plak ea ..



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitckZXg66rFrKz62uYaoB8Z_EaChj8sMdQ8FuKp8Ii6isvWVaNvIix3jC3kQYqC4XanpoLLyF5Yuv3n0VGPz5G5Qf1rlR92om7AZTiZnkA98Ut9wy3TcJpP3HOzsWPSSpgW13h_yjLzl4/s1600/abfbdrzgsvge.png

http://4.bp.blogspot.com/-NwHCORHubAg/TwEv7PIxLMI/AAAAAAAAAXU/ZQO-3PoFX5A/s1600/....shout+icon+3.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi32NyCHZ-dGQ4h35YU95JGU-kb6OP6SoXW1QsyHqzu9Q2LswAKcowAwIVa1nkEuI0NZooCTzTpfqZyCY23GR2lxyiQ2cZfrSXC-bikwrDjAvNFjTC4UzbKmRMCdHp3ZM-AA3nMirPoyf6u/s1600/mary+icon+shout.png

iela wookie



No comments:

Post a Comment