Membuat Buku Tamu Tersembunyi Dengan POP UP Light Effect

Tips ini adalah kelanjutan dari tips sebelumnya tentang Buku Tamu
Kali ini saya akan mencoba memberikan tips yang mungkin cukup menarik buat sahabat blogger semua yaitu membuat buku tamu dengan Popup seperti yang ada di blog saya ini

Buat sahabat blogger yang sudah memiliki buku tamu tersembunyi standart cukup menggantinya dengan kode script dibawah ini

1. Pertama Login ke blogger.com dengan ID anda
2. Pada Dasbor, pilih Rancangan
3. Kemudian Tata Letak>>>Elemen Laman
4. Kemudian Tambah Gadget>>>HTML/JavaScript
5. Letakkan kode berikut ini pada kotak Scriptnya

Spoiler:

<!-- Start Shoutbox light effect by artikel69 -->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>
$(document).ready(function() {
//select all the a tag with name equal to modal

$('a[name=modal]').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 semahHeight = $(document).height();

var semahWidth = $(window).width();



//Set heigth and width to semah to fill up the whole screen

$('#semah').css({'width':semahWidth,'height':semahHeight});



//transition effect

$('#semah').fadeIn(1000);

$('#semah').fadeTo("slow",0.8);



//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(2000);



});



//if close button is clicked

$('.window .close').click(function (e) {

//Cancel the link behavior

e.preventDefault();



$('#semah').hide();

$('.window').hide();

});



//if semah is clicked

$('#semah').click(function () {

$(this).hide();

$('.window').hide();

});



});
</script>

<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#semah {

position:absolute;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}



#wadah .window {

position:fixed;

left:0;

top:0;

width:440px;

height:200px;

display:none;

z-index:9999;

padding:20px;

}
#wadah #artikel69 {

background:url(http://i1081.photobucket.com/albums/j350/bungiwan/REDGUESTBOOK.png) no-repeat 0 0 transparent;

width:250px;

height:460px;

padding:56px 0 20px 5px;

}
#tutupan {

padding:2px 0 0 0;

}

</style>


<ul><div style='display:scroll; position:fixed; top:5px; right:3px;'>
<a href="#artikel69 " name="modal"><img src="http://i1081.photobucket.com/albums/j350/bungiwan/NiceGB.png" width="38" height="108" /></a>
</div>
</ul>

<div id="wadah">

<!-- Start Shoutbox -->

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

Taruh Script Buku Tamu Sahabat Disini

<div id="tutupan"><input type="button" value="Close" class="close" />

</div></div><!-- End Shoutbox -->

<div id="semah"></div></div>

<!-- End of Shoutbox by artikel69 -->

Penting :
Untuk dapat menggunakan Script diatas Sahabat Blogger terlebih dahulu memiliki Kode Buku Tamu Sendiri yang bisa Sahabat dapat melalui situs ini <--- atau ---> ini


Gimana Mudah Bukan?... Selamat Mencoba Sahabat

Sumber