0 Dua model buku tamu keren,Tutorial

Selamat malam kawan kawan pengunjung blog Kediri Blogger,kali ini kita akan membahas tentang membuat Buku tamu,meskipun ini bukan buatan aku sendiri tetapi mungkin berguna untuk kalian yang sedang mencari buku tamu dengan model yang bagus.semoga buku tamu yang saya publikasikan ini berguna untuk kalian....ini ada dua jenis model buku tamu,silahkan pilih sendiri menurut selera kalian....

1.BUKU TAMU

















Copy kode di bawah ini

<script>
$(document).ready(function() {
//select all the a tag with name equal to syam
$('a[name=syam]').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 moveHeight = $(document).height();
var moveWidth = $(window).width();
//Set heigth and width to move to fill up the whole screen
$('#move').css({'width':moveWidth,'height':moveHeight});
//transition effect
$('#move').fadeIn(500);
$('#move').fadeTo("slow",0.5);
//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(1000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#move').hide();
$('.window').hide();
});
//if move is clicked
$('#move').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#move {
position:absolute;
left:0;
top:0;
z-index:5000;
background-color:#000;
display:none;
}
#house .window {
position:fixed;
left:0;
top:0;
width:330px;
height:479px;
display:none;
z-index:9999;
padding:0px 100px 0px 0px;
}
#house #shoutmix {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVpTpn83mdsioK3mSixQ6qcErxj1aICdTPT694JXwUPi7h6Iz3QD_sjRxAcGrWLhOQSHiPtGoVjciiQUtP3WiS9xuOIhHXNc14SPZ0S99cLLKmro5HCoRiteYQWXWoYQWaT0ETMaxn5o0/) no-repeat 0 0 transparent;
width:330px;
height:479px;
padding:83px 0px 0px 0px;
}
#closed {
padding:2px 0 0 0;
}
</style>
<ul><div style='display:scroll; position:fixed; top:130px; right:3px;'>
<a href="#shoutmix" name="syam"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhC1byM5wcsPTrT77m90fV5sHLaglqVmVHKX0x85YkIdY5cUe_hTDpUO5YampExW5l8GUwKQSRTBZjnIp0e41_B0gK88iKoO0ElYrgtFHhO7k8MPZhE4QrlBy0Ey1zbX6mwbyv5oNHD0/s128/template_tamu.gif" width="34" height="125" /></a>
</div>
</ul>
<div id="house">
<!-- Start Shoutmix -->
<center>
<div id="shoutmix" class="window">
ISI KODE BUKU TAMU KALIAN
<div id="closed"><input type="button" value="Close Here" class="close" /></div>
</div></center></div><!-- End Shoutmix -->
<div id="move"></div>
<!-- End of Shoutmix light effect -->

2. BUKU TAMU

Copy kode di bawah ini

<a href="javascript:popup('pop up overlay dengan css3')"><img border="0"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7TUQ_OzP1mRU0Y76_-erl889ogRhBnxGDW9CL6E5c4yA8glcKGRjM2HIruhXQ-EvfvUO44uz9TqwrW0B3nzt0rFyA3e9S2BtUxbxOE_KJUTq9iXrH-cwi13ln93OIfQfrroWpZdY0jrqJ/s1600/Cboxx+Jadi.gif"/></a>
<div id="dialog-overlay">
</div>
<div id="dialog-box">
<div class="dialog-content">
<div style="text-align: center;">
***************************************************
ISI KODE BUKU TAMU ANDA
***************************************************
<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>

Semoga Postingan saya ini bermanfaat buat anda pengunjung blog saya ini.jangan lupa masukan komentar anda dan kalau anda inggin mengikuti blog saya follow saja blog saya...akir kata,Salam blogger indonesia

Sumber: http://kediri-blognet.blogspot.com/