<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/AVvXsEgBr2pwmbKEU_g2TntZrRJzf_HN9cUNcKHcQ4YD2WN1jhcpuCL63vJouadAANF61TZU0dRD5srMDGJPIVCAn9P5qjQ2XMQzw5qJuOrUyV-_JZSVUQikxHvARK8WelJ-i9whhr4YxCwau9J5/) 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/AVvXsEhablHjyAGyFVKPG_XSZeN438UBZ-ISolGeiuTOt9f0EurJtIuFWYgyw4DYGOv71wTRwsr3arxcMhtVrsPtNUHlVzCZQSsEfKzx6LRLlZchwPpHGvJh_vwWmzX6UfaiawRbszzb84_sAXg/s128/template_tamu.gif" width="34" height="125" /></a>
</div>
</ul>

<div id="house">

<!-- Start Shoutmix -->

<center>

<div id="shoutmix" class="window">

Masukan kode buku tamu disini


<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 -->