Asesoris Blog , Tutorial Blog , Widget » Cara Modifikasi ShoutBox (Buku Tamu)

Cara Modifikasi ShoutBox (Buku Tamu)

Hai... Sobat t'Net..
Hari yang sangat indah jika teman-teman masih bisa tersenyum seperti gambar ini
. Nah teman-teman tidak pengen dong cemberut terus seperti gambar ini .
heheheheh. itu adalah sebuah refresing buat kita hari ini.
Oke tidak usah panjang lebar lagi, kita langsung ke pokok bahasan yah>
artikel saya kali ini berjudul Modifikasi ShoutBox (Buku Tamu). Memang kenapa sih dengan buku tamu?. Banyak orang mengatakan penampilan yang menarik itu lebih digemari orang-orang. Nah untuk itu saya mau memberi tip untuk sobat t'Net, gimana caranya supaya blog kita lebih menarik. Lebih khususnya lagi buat Buku Tamu blog kita. Dalam modifikasi ShoutBoxnya maka semua halaman blog kita akan kelihatan gelap saat kita membuak buku tamu tersebut. Seperti contah gambar di bawah ini.

Sebelum memodifikasi ShoutBox (buku Tamu) ini sobat t'Net sudah harus mempunyai Shoutboxnya. Jika belom silahkan buat di Situs INI, silahkan anda mendaftar disana, setelah itu baru anda kembali kesini. (hahhah...da kayak mengusir nih....)

Kalau sudah mempunyai ShoutBox, ikuti langkah berikut ini:

1. Seperti biasa, anda sudah berada pada Dasbor Blog anda
2. Pilih Rancangan
3. Pada Elemen Laman, pilih Tambah Gadget
4. Kemudian pilih HTML/JavaSript
5. Letakkan kode di bawah ini di dalam kolok HTML/JavaScript tsbt.

Kodenya Ada Di Sini

<!-- 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>

6. Kemudian silahkan 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.

untuk background gambar bisa kalian ganti dengan gambar kalian sendiri, namun jika ingin gambar buatan AZIS LAMAYUDA bisa menggunakan gambar dibawah ini :

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

TAMBAHAN sedikit sajo...
Tampilan button shoutbox diatas letaknya didalam sidebar, nah botton nya itu bisa kita tempel dengan backgroundny yg tadi. Untuk menempelkannya, silahkan ikuti langkah berikut!

Silahkan  Ganti kode Berikut

<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>

Kemudian ganti dengan Kode di bawah 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>

Untuk gambarnya juga dapat anda gunakan seperti di bawah ini,


Semoga bisa membantu dan Semoga bermanfaat....