Cara Membuat Buku Tamu Yang Keren

Minggu, 08 April 2012
1. Siapkan kode Buku tamu Chat anda.

2. Rancangan -> Tambah Gadget ->
pilih HTML/JavaScript



3. Masukkan kode yang ada di bawah ini
ke dalam kontennya kemudian

<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/AVvXsEjDnq6D9vS-T_HEdbkoM_RqxGw52uggje850RWzvMGj6gbA6Xsh2TsNLoqkqsSQeLlENEALbH7m37zTuQ6bv7d7hAaTUBaJnBZetezjLxP55ygeL69JK6XysKYN_t9pMAWq1PD-0M6zPe0s/) 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/AVvXsEihzfNc9ZPoeVX4lgg2bbDHjgXJbAQSQyPWQPLGSHbSVP29fYa49e3h7Gwj3Bhy_5EbyVx5WHgiOIXW9Q1yhxu-oe21PFosFlIHvYivReeH5I86SBQfipwQMNYXjb4ELeil-MRpI3Itwys/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 -->

0 komentar:

Posting Komentar

ALAN B A E
Energy Saving Mode using CSS3

Move your mouse to go back to the page!
Gerakkan mouse anda dan silahkan nikmati kembali posting kami!

Original design by: alanbae-inc.blogspot.com
 
™Alan Bae Rezpector™ © 2011 | Design Template by Rizky wardiansyah | Template Blogger Name | Template Transparent 2.0 | Template Transparent 2.0