February 23, 2011
7




 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 izoel's notice



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 izoel's notice.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.

7 komentar:

  1. dah nyoba sop,, tapi kok gak bisa ya....????

    ReplyDelete
  2. @Syaiful Anwar

    Coba lagi sob, trik ini udah berhasil saya praktekin di 3 template berbeda

    ReplyDelete
  3. Udah aku coba ... tapi belum berhasil, silahkan cek di www.musikdigital67.blogspot.com.
    Salam kenal...

    ReplyDelete
  4. wah wah, padahal contohnya kan udah bisa yah, coba periksa dulu scrollbar di bawah browser bertambah panjang atau tidak scrollbarnya, mungkin jendela overlaynya muncul di paling bawah sehingga tidak terlihat, okelah silakan coba overlay versi 2 saya, semoga berhasil di template sobat, ikuti link ini pop up overlay v2, selamat mencoba semoga berhasil

    ReplyDelete
  5. follow Back ea bro
    http://lecky-zone.blogspot.com

    ReplyDelete

Saya sangat berterimakasih apabila sahabat sekalian bersedia untuk tidak meninggalkan spam dan meninggalkan komentar yang berhubungan dengan artikel di atas.