Cara Membuat dan Memasang Shoutbox
(langsung KLIK untuk membuka panduan
tersebut!). Supaya shotbox yang sudah sampeyan pasang tidak terlalu
meemenuhi halaman blog dan terutama biar terlihat lebih genit, maka akan
kita lengkapi menjadi sebuah hidden shoubox yang nongkrongnya di blog
sampeyan bagian sebelah kiri atau sebelah kanan. Untuk membangun
"Hidden shoutbox" ini, dibutuhkan sebuah javascript dan kode html yang
terdiri dari kode css dan xhtml. Melalui bantuan kode tambahan inilah,
maka shotbox bisa ngumpet seperti burung beo sampeyan yang pinter ngomong "mboke ..., nambah maning, mboke ..." he ... he ... iya, khan, to?! he .... Dengan perubahan sedikit kode, Hidden shoutbox ini juga tidak hanya dengan cara di "KLIK", baru bisa nongol, kandang burung beo pinter ini
bisa juga nongol hanya gara-gara sebuah elusan dan sentuhan yang di
berikan pada pintu sangkarnya. Ndak percaya? Coba saja, pasti sampeyan
baru percaya! Emang burung Perkutut saja yang bisa merespon elusan tangan? He ....
Pada
prinsipnya shoutbox ini akan kita sembunyikan dari halaman blog
sampeyan, sehingga yang terlihat hanya sebuah teks dengan bentuk tulisan
"Buku tamu". Teks yang berupa gambar (tinggi 145px dan lebar 30px - seperti gambar di samping) ini akan menjadi kunci untuk membuka dan mengumpetkan (menyembunyikan, he ... he ...) si shoutbox supaya kembali ke ... kandangnya lagi. Untuk memfungsikan Hidden Shoutbox kita berikan 2 (dua) pilihan. Yang pertama model KLIK dan yang kedua model sentuhan.
Cara Membuat Hidden Shouthbox :
- Buka Kode HTML shoutbox : Buka kembali kode html shoutbox sampeyan yang sudah disimpan di penambahan widget. Caranya seperti biasa : Login trus lanjutkan KLIK "Tata Letak (Layout)". Setelah masuk di Page Element (Elemen Laman), cari dimana sampeyan menyimpan kodenya. Setelah ketemu KLIK "Edit". Lihat dengan teliti apakah benar yang terlihat di depan mata sampeyan yang sudah "riyep-riyep" ngantuk itu benar-benar kode html shoutboxnya. Bila nggak keliru, silahkan teruskan lanjutannya.
- Copy Kode CSS, javascript dan html : Copy seluruh kode html dan javascript yang ada di bawah kemudian tambahkan pada kode html shoutbox.
- Save/Simpan : Setelah kode html dan javascript yang baru dipadukan dengan kode html shoutbox, KLIK "SAVE/Simpan".
- Buka Blog : Lihat hasilnya dengan membuka blog.
Kode CSS, Javascript dan xHTML Hidden Shoutbox :
<style type="text/css"> #CilukBa_bgsGR{position:fixed;top:50px;z-index:+1000;} * html #CilukBa_bgsGR{position:relative;} .CilukBa_bgsGRknop{height:145px;width:33px;float:left;cursor:pointer; background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/button/TeksAnimaBukuTamu2.gif) no-repeat;} .CilukBa_bgsGR_SB{float:left;border:2px solid #022f81;background:#75a3f8;padding:3px;} </style> <script type="text/javascript"> /* gubhug reyot * bloggerstars1 - bgs1GR */ function Ciluk_ba_bgsGR(){ var CilukBa_bgsGR = document.getElementById("CilukBa_bgsGR");var w = CilukBa_bgsGR.offsetWidth; CilukBa_bgsGR.opened ? moveCilukBa_bgsGR(0, 30-w) : moveCilukBa_bgsGR(20-w, 0); CilukBa_bgsGR.opened = !CilukBa_bgsGR.opened;} function moveCilukBa_bgsGR(x0, xf){ var CilukBa_bgsGR = document.getElementById("CilukBa_bgsGR");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir; CilukBa_bgsGR.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveCilukBa_bgsGR("+x+", "+xf+")", 10);}} </script> <div id="CilukBa_bgsGR"> <div class="CilukBa_bgsGRknop" onmouseover="Ciluk_ba_bgsGR()"> </div> <div class="CilukBa_bgsGR_SB"> <!-- Disini Posisi KODE HTML Shoutbox === Begin ShoutMix - http://www.shoutmix.com --> <iframe title="bgs1GR" src="http://www6.shoutmix.com/?bgs1GR" width="160" height="500" frameborder="0" scrolling="auto"> <a href="http://www6.shoutmix.com/?bgs1GR">View sMix</a> </iframe> <br /><a href="http://www.shoutmix.com" title="Get your own free aMix chat widget at ShoutMix!">ShoutMix chat widget</a><br /> <!--di sini akhir KODE HTML Shoutbox ==== End ShoutMix --> </div></div> <script type="text/javascript"> var CilukBa_bgsGR = document.getElementById("CilukBa_bgsGR"); CilukBa_bgsGR.style.right = (33-CilukBa_bgsGR.offsetWidth).toString() + "px"; </script>
Demikian tutorial buat hidden shoutbox
Sumber:klik disini
