Buat Kotak Pesan Tersembunyi (Shoutmix)

mau buat kotak pesan .... ??? aku punya triknya nie..... ikuti aja cara pembuatannya jika berminat...... kotak ini berfungsi untuk mengirim pesan-pesan pendek, bisa juga digunakan sebagai tempat chatting.... cara pembuatanya gampak koq.... ga perlu repot-repot buat programnya.... tinggal copy paste aja...... tapi bagi kamu yang hebat HTML mungkin bisa membuatnya sendiri.... caranya sebagai berikut :

1. Buka shoutmix.com daftar dulu di situs tersebut

2. Klik tombol Continue

3. Klik Go to My Control Panel Now

4. Setting terlebih dahulu shoutbox kamu, misalnya Style & Color, Date & Time, dan lain-lain

5. Jika sudah selesai klik Get Codes

6. Atur lebar dan tinggi shoutbox di kolom widht dan hight

7.Ada kode yang ada di dalam kotak "generated Codes" buka satu jendela baru lagi

8. Masuk ke blog kamu lalu pilih Layout kemudian Add Page Elements

9. Tambahkan element HTML/Javascript

10. Copy -Paste code di bawah ini

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIni9tLdePdd-gpR0R-4pj__trUTlhe0SavbXfqA_8n1GhZ5_NeF3fNRpmI8vGAxv-JhgUSLg_S5GJ3fMBZxH9YWHAHNYKh_nQU3odoQl2SJ0DrOnFe0roJcGwNFFkTkb3r4z_JiObgMSd/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu kamu -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://infotentangblog.blogspot.com/2009/07/membuat-buku-tamu-tersembunyi.html">
sini (Info Blog)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

11. kembali ke langkah 7 copy yang ada di dalam kotak "generated Codes"

12. cari kode <!-- Ganti ini dengan kode buku tamu kamu --> hapus kode tersebut kemudian paste code yg ada pada kotak "generated Code" lalu simpan

13. Jadi deh

Selamat Mencoba.........