1. macam biase : Dashboard ~> Design ~> Add a gadget ~> HTML .
2. Copy code dibawah ni 

<!-- Shoutmix By Ayie -->
<div style='display:scroll; position:fixed; top:45px; left:0px;'>
<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>

a {color:#ffffff; text-decoration:none}

img { border: none; }

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #ajaxshoutbox {
  background:url(URL IMAGE) no-repeat 0 0 

transparent; 
  width:377px; 
  height:500px;
  padding:70px 30px 30px 56px;
}

#closesb {
   padding:2px 0 0 0;
}

#author {
   padding:8px 0 0 168px;
}

</style>




<ul>
<center>
<a href="#ajaxshoutbox" name="modal"><img 

src="URL IMAGE UNTUK ICON SHOUTBOX" /></a>
</center>
</ul>

<div id="boxes">

<!-- Start Ajax Shoutbox -->
<div id="ajaxshoutbox" class="window">

LETAK CODE SHOUTMIX ANDA DISINI 

<div id="author">
<a target="blank" href="http://ayieslife.com/pop-up-shoutmix-tutorial/"/><img 

src="http://img101.imageshack.us/img101/331/getajax.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>

<!-- Shoutmix By Ayie --></div>