Entri kali ini HP nak sampaikan ape yang HP dah try..mungkin ada yang dah tahu..mungkin ada yang belum..tutorial dan guide camane nak sembunyikan chatbox neyh dah banyak dipasaran..just cari je..so..just rajin dengan tak aje..First time dulu...HP just guna chatbox/shoutmix biasa..statik la kire..tak sembunyi-sembunyi..tapi bile dah tengok yang jenis hide-hide neyh..rase "cool" lak..cari punya cari..belek page source code dari awal sampai akhir..google takluar-keluar..dengan bantuaan kawan HP neh..jumpa jugak akhirnya..tapi sayang..dalam bahasa indonesia..rujuk sini..setakat ni..HP tajumpa lagi tutorial neyh dalam Bahasa Melayu..ada..memang ada..cuma yang ada..semua untuk source code sebelah kanan...kiri tak ade...so ade yang tanye camne nak buat kasi blah kiri..HP sekadar nak berkongsi..jom try kita mula...HP sediakan code untuk dua-dua side..pilih aje..

         First, korang kene la ade source code chatbox masing-masing..kalau yang tak ade..boleh la gi sini..Shoutmix dan Chatbox..dah dftr..korang adjust lah mane patut..kalau nak lawakan chat box tuh..korang leh ikut tutorial kat sini Mohdisa..ubah background mengikut minat korang..

         Second, bile korang da dpt source code chat box tuh...bawah ni contoh code chatbox HP..Hp guna shoutmix..so tak same ngn korang yang guna chatbox...simpan dulu dalam notepad..jangan dibuang code asal chatbox anda..dan sebolehnya..sila backup dahulu template asal blog anda...

<!-- Begin ShoutMix - http://www.shoutmix.com --><br /> <iframe scrolling="auto" width="166" frameborder="0" src="http://www4.shoutmix.com/?hyperplasma" height="400" title="hyperplasma"><br /> <a href="http://www4.shoutmix.com/?hyperplasma">View shoutbox</a><br /> </iframe><br /> <!-- End ShoutMix --></a>

          Macam yang HP bagitahu..code neyh ada dua..satu sebelah kanan..satu sebelah kiri...korang pilih nak yang mane ye..

    SIDE KIRI

<!-- left hidden chatbox by http://circuitbreaker90.blogspot.com START --><br /> <style> #hcl { position:fixed; top:100px; left:0px; z-index:+1000; } * html #hcl {position:relative;} .hcltab { height:100px; width:30px; float:left; cursor:pointer; background:url('http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S2Evq5hIpUI/AAAAAAAABAM/3qo6ScKImhw/s400/cbred-LEFT.png') no-repeat; } .hclcontent { float:left; border:2px solid #790909; background:#f3f6f7; padding:10px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none} </style><br /> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script><br /> <div id="hcl"><div class="hclcontent"><br /> <!-- CODE SHOUTMIX/CHATBOX/WIDGET ANDA DISINI --><br /> <br /> <br /><br /> <div class="hc-credit"><span style="float:left"><br /> <!-- DONT DELETE --><br /> <a href="http://circuitbreaker90.blogspot.com" target="_blank"><br /> Get this widget!<br /> </a><br /> </span><br /> <span style="float:right"><br /> <a href="javascript:showHidehcl()"><br /> [close]<br /> </a><br /> </span><br /> </div></div><div class="hcltab" onclick="showHidehcl()"></div><br /> </div><script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script><br /> <!-- left hidden chatbox by http://circuitbreaker90.blogspot.com END -->

SIDE KANAN

<!-- right hidden chatbox by http://circuitbreaker90.blogspot.com START --><br /> <style> #hcr { position:fixed; top:100px; z-index:+1000; } * html #hcr {position:relative;} .hcrtab { height:100px; width:30px; float:left; cursor:pointer; background:url('http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S2EvgsgQ7nI/AAAAAAAAA_k/gq8QRLZcHFs/s400/cbblue.png') no-repeat; } .hcrcontent { float:left; border:2px solid #003e82; background:#f3f6f7; padding:10px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none} </style><br /> <script type="text/javascript"> function showHidehcr(){ var hcr = document.getElementById("hcr"); var w = hcr.offsetWidth; hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0); hcr.opened = !hcr.opened; } function movehcr(x0, xf){ var hcr = document.getElementById("hcr"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcr.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);} } </script><br /> <div id="hcr"><div class="hcrtab" onclick="showHidehcr()"></div><div class="hcrcontent"><br /> <!-- CODE SHOUTMIX/CHATBOX/WIDGET ANDA DISINI --><br /> <br /> <br /><br /> <div class="hc-credit"><span style="float:left"><br /> <!-- DONT DELETE --><br /> <a href="http://circuitbreaker90.blogspot.com" target="_blank"><br /> Get this widget!<br /> </a><br /> </span><br /> <span style="float:right"><br /> <a href="javascript:showHidehcr()"><br /> [close]<br /> </a><br /> </span><br /> </div></div></div><script type="text/javascript"> var hcr = document.getElementById("hcr"); hcr.style.right = (30-hcr.offsetWidth).toString() + "px"; </script><br /> <!-- right hidden chatbox by http://circuitbreaker90.blogspot.com END -->



 Penerangan code-code yang korang boleh ubah..boleh digunakan untuk kedua-dua side..

1. Code ini [top:100px;] maksudnya jarak dari atas browser..ubahlah untuk kesesuaian blog korang..

2. Untuk ubah saiz lebar dan tinggi tab..korang leh ubah sini [height:100px; width:30px;]
3. Untuk mengantikan code gambar tab sedia ada..sila ubah code yang ini...
[ background:url(' http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S2Evq5hIpUI/AAAAAAAABAM/3qo6ScKImhw/s400/cbred-LEFT.png ')]
4  Antara  tab yang boleh anda guna..sila rujuk sini dan sini atau anda boleh membuat sendiri dan upload kemana-mana hosting gambar yang ada..
5. Jikalau korang tidak mahu mengubah tab asal..seperti di blog HP neh.. korang boleh menukar colour tab tersebut..Gantikan code [ solid #003e82; ] dengan code-code warna dibawah:
     - merah  #790909
     - kuning #aca500
     - hijau #008232
     - biru terang #003e82
     - biru muda #0079a0

        Apabila dah siap korang edit..copy code yang telah siap diedit ke blog anda...[Layout-> Page Element-> Add a Gadjet-> HTML/JavaScript ] dan paste code yang telah siap..Preview hasil yang anda lakukan..dan jika tiada sebarang error, anda bolehlah savekan chatbox baru anda...

         Senang bukan?..Code yang HP letak.boleh digunakan untuk sebarang widget yang korang rasa nak hide kan dari pandangan..just letak code di ruang yang HP telah tunjukkan... Selamat Mencuba..

 

Tweet