Friday, August 26, 2011 at 7:46 AM with ≡
Assalamualaikum !
Hari ini Lulu akan ngebuat Tutorial Ajax Float Shoutbox kayak Shoutboxku yg dulu XD
Caranya::
Merah itu kode background buat shotmix kamu
Blue itu icon shoutbox kamu
Pinkie itu kode Shoutmix kamu
Credits For Tutorial and Background Shoutmix: Ainaa
Icon Shoutmix By Me!!
Hari ini Lulu akan ngebuat Tutorial Ajax Float Shoutbox kayak Shoutboxku yg dulu XD
Caranya::
Pergi ke Design >> Add New Gadget >> HTML Java Script
Copy & Paste Code dibawah :
<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(BODY/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>
<ul><center> <a href="#wanhazelshoutbox" name="modal"><img src="ICON SHOUTBOX" border="0" /></a> </center> </ul>
<div id="boxes">
<!-- Start Shoutbox -->
<div id="wanhazelshoutbox" class="window">
<!-- Begin ShoutMix - http://www.shoutmix.com/ --><center>
CODE SHOUTMIX
</center>
<!-- End ShoutMix -->
<div id="author">
</div><div id="closesb"><center><input type="button" value="Close" class="close" /><center>
</div></div><!-- End of Ajax Shoutbox -->
<!-- Mask to cover the whole screen -->
<div id="mask"></div></div>
<!-- End of Ajax Popup Shoutbox--></div>
Merah itu kode background buat shotmix kamu
Blue itu icon shoutbox kamu
Pinkie itu kode Shoutmix kamu
Lulu juga bakal bagi" icon shoutmix dan backgroundnya XD
Kalau mau Credits ke aku yah ^_^
Kalau mau Credits ke aku yah ^_^
Url: http://i1205.photobucket.com/albums/bb430/Lulu_Keybum/s.jpg
http://i1205.photobucket.com/albums/bb430/Lulu_Keybum/scopy.jpg
Url: http://i1180.photobucket.com/albums/x416/whatevagurl/anigifbiru.gif
Url: http://i1180.photobucket.com/albums/x416/whatevagurl/anigifhijau.gif
Url: http://i1180.photobucket.com/albums/x416/whatevagurl/anigifpepel.gif
Url: http://i1180.photobucket.com/albums/x416/whatevagurl/ainaamaniaanimated.gifUntuk Icon Shoutmix:
http://i1205.photobucket.com/albums/bb430/Lulu_Keybum/Blog/shout1.png
http://i1205.photobucket.com/albums/bb430/Lulu_Keybum/Blog/shou7.png
http://i1205.photobucket.com/albums/bb430/Lulu_Keybum/Blog/shout6.png
http://i1205.photobucket.com/albums/bb430/Lulu_Keybum/Blog/shout2.png
http://i1205.photobucket.com/albums/bb430/Lulu_Keybum/Blog/shout3.png
http://i1205.photobucket.com/albums/bb430/Lulu_Keybum/Blog/shout4.png
http://i1205.photobucket.com/albums/bb430/Lulu_Keybum/Blog/shout5.png
Credits For Tutorial and Background Shoutmix: Ainaa
Icon Shoutmix By Me!!
Labels: Tutorial