PANDA.BIRU: Tutorial : Letak Chatbox / Shoutmix di Sidebar.

Thursday, August 16, 2012

Tutorial : Letak Chatbox / Shoutmix di Sidebar.

Lamanya tak buat tutorial. Tak tahulah kenapa cuti pendek je tangan rasa macam nak tarik dari tulis tutorial. Kalau cuti panjang, Wah ! Tangan terkejar - kejar nak tulis. Apa - apa jelah. Baiklah, sekarang Ana ada PINTU RAHSIA di sidebar. Nak buat? 

! LOOK THIS !

1. Design > Add a gadget > HTMl Javascript.

2. Copy kod misteri di bawah ini ya.


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://4.bp.blogspot.com/_W4tMouIT4K0/S4yf8bT0w9I/AAAAAAAABIw/nBBHKlHyR0I/s1600/pink%20cair.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">   </div>
<div class="gbcontent">

Masukkan kod chatbox / shoutmix di sini.

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Penambahan :

Tukar warna tab ( warna merah ) 

                           

Image di atas di creadit oleh :  Si penghiasan

Click gambar yang anda mahu > Tekan kanan di tetikus anda > Copy image url

                                                                                       
                                                                                   Tukar ketinggian
Cari perkataan top, dan tukar kepada ketinggian yang korang nak. Contoh 10px, 20px,30 px…
Tukar saiz
Tinggi : tukar nilai dekat height. Contoh 10px, 20px,30 px… Lebar : tukar nilai dekat width. Contoh 10px, 20px,30 px…
HIJAU 
Letak kod chatbox /shoutmix anda. Kalau tak macam mana orang nak berkata - kata.
P/s : Kalau nak tukar warna lain guna photoshop pun boleh.
SELAMAT TINGGAL. SELAMAT HARI RAYA AIDILFITRI. JANGAN MAIN MERCUN. ANA MEMINTA MAAF KAT ANDA YA KALAU ADA KESALAHAN KE. OKEY, MAAF ZAHIR & BATIN. KEBOOM !!!!!


No comments: