Senin, 01 Agustus 2011

Membuat Shoutmix hide/show

Cara Membuat Shoutmix Atau Shoutbox Hide/show itu mudah, Tinggal Ikuti aja Langkah-Langkahnya.Tapi Jangan Lupa Follow Dulu ..hhe
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 ANDA 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>

Note:

  • 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

Kalau Menurut Anda Bermanfaat, Mohon Klik THANK Dibawah  :


                                  THANK

0 komentar:

Posting Komentar

Terima Kasih Telah Berkunjung Ke CyberCentral.
Silahkan Tinggalkan Komentar Anda Di Kotak Yang Tersedia.
Usahakan Jangan Memakai Anonim.
Terima Kasih.


[Admin CyberCentral]