Cara Membuat Shoutbox Yang Bisa Tersembunyi

Pastinya anda tahu kan apa yang saya maksud di atas? yaitu seperti yang ada pada blog ini. di sebelah kanan layar tepatnya. Ok gk usah banyk cingcong langsung aja kita mulai.

1. Daftarlah dahulu Shoutbox anda di cbox lalu jika telah selesai mendaftar maka anda harus log in
2. Pilih tab Publish di cbox
3. Copy semua code yang disediakan oleh cbox
4. Paste di notepad

Setelah itu kita perlu menambahkan kode atau script yang digunakan untuk menyembunyikan shoutbox tersebut.
Inilah Codenya :

Script Shoutbox

<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('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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">

Kode Shoutbox Anda Disini

<div style="text-align:right"><a href="http://knooky.blogspot.com/2012/02/cara-membuat-shoutbox-yang-bisa.html" target="_blank"><Get this Widget></a>
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Masukkan Script shotbox anda pada bagian Kode Shoutbox Anda Disini. jangan lupa "Kode Shoutbox anda disini harus anda hapus"  dan digantikan dengan Kode Shoutbox anda!!!
Kemudian:

1. Log in ke akun blogger anda
2. Pilih tab rancangan
3. Pilih Add Gadget / Tambah Gadget
4. Pilih HTML/JavaScript
5. Pada bagian judul dapat anda kosongkan
6. Masukkan Script yang telah kita buat tadi
7. Simpan

Berikut ada beberapa pilihan warna tombol Shoutbox

 

Cara Menggunakannya adalah Dengan Cara meng-KLIK kanan pada salah satu gambar, lau pilih copy image URL/Location, Setelah itu gantikan Script

 http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png

Dengan URL gambar yang telah anda Copy tadi.
Untuk Mempermudah saya telah menyediakan URL Gambar Masing-Masing Warna tersebut di bawah ini

HIJAU

http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png

 BIRU

http://4.bp.blogspot.com/_CEj8AwvwSNM/S5PppULtvPI/AAAAAAAAEDs/NITPY9kKySs/s400/icon+untuk++shoutbox+tersembunyi.png

 MERAH

http://3.bp.blogspot.com/_CEj8AwvwSNM/S5Ppn-w6byI/AAAAAAAAEDU/zujexeXt05U/icon+untuk++shoutbox+tersembunyi+(7).png

 ORANGE

http://2.bp.blogspot.com/_CEj8AwvwSNM/S5Ppnq3G5sI/AAAAAAAAEDM/dJQD6wsYZy4/icon+untuk++shoutbox+tersembunyi+(6).png

 PINK

http://3.bp.blogspot.com/_CEj8AwvwSNM/S5Ppdo973QI/AAAAAAAAEDE/4jwrG9NWqAQ/icon+untuk++shoutbox+tersembunyi+(5).png

 Gimana Mudah bukan? jika kurang jelas, silakan tinggalkan komentar di bawah untuk bertanya kepada saya.
Artikel ini mendapatkan Referensi dari berbagai blog di dunia.