Sudahkah mengisi RUANG SAHABAT blog ini ?
Kalau belum, isilah terlebih dahulu ...
sebelum anda menggunakan tutorial ini.
Kalau belum, isilah terlebih dahulu ...
sebelum anda menggunakan tutorial ini.
banyaknya para pengunjung blog ini yang menanya-
kan tentang cara membuat ShoutMix Chat seperti
yang terpasang di blog ini. Tanpa harus mempersilah-
kan anda untuk mencobanya karena saya yakin anda
semua telah mengetahui bagaimana tampilan ShoutMix
Chat model yang satu ini, terlebih lagi bagi anda
yang sering berkomunikasi di ShoutMix Chat blog ini.
Tanpa buang waktu lagi, berikut ini cara membuatnya :
1. Siapkan kode ShoutMix Chat anda.
2. Rancangan -> Tambah Gadget ->
pilih HTML/JavaScript
4. Masukkan kode yang ada di bawah ini
ke dalam kontennya kemudian
simpan dan anda lihat hasilnya.
<!-- Start Shoutmix light effect -->
<script type="text/javascript" src="http://h1.ripway.com/syamsudin/shoutmix.js"></script>
<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(http://i1128.photobucket.com/albums/m486/syamsudin1/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:150px; right:3px;'>
<a href="#shoutmix" name="syam"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhML7eGqY7yVzO599uJK7xz6xjeM3Pzh2jOUb-vr9DyH_QruLD-yzEjhlibuQ7uKKtC26ThCyH3h3iMh9aRempL6w_0FT5gTECze1aLz3mBags4ovh8BkzWSNme0HCc2N7QXwmZD6JTXckz/" width="30" height="100" /></a>
</div>
</ul>
<div id="house">
<!-- Start Shoutmix -->
<center>
<div id="shoutmix" class="window">
KODE ShoutMix ANDA LETAKKAN DI SINI.
<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 -->
|
KETERANGAN :
Gantilah gambar buku tamu dan backgroundnya
dengan gambar yang anda inginkan.
Sesuaikan ukuran ShoutMix, buku tamu dan background
yang anda miliki tersebut.
Untuk ukuran background ShoutMix
seperti yang terdapat pada blog ini,
buatlah ukuran shoutmix anda :
width="280" height="340"
Aturlah posisi ikon buku tamu anda
pada kode position:fixed;
CATATAN :
Agar anda tidak kesulitan dalam menyesuaikan ukuran
antara background Shoutmix dan Shoutmixnya, ikuti
saja ukuran background Shoutmix dan Shoutmixnya
seperti yang ada pada contoh di atas.
Semoga anda suka, good luck!
Tidak ada komentar:
Posting Komentar
Jangan lupa tinggal kan Coment anda