Terima kasih sobat, Karena soabat request ingin widget shoutbox seperti punya saya, maka kali ini saya akan menerangkan cara membuat hidden shoutmix atau shoutbox versi 1, kenapa versi 1?? karena masih ada shoutmix yang lebih canggih, kalu tidak salah nama lainnya hidden shoutghost sebab jika di klik maka akan muncul perlahan-lahan, namun kali ini saya akan menerangkan mengenai hidden shoutmix versi 1, langsung saja.

Terima kasih sobat, Karena soabat request ingin widget shoutbox seperti punya saya, maka kali ini saya akan menerangkan cara membuat hidden shoutmix atau shoutbox versi 1, kenapa versi 1?? karena masih ada shoutmix yang lebih canggih, kalu tidak salah nama lainnya hidden shoutghost sebab jika di klik maka akan muncul perlahan-lahan, namun kali ini saya akan menerangkan mengenai hidden shoutmix versi 1, langsung saja.

CONTOH

Proses Pembuatan Account

1. Buka web untuk membuat Buku Tamu di http://www.cbox.ws

2. Klik Get your own free Cbox now!

3. Isi Form pendaftaran dengan lengkap mulai dari Cbox Name, Email address, Password, alamat website, dan bahasa

4. Masih di form pendaftaran anda bisa menentukan gaya Buka Tamu anda dengan memilih Style

5. Jika sudah selesai diisi semua dengan lengkap klik tombol Create My Cbox dan sukses anda telah membuat Buku Tamu.

Login dan Setting Buku Tamu

1. Login ke member area cbox anda

2. Klik Look & Feel > Layout Options untuk Mengatur lebar ( Width ) dan Tinggi ( height ) Buku Tamu. Sesuaikan dengan ukuran side bar blog anda. Anda juga bisa mengatur apakah pesan terbaru akan ditampilkan paling atas atau di bawah dengan memilih In Order

3. Klik Look & Feel > Colours & Fonts. Anda bisa menentukan warna, bentuk huruf dan lain-lain. Silahkan setting sesuai dengan selera anda.  Jangan lupa klik Save

4. Jika sudah selesai semua setting anda, jangan lupa klik tombol Apply

Cara mengambil kode HTML buku tamu dan memasukkan ke side bar blog

1. Masih di member area Cbox klik Publish! Lalu klik tombol Copy to clipboard

2. Login ke blogger.com dan klik Rancangan/Design

3. Klik Tambah gadget

4. Di window yang muncul klik HTML/Java Script

5. Paste kode Buku Tamu yang telah dicopy tadi ke kolom yang tersedia seperti di bawah ini

LALU Kombinasikan cara di atas dengan cara di bawah ini.

1. Login ke Blogger seperti biasanya
2. Klik Tata Letak dan Pilih Tambah Gadget
3. Pilih html/javascript dan Copy Paste kode di bawah ini

<style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:550px; width:35px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY1eS6JZ1qIdPAXq_7Obs9UMFnpZTtWrOZcBCfAw4hOfHuJ7T2Xq1L9KvimrsUfTmJKlTcMWv5UxzZoiDBmIn_5t3BV1BAig19CIx9OLNVg5XivBqn5UenSkUpEhkSjHFBifuVHigN-qPX/w40-h125-no/') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #ffffff;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:5px;-moz-border-radius-topleft:10px;-moz-border-radius-topright:5px; -webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:5px;background:#000000; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent">

-----TARUH KODE SHOUTMIX ATAU SHOUTBOX SOBAT DISINI-----

<div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

CATATAN :

• Untuk mengganti posisi shoutbox menjadi di sebelah kiri ganti left menjadi right
• Untuk kode yang berwarna merah berfungsi sebagai warna border
• Untuk kode yang berwarna hijau berfungsi sebagai background shoutbox
• Untuk kode yang berwarna kuning berfungsi untuk mengatur ketinggian widget
• Sedangkan yang berwarna biru berfungsi sebagai url gambar sobat bisa menggantinya sesuai keinginan