membuat buku tamu dengan efek gelap + melayang

untuk posting yang ini aku belajar dari webnya TTB. kita bisa liat contohnya langsung di blogku di kanan atas. iya toh? mantep toh? mau? ayo kita belajar.
eit ntar dulu buat kamu yang belom tau caranya bikin buku tamu, aku jelasin deh, buat yang udah tau langsung scroll kebawah aja ok?

1. buka shoutmix disni
2.daftar, isi data, lalu konfirmasi dulu lewat email
3. selain untuk buku tamu, buat chattingan juga bisa,
4. ok, kamu bisa edit desain buku tamu terserah kamu kalo udah, pilih yang get code, dan pilih kode HTML (bingung yah?) masa bingung sih?
5. kamu copy codenya simpen deh di notepad selesai.
nah kalo kamu juga pengen buat chat/buku tamu yang biasa ya tinggal pastekan di sidebar atau dimana aja. tapi kalo mau buat buku tamu yoook lanjuuut

sekarang kita buat cara supaya dengan efek gelap yaa,
di dasbor kamu klik rancangan, lalu tambah gadget dan kopikan kode berikut

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

<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 #azisshoutbox {

background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent;

width:272px;

height:460px;

padding:56px 0 20px 5px;

}
#tutupan {

padding:2px 0 0 0;

}

</style>


<ul><center> <a href="#azisshoutbox" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>

<div id="wadah">

<!-- Start Shoutbox -->

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

SIMPAN SCRIPT SHOUTBOX KALIAN DISINI

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

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

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

<!-- End of Shoutbox light effect by azis -->
</div>



kamu simpan script shoutbox kamu di "simpan script shoutbox kalian disini" dan kalo kamu mau berkreasi lagi silahkan edit sesuka kamu


nah kalo kamu mau buku tamu kamu melayang dan dengan model seperti punyaku kita lanjuttt

http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png

http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png

http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png

http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png

Tampilan button shoutbox diatas letaknya didalam sidebar, Nah bottom shoutboxnya bisa kita pasang di samping secara melayag.
Supaya gambar berada melayang disamping silahkan kalian ganti kode ini:

<ul><center> <a href="#azisshoutbox" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>

Ganti kode tersebut dengan kode ini:

<ul><div style='display:scroll; position:fixed; top:5px; right:3px;'>
<a href="#azisshoutbox" name="modal"><img src="http://lh3.ggpht.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/NiceGB.png" width="158" height="58" /></a>
</div>
</ul>

mengerti ga? kalo ga ngerti hubungi aku aja


Sumber:TTB


terimakasih TTB