jQuery Popbox not like usually Popup

Semakin susah ternyata mencari sumber artikel gaya punya. Apalagi konten yang dibicarakan mengenai tutorial blog, hampir sudah semua terberitakan halah :d Koben akan berbagi trick jquery plugin saja. This is story tell about jQuery PopBox!
Uniknya jQuery popbox terdapat pada hasil akhirnya. Kebanyakan trick yg bernamakan pop-pop itu seperti lightbox contoh. Konten utama akan ditimpa dengan lightbox effect secara full. Kalau si pop-box bergaya simple balloon.

Ini adalah yang dimaksudkan dengan simple balloon!!!

Mari kita bahas struktur pembangun jQuery PopBox.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
(function(){
  $.fn.popbox = function(options){
    var settings = $.extend({
      selector      : this.selector,
      open          : '.buka',
      box           : '.box',
      arrow         : '.arrow_'
    }, options);
    var methods = {
      open: function(event){
        event.preventDefault();
        var pop = $(this);
        var box = $(this).parent().find(settings['box']);
        box.find(settings['arrow_']).css({'left': box.width()/2 - 10});
        if(box.css('display') == 'block'){
          methods.close();
        } else {
          box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
        }
      },
      close: function(){
        $(settings['box']).fadeOut("fast");
      }
    };
    $(document).bind('keyup', function(event){
      if(event.keyCode == 27){
        methods.close();
      }
    });
    $(document).bind('click', function(event){
      if(!$(event.target).closest(settings['selector']).length){
        methods.close();
      }
    });
    return this.each(function(){
      $(this).css({'width': $(settings['box']).width()});
      $(settings['open'], this).bind('click', methods.open);
    });
  }
}).call(this);
//]]>
</script>

Semoga tidak ada yg menjadi emot ;))

Kode CSS

.popbox {
position: relative;
}
.collapse {
position: relative;
}
.buka {}
.box {
display: none;
background: #fff;
border: 1px solid #bbb;
border-radius: 5px;
box-shadow: 0px 0px 10px #555;
position: absolute;
padding: 5px;
z-index: 1;
}
.box img {
width: 100%;
height: 90%;
}
.arrow_:after, .arrow_:before {
bottom: 100%;
border: solid transparent;
content:" ";
height: 0;
width: 0;
position: absolute;
}
.arrow_:after {
border-bottom-color: #fff;
border-width: 10px;
left: 10%;
margin-left: -10px;
}
.arrow_:before {
border-bottom-color: #bbb;
border-width: 11px;
left: 10%;
margin-left: -11px;
}

Markup HTML atau cara penulisan.<div class='popbox'>
<a class='buka' href='#'>Your Title Here!</a>
<div class='collapse'>
<div class='box'>
<div class='arrow_'></div>

------------- ADD YOUR CONTENT HERE -------------

</div>
</div>
</div>Setelah semua bumbu diatas masuk ke blog kalian, saatnya langkah terakhir yakni peletakan script pemanggil jQuery pop-box. Letakin diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.popbox').popbox ();
});
//]]>
</script>

Good luck :)
Sebagai bonusnya, sobat-sabit silahkan jalan-jalan yuk kemari nih ;)
http://jobyj.in/koottam-jquery-plugin/demo.html
http://www.red-team-design.com/interactive-menu-with-css3-jquery
http://webstutorial.com/css3-portfolio-menu/css3 (CSS3 version)
Happy jQuery plugin \m/