Tutorial : Float Shoutbox

Hai semua penduduk "bumi". Cuaca yg agak panas kan sekarang?? Sampai dah mencecah 30 ke atas celcius dah~ Kah6 , ta reti eja celcius.. Betul kea?? Tell me TT_TT . OKAY LA ! *Aku selalu buang masaa korang . Wahahaha XD . Jahat lh aku ni (Y) . OKAY ! FIRST STEP! 

• Copy code ini kawan-kawan. 

• <!-- Start Ajax Popup Shoutbox by Mijie -->
  <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});
  
  
  
  //transition effect 
  
  $('#mask').fadeIn(1000); 
  
  $('#mask').fadeTo("slow",0.8); 
  
  
  
  //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 #mijieshoutbox {
  
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj9a3D_vE65Diw-3-zuH9xkJHcgirDNvWUyGDNygM8W6DqCMSoDGslN5S1LwDBiR2o-Jtldm6kVualFw1QM42G4iY2UWH71n4whM3Gq93dpHPBKUp8ob32poo_BNrP0cubqc3C-B5jrbg/s1600/lightblack.PNG) no-repeat 0 0 transparent; 
  
  width:272px; 
  
  height:460px;
  
  padding:56px 0 20px 5px;
  
  }
  #closesb {
  
  padding:2px 0 0 0;
  
  }
  #author {
  
  padding:8px 0 0 168px;
  
  }
  </style>
  
  
  <ul><center> <a href="#mijieshoutbox" name="modal"><img src="http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/shoutboxtab.png" border="0" width="158" height="58" /></a> </center> </ul>
  
  <div id="boxes">
  
  <!-- Start Shoutbox -->
  
  <div id="mijieshoutbox" class="window">
  
  <!-- Begin ShoutMix - http://www.shoutmix.com -->
  Masukkan Kod ShoutBox Anda Disini 
  <!-- End ShoutMix -->
  
  <div id="author"><a target="blank" href="http://mymijie.blogspot.com/2010/07/cara-membuat-shoutbox-dengan-ajax.html"/><img src="http://img.photobucket.com/albums/v486/mafiatrg/linky.png" /></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 by Mijie -->

• COPY dah? If dah bagus lah ! Okay now, yg bold warna merah ~untuk frame die, kalau nak frame lain click sini  . 
• Okeh, yg bold warna ungu ~utk tab dia. Boleh tukar, ikut kreativiti masing-masing . 
• Masukkan code shoutbox anda di sini = masukkan code shoutmix korang kat situ and then adjust height and width dia ;). 

width='261' & height='380'

     Credit to budak comel ~

---

Thanks sudi membaca. Ngee~ Suka? Comment lahh :D

---