Cara Membuat Hidden ShoutBox

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


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('http://i642.photobucket.com/albums/uu147/remoxp/Chatbox.png') 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

4. Simpan dan Selesai

Semoga Berhasil dan Bermanfaat :D

Artikel Terkait: