Menambahkan Show/ hide Mode Untuk Shoutmix..kali ini saya akan membahasnya.. coba anda lihat di sisi kanan blog ini terdapat tulisan chatbox... loh? kok bisa disitu? bukannya ada tempat untuk widget-widget seperti itu? awalnya sendiri saya juga cukup bingung.. tetapi semua terjawab setelah browsing di internet.. mau lebih lanjut? klik donk artikelnya.. :D
Mungkin pertama kali melihat ini kita akan takjub dan menginginkan blog kita seperti itu, iya kan? pasti iya.. baiklah tanpa basa-basi, berikut tutorialnya.1. Buka Blogger, lalu log in
2. Tekan pada Tab Rancangan,
3. Lalu, Klik Tambah gadget.. pilih HTML/ JavaScript ( Kalau Sudah daftar sejak dulu, langsung saja step 5
4. Lalu, daftarlah Shoutmix ( kalau sudah kita langsung saja ke step 5 )
5. Buka Widget Shoutmix anda pada tab rancangan.. lalu pastekan kode ini sebelum "<!-- Begin ShoutMix -->"
<!-- Begin Show Hide Floating - http://www.hitsuke.blogspot.com -- http://www.remo-xp.com--> <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-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright: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"> <!-- Kode Shoutmix mu Disini -->
6. Setelah itu, tambahkan Script berikut sesudah "<!-- End ShoutMix -->"
<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>
7. Dan Taraaa.... ChatBox anda jadi malu-malu nih.. hehehehe...
Semoga Bermanfaat, mohon maaf jika ada kesalahan
0 komentar:
Posting Komentar