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

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 ^_^
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.gif
Untuk 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:



目を閉じれば, 今も君がそこにいるようで
We all live under the same sky, but we don't all see the same light. {}

affiliates




the past
do you have any question?
ASKBOX ASK.FM
Click one of the options above and contact the me'ttebane! (⊙ヮ⊙)
my tumblr
credits area
© 2014 - Codes, design and colors by pinktape. Icons by birdhaus. Bullets and mini-icons by 7THD and kawaii-box. Other picts by mrsjblacks, narucapped, shirayukkis.