Cara Membuat ShoutBox Tersembunyi di Blog

2/02/2011
Melanjutkan postingan sebelumnya mengenai "Beberapa Situs Penyedia Layanan ShoutBox Gratis", ada satu cara unik untuk meletakkan ShoutBox pada blog yaitu membuat ShoutBox tersebut tersembunyi disamping kanan layar monitor, yang mana apabila di klik, ShoutBox tersebut akan muncul dan apabila di klik lagi, maka ShoutBox tersebut akan kembali lagi ke asalnya yaitu tersembunyi di kanan layar monitor.

Nah, bagaimana cara membuatnya ?

Sebelumnya kamu harus punya dulu sebuah ShoutBox, kalau belum punya daftar dulu di situs penyedia layanan ShoutBox (baca: postingan saya sebelumnya).

Langkah memasangnya di Blogger.

Masuk kebagian "Rancangan" -> "Elemen Laman" -> klik "Tambah Gadget" terserah yang mana saja -> cari dan pilih yang bernama "HTML/JavaScriptTambah"


Copy Paste kode html dibawah ini ke dalam kotak form html tersebut, selanjutnya masukkan kode html ShoutBox kamu ke dalam kode html tadi, ganti kode yang berwarna biru tersebut dengan kode ShoutBox kamu, tidak perlu diberi judul.

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i846.photobucket.com/albums/ab26/arifins/bukutamu.gif') 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">

<!-- Silahkan Sobat Ganti Ini dengan kode buku tamu sobat -->
<div style="text-align:right">
<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>
</div>


Terus klik "Save" atau "Simpan"
Sekarang coba lihat blog kamu.

Ket: Kode yang berwarna merah adalah alamat url gambar (lihat gambar dibawah) bisa diganti dengan gambar lain, dengan cara diganti alamat url tersebut dengan alamat url gambar yang kamu punya.



Sedangkan yang biru, adalah kode HTML yang harus kamu ganti dengan kode HTML ShoutBox kamu.

Semoga Berhasil, Salam Blogger.

Seorang yang kebetulan berprofesi sebagai Teknisi Komputer di salah satu toko Komputer di Palangkaraya. Saya orangnya pelupa, oleh karena itu blog ini ada. hehee... XD.

Artikel Terkait

Previous
Next Post »

11 komentar

Write komentar
17/3/11 delete

mantap...thanks
aku dah coba

Reply
avatar
4/4/11 delete

dah kucoba...berhasil gan.... kunjungi balik ya website kami... www.titodesign.co.cc

Reply
avatar
23/4/11 delete

x jdu lh.......

Reply
avatar
Rocketklik
AUTHOR
26/4/11 delete

thanks atas infonya,,,,

blog saya:
www.rocketklik.co.cc

Reply
avatar
Forex Updates
AUTHOR
28/7/11 delete

hello..success for this blog !

Reply
avatar
28/7/11 delete

Good Luck Partner

http://chrisrusli.com

Reply
avatar
geusan wira
AUTHOR
26/10/11 delete

Tahnkies mas

Reply
avatar
geusan wira
AUTHOR
26/10/11 delete

kunjungi ya dan folllow www.geusanwira.blogspot.com

Reply
avatar
Yudha
AUTHOR
23/12/11 delete

sukses...

thanks gan infonya...

Reply
avatar
arnida herbal
AUTHOR
13/3/13 delete

akan coba saya terapkan, terimakasih

Reply
avatar
Syaifuddin
AUTHOR
23/3/13 delete

Ya sama-sama

Reply
avatar