Guest Book Overlay with jQuery

Assalamualaikum Wr.Wb. underground404 - Kali ini baru pertama kali share jquery :D. Mungkin kurang ngerti dengan tutorial ane nanti, hehe. Oke kali ini saya share efek-efek guest book. Mungkin udah tau kalau guest book muncul dari atas / samping. Kalo ane ini muncul ditengah, pake jquery bukan javascript. Sebenarnya ini tutorial dari hompimpa tpi saya adopsi ke guestbook, hehe. Kurang kreatif yah saya :(. Oke langsung saja. Sory demonya hilang ckckc :D.

Tutorial:

• Login dengan akun anda ke blogger.com
• Masuk ke Rancangan -> Edit html -> Centang Expand Template Widget
• Oke pertama pasang dahulu CSS nya diatas ]]></b:skin>

#kotak-dialog {
position:fixed !important;position:absolute;top:20%;left:45%;margin:0px 0px 0px -200px;width:500px;height:auto;background:#fff;-webkit-box-shadow:0px 0px 10px 5px #fff;-moz-box-shadow:0px 0px 10px 5px #fff;box-shadow:0px 0px 10px 5px #fff;border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;z-index:1000;display:none;
}

#kotak-dialog *:focus {outline:none;}

#kotak-dialog h3.title {
background-color:#ff0000;padding:10px 15px;color:#fff;font:normal 16px Arial,Sans-Serif;margin:0px 0px 0px 0px;position:relative;border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}

#kotak-dialog h3.title a {
position:absolute;top:10px;right:15px;color:#fff;text-decoration:none;cursor:pointer;
}

#kotak-dialog .isi-dialog {
margin:15px;font:normal 12px Arial,Sans-Serif;
}

#kotak-dialog .button-wrapper {
padding:10px 15px 0px;border-top:1px solid #ddd;margin-top:15px;
}

#kotak-dialog .button-wrapper button {
background-color:#FF0C39;border:none;font:bold 12px Arial,Sans-Serif;color:#fff;padding:5px 10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;cursor:pointer;
}

#kotak-dialog .button-wrapper button:hover {
  background-color:#aaa;
}

#dialog-overlay {
position:absolute;z-index:999;top:0px;right:0px;bottom:0px;left:0px;width:100%;height:100%;background:#000;display:none;
}

• Kemudian pasang script berikut diatas </head>

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

Kalau script diatas sudah ada langsung saja dilewati langkah tsb.
• Kemudian pasang script berikut diatas kode </head>

<script type='text/javascript'>
$(function() {
     //Set lebar dan tinggi overlay agar cukup untuk menutupi keseluruhan halaman
     var olayWidth = $(window).width(), olayHeight = $(document).height();
     $(&#39;#dialog-overlay&#39;).css({width:olayWidth,height:olayHeight});

     //Tampilkan kotak dialog saat .open-dialog diklik
     $(&#39;.open-dialog&#39;).click(function() {
          $(&#39;#kotak-dialog&#39;).show(&#39;slow&#39;);
          $(&#39;#dialog-overlay&#39;).fadeTo(&quot;normal&quot;, 0.4);
          return false;
     });

     //Tutup kotak dialog saat .close diklik
     $(&#39;#kotak-dialog .close&#39;).click(function() {
          $(&#39;#kotak-dialog&#39;).fadeOut();
          $(&#39;#dialog-overlay&#39;).hide(&#39;slow&#39;);
          return false;
     });
});
</script>

• Kemudian pasang kerangka guest booknya diatas kode </body>
  Ohh ya, width pada kode Guest book anda diganti menjadi 95% saja, biar gak terlalu lebar (pas dengan kotak dialognya)

<!-- START DIALOG GUEST BOOK -->
<div id='kotak-dialog'>
    <h3 class='title'>Guest Book Blog Ini<a class='close' href='#'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAK9JREFUeNpjYBgFQxpoAPFqIObBIicBxOuhNFbAjEN8NxA7AbEd1PBfSAbuB2IbIFYB4pWkGHoQiEOAWAvJYCGogSBf3ADiUCD+gk0zI4Eg2A913REgFkEy0BGIX5DqfRB4A8RbkVwsQoyBIMBEIMI+QDGyRV8IxTI+l0qgheEftDD+Raqh6AY6QmM6hBiDcRkKMlAPLQzRw1gNajDRAJQOT+NI4CDXn4fSo2AUoAEAj24p6G8syswAAAAASUVORK5CYII='/></a></h3>
    <div class='isi-dialog'>
    <center>

KODE GUEST BOOKNYA

    </center>
    </div>
</div> <!-- end kotak-dialog -->
<div id='dialog-overlay'/>
<!-- END DIALOG GUEST BOOK -->

• Oke, sekarang tinggal pasang dah kode pemanggilnya.
<a class='open-dialog' style='cursor:pointer;' title='Open Guest Book'>Guest Book</a>
• Silahkan kode pemanggilnya ditaruh dimana saja terserah agan :)
  kalau saya sih mending dikasih di menu bawah header, tpi terserah agan :)

Bila susah, bisa tinggalkan komentar. Semoga bermanfaat :)
Wassalamualaikum Wr.Wb