Cara Membuat Buku Tamu Melayang di Blog

Cara Membuat Buku Tamu Melayang di Blog

Assalamualaiku Wr. Wb.

Hai Sobat Blogger. Huaaammmm, Pagi-pagi biar melek mending share ilmu saja sambil nunggu terang,, hehehe Ilmu ini saya dapatkan dari kk Deejyan yaitu tentang Cara Membuat Buku Tamu Melayang di Blog

Langsung aja Deh,

DEMO

(klik Buku Tamu di Sebelah kanan jika ingin demonya)

1. Login Ke Blogger kalian
2. Pilih Rancangan ---> ELEMEN halaman
3. Tambah Gadget ---> Pilih HTML/Java Script
4. Simpan kode berikut dalam konten HTML/Java Scriptnya

<!-- Start Shoutbox light effect by Han -->
<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 #kid53 {
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="#kid53" 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="kid53" class="window">

SIMPAN SCRIPT Cbox 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 Han-->
</div>

5. Jangan lupa disimpan

Catatan
Untuk ukuran shoutbox/shoutmix/cbox kalian bisa kalian sesuaikan dengan background gambar.
Untuk Shoutmix ukurannya Height: 380px dan Width: 261px
Untuk Cbox ukurannya height:300px width:250px , untuk width yang bawah samakan dengan width pertama, karena di cbox ada 2 width
untuk ukuran tidak harus terpaku pada punya saya diatas, kalian boleh menyesuaikannya sendiri.

Supaya gambar berada melayang disamping silahkan kalian ganti kode ini:

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

dengan kode ini :

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

Ni contoh2 Backgrounya gan.

(diatas dengan code ini: http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png)

(diatas dengan code ini: http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png)




Ni untuk Tombol-Tombolnya

(diatas dengan code ini: http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png)

(diatas dengan code ini: http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png)

Anda sedang membaca artikel tentang Cara Membuat Buku Tamu Melayang di Blog dan anda bisa menemukan artikel Cara Membuat Buku Tamu Melayang di Blog ini dengan url http://bmcyber.blogspot.com/2012/04/cara-membuat-buku-tamu-melayang-di-blog.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Buku Tamu Melayang di Blog ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Membuat Buku Tamu Melayang di Blog sebagai sumbernya.