Cara Membuat dan Memasang Hidden Shoubox - Shoutbox Nongol Hilang

Panduan BloGGeR dan Tutorial BloGGeR kali ini merupakan kelanjutan Panduan BloGGeR sebelumnya tentang

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 :

1. 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.
2. Copy Kode CSS, javascript dan html : Copy seluruh kode html dan javascript yang ada di bawah kemudian tambahkan pada kode html shoutbox.
3. Save/Simpan : Setelah kode html dan javascript yang baru dipadukan dengan kode html shoutbox, KLIK "SAVE/Simpan".
4. 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>

1. Model Sentuhan : Kode di atas digunakan sebagai model sentuhan. Ketika cursor disentuhkan ke gambar yang bertuliskan buku tamu, maka seluruh shoutbox akan nongol keluar.
2. Model KLIK : Apabila sampeyan pingin yang model KLIK, silahkan kode yang bercetak tebal bertuliskan "onmouseover" (javascriptnya), diganti dengan "onclick", sehingga bentuknya menjadi :
   <div class="CilukBa_bgsGRknop" onclick="Ciluk_ba_bgsGR()
   Dengan perubahan ini maka si shoutbox akan nongol ketika "Buku tamu" di KLIK.
3. Peletakan KOde Shotbox : Kode shoutbox milik sampeyan diletakkan persis di bawah kode :
   <div class="CilukBa_bgsGR_SB">
   dan di atas kode :
   </div></div>.
4. Hidden Shoutbox ini telah dicoba dan berhasil digunakan tanpa kendala apapun!
.

Selesai sudah dan semoga langsung bisa dinikmati hasilnya.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «