Rabu, Disember 12

Membuat Slide Float Untuk Shout Box / Cbox






1. Seperti biasa, Sign in blogger > Design > Page Elements > Add a Gadget > HTML/javascript
2. COPY code di bawah dan masukkan ke dalam HTML/javascript tadi..


<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://i1089.photobucket.com/albums/i348/mh120/sHOUTBOXwwwkolombloggratisblogspotcom.png') no-repeat;
}
.gbcontent{
float:left;
border:3px solid #000000;
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 kode Shoutmix/Cbox di sini] 
                 </div>
         </div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

3. Selepas itu sila ubahsuai benda-benda berikut sebelum SAVE.

50px : Semakin tinggi nombor samakin rendah/bawah chatbox anda.
Font yang warna orange : adalah URL image, boleh tukar dengan URL sendiri. 
100px, 30px : adalah ketinggi dan kelebaran, tukar ikut citarasa..
Replacekan [Masukkan kode Shoutmix/Cbox di sini]  dengan code chatbox/shoutbox.
#F5F5F5 adalah warna background..
#000000 adalah warna border..
Lepas itu Save dan tengok hasilnya..




http://1.bp.blogspot.com/-rSp4ahf8U0U/Tlbwde0w26I/AAAAAAAABt0/jie9RhAayuk/s1600/farahblack.png


http://1.bp.blogspot.com/-6jLw0xPd8gI/Tlbwh_KIoFI/AAAAAAAABuc/QxTjhv2ei9w/s1600/farahwhite.png


http://1.bp.blogspot.com/-vY3tcPtmLk8/Tlbwd7hYd0I/AAAAAAAABt4/34_1BKkIyzY/s1600/farahbluelight.png


http://4.bp.blogspot.com/-fKFzsKTR9R4/TlbwfNbvAJI/AAAAAAAABuE/ZX20NsNaPRU/s1600/farahmix.png


http://3.bp.blogspot.com/-l7MRvmjnVwI/TlbwgOykCrI/AAAAAAAABuQ/uRCDB5FXvIk/s1600/farahred.png


http://1.bp.blogspot.com/-RouydudtoTs/Tlbwg8wwaRI/AAAAAAAABuU/uJb1rj_DQrk/s1600/farahsoftpink.png


 http://3.bp.blogspot.com/-IervuVeMojw/TlbwePL1yiI/AAAAAAAABt8/gj6_NGSq-r4/s1600/farahhotred.png


http://3.bp.blogspot.com/-liNiGO08LtY/Tlbwem_1BPI/AAAAAAAABuA/Ux1oJ9fDQQo/s1600/farahlemon.png


http://2.bp.blogspot.com/-KD_mK68ZmmQ/TlbwfbpXLnI/AAAAAAAABuI/X9QrOvy_gQM/s1600/farahorange.png


http://3.bp.blogspot.com/-lU-GkG0oIpo/TlbwhoRkupI/AAAAAAAABuY/bbQZKyjRzUA/s1600/farahsoftpurple.png


credit to farah

Tiada ulasan:

Alyazaira-Mentarisenja © All Rights Reserved
Best View With Mozilla Firefox