Trik Membuat Buku Tamu Muncul Dengan PopUp Overlay

 Di dua posting sebelumnya saya sudah memberi penjelasan tentang bagaimana membuat buku tamu yang bisa di buka dan di tutup yang jika di klik tombolnya seakan tergulung ke belakang dan ke depan layar dari samping layar dan bagaimana membuat pop-up overlay yang telah saya jelasakan apa itu overlay di artikel sebelumnya.



Kali ini kita akan membuat suatu modifikasi yaitu menggabungkan kedua widget di atas, yaitu kita akan membuat buku tamu tapi kali ini buku tamu yang akan kita buat nantinya akan muncul di tengah layar di dalam jendela overlay, jadi kita tinggal melakukan klik di gambar atau tombol yang kita sediakan untuk membuka buku tamu overlay tersebut. Agar lebih jelasnya kamu bisa melihat contohnya yang telah saya buat disini.

Atau klik gambar berikut ini

Silakan Corat Coret di Sini ::..

tutup kembali

Untuk membuatnya kita ingat source kode untuk membuat pop-up overlay sebagai berikut

/* Kode Pop Up Overlay */

<a href="javascript:popup('pop up overlay')">GAMBAR TOMBOL BUKU TAMU</a>
<div id="dialog-overlay">
</div>
<div id="dialog-box">
<div class="dialog-content">
<div style="text-align: center;">

***************************************************

KDOE CBOX ATAU SHOUTMIX KAMU DISINI

***************************************************

<div id="dialog-message"></div><a class="button" href="#">tutup kembali</a></div></div>
<style type="text/css">
#dialog-overlay {width:100%; height:100%;filter:alpha(opacity=50);
-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;background:#000;position:absolute;top:0; left:0;z-index:3000;display:none;}#dialog-box {-webkit-box-shadow: 2px 4px 60px red;-moz-box-shadow: 2px 4px 60px red;-moz-border-radius: 10px;-webkit-border-radius:10px;background:black;width:auto;position:absolute;z-index:5000;display:none;}#dialog-box .dialog-content {text-align:left;padding:5px;margin:13px;color:#000; text-shadow: 1px 1px 2px #000;font-family:arial;font-size:15px;}a.button {margin:10px auto 0 auto;text-align:center;display: circle;width:20px;padding: 5px 10px 6px;color: #fff;text-decoration: none;font-weight: bold;line-height: 1;background-color:blue;-moz-border-radius: 5px;-webkit-border-radius: 5px;-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);text-shadow: 0 -1px 1px rgba(0,0,0,0.25);border-bottom: 1px solid rgba(0,0,0,0.25);position: relative;cursor: pointer;}
a.button:hover {background-color: #c33100;}#dialog-box .dialog-content p {font-weight:700; margin:0;}#dialog-box .dialog-content ul {margin:10px 0 10px 10px;padding:0;height:50px;}
</style>
<script src="http://izoellatoverlay.googlecode.com/files/latoverlay.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {$('#dialog-overlay, #dialog-box').hide();return false;});
$(window).resize(function () {if (!$('#dialog-box').is(':hidden')) popup();}); });
function popup(message) {var maskHeight = $(document).height();var maskWidth = $(window).width();var dialogTop = (maskHeight/3) - ($('#dialog-box').height());
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();$('#dialog-message').html(message);}</script></div>

.
Pengaturan :
Untuk mennganti link overlay kita dengan gambar atau tombol overlay, kita ganti teks yang berwarna hijau dengan kode gambar, misalnya seperti di bawah ini

<img border="0" src="http://i1191.photobucket.com/albums/z464/izoel1/buku-tamu.png" />

Letkkan kode di atas sehingga susunan kode overlay menjadi seperti ini

<a href="javascript:popup('ini contoh nya overlay dengan css3')"><img border="0" src="http://i1191.photobucket.com/albums/z464/izoel1/buku-tamu.png" /></a>

<div id="dialog-overlay">

</div>

<div id="dialog-box">

<div class="dialog-content">

<div style="text-align: center;">...........................................................................................

Tampilan gambar di atas seperti ini .yang nantinya misalkan kamu pasang widget ini di sidebar yang akan tampil adalah tombol atau gambar ini dan jika kamu klik gambar ini maka akan muncul chatbox atau buku tamu kamu.

Sekarang pengaturan untuk shoutmix atau cbox kamu,
Pada struktur kode pop-up overlay gantikan kode yang saya beri warna biru muda dengan kode shoutmix atau cbox kamu.

Selesai, sekarang buka blog kamu dan lihat buku tamunya.
Selamat mencoba dan semoga berhasil.