Tutorial : Ajax Float Profile Like Me

Assalamualaikum!! Hello!!

Aku rasa boring, and takda rancangan televisyen yang menarik yang boleh ditonton, maka, aku buat tutorial mengenai bagaimana nak buat Navigation Pop-up seperti aku.. (Tak tahulah namanya apa) Kalau korang tekan bahagian You and Me at my navigation sidebar... Ada kotak terpacul keluar bukan?? Lagipun, ada orang tanya pasal tuhh.. So... Tanpa membuang masa...

Sebelum itu, sebenarnya, ianya kod yang telah diubahsuai oleh aku sendiri, tanpa dibantu oleh sesiapa OKAY?? Tolong CREDIT jika korang guna tutorial ini kat blog korang...

Dashboard > Design > Add A Gadjet > HTML / Javascript

Pastu paste-kan kod di bawah ini dekat bahagian HTML / Javascript tadi...

<!-- Pop-up Box by A.S -->
<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 #Endorphin {
background: #f2f2f2 url();border-top: 60px solid #000;border-right:5px solid #ccc;border-left:5px solid #ccc;border-bottom:45px #9a9a9a;border-radius: 5px;width:500px;height:600px;padding:56px 0 20px 10px;overflow: auto;
}
#closesb {
padding:2px 0 0 0;
}
#author {
padding:8px 0 0 168px;
}
</style>
<ul><center> <a href="#Endorphin" name="modal"></a> </center> </ul>
<div id="boxes">
<!-- Start Box -->
<div id="Endorphin" class="window">
<!-- Begin Babbles --><center>
<br><br><br>Write Anything You HATE here



<!-- End Babbles -->
<div id="author">
</div><div id="closesb"><input type="button" value="Close" class="close" />
</div></div><!-- End of Babbles -->
<!-- Mask to cover the whole screen -->
<div id="mask"></div></div>
<!-- End of Pop-up Box by A.S-->

Eeep, jangan dulu fikir yang kita dah siap.... Okeyh, selepas ini kita buat pengantara yang membolehkan KOTAK kita ini POP-UP!!

Mudah dan simple sahaja...

Korang nak pilih menggunakan perkataan ataupun image??

For Words..

<a href="#Endorphin"name="modal">CLICK OR YOU A MORON.</a> 

Perkataan yang diwarnakan PURPLE boleh diubah sendiri.

Deciding to use image...

<a href="#Endorphin"name="modal"><img src="URL" /></a>

Nota...

MERAH       -  Ubah bentuk, saiz, warna dan border KOTAK.
HIJAU          -  Ubah URL kotak pastikan semua perkataan yang berwarna hijau yang bakal diubah sama.
KUNING     -  Korang Isi apa sahaja korang suka..

P/S : Pastikan korang berhati-hati OK??? Kalau tak jadi jangan segan-segan.. Beritahu kat saya, OK?