Home » » Cara Membuat Buku Tamu Yang Keren

Cara Membuat Buku Tamu Yang Keren

Hello Pengunjung Oktri Blog, Pada Postingan sebelumnya Cara Membuat Buku Tamu Model Sliding,
Pada Postingan ini yaitu membuat buku tamu bisa dikatakan keren karena sebelumnya ada yang menanyakan tutorial ini,langsung saja

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://lh6.googleusercontent.com/-_190VJHD3go/TfOrCjZUmrI/AAAAAAAABVY/l1enkmwhkcU/template_buku.gif) 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://lh6.googleusercontent.com/-BFHu4S_mGbM/TfOrB6u3UNI/AAAAAAAABVU/UQpGvPiIn7g/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 -->



simpan dan anda lihat hasilnya.





Artikel Terkait:

9 komentar:

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri