setting

PR0$aCKSBLoG$: Floating Shoutmix di Blogger

Floating Shoutmix di Blogger

Setelah sekian lama sibuk fokus mempelajari bidang website designing. Kali in baru sempat post update ke blog. Ini pun sekadar test2 selepas masukkan design blog yang baru. Selamat Datang Ke PRo$acKsBLoGs  season 2. Kalau ada sebarang cadangan untuk menambah baik blog ini boleh lah hantarkan cadangan anda di sini. Cadangan korang amatlah di hargai.

Untuk post kali ini, kita akan kongsikan lagi info tentang macam mana nak masukkan floating shoutbox seperti mana yang aku pakai di blog aku ini. Sekarang ni aku telah pakai 2 widget yang floating yaitu Yahoo! Chat dengan ShoutMix. Untuk Bagaimana cara korang nak pakai Yahoo! Chat nie, mungkin kita akan ceritakan lain kali bila dah ada masa. Maaf kepada kawan-kawan kerana tak dapat lagi nak tunaikan permintaan korang. Buat masa ini banyak lagi part yang perlu siapkan sebelum bermula semester baru ini. 

Ok, kita proceed ke macam mana nak buat floating ShoutMix. Antara cara-caranya adalah:-

1. Login blogger>>Dashboard>>Page element>>Add gadget>>HTML/Java
2. Copy code bawah ni dan paste dalam box HTML/Java.


<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:50px;
float:left;
cursor:pointer;
background:url('URL shoutbox icon') no-repeat;}
.gbcontent{
float:left;
border:2px solid #666666;
padding:1px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 50-w) : moveGB(10-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">
<center>
<div id="custombg" style="width:260px; height:380px; background:url(URL background Shoutbox) repeat; padding-top:0px; padding-left:0px; position:relative" align="center">

SHOUTBOX CODE


<div style="text-align:left">
created by <a href="http://prosacksblog.blogspot.com">Pro$acks</a>
</div>

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

4. Edit code dengan kreativiti dan keinginan korang sendiri.[letak URL shoutbox icon/URL background(warna biru), Shoutbox code(warna hijau) korang dan adjust size(warna biru)]


5.Selepas itu, save. Siap!!!

Kalau ada sebarang masalah. Korang boleh r tinggalkan pesanan di komen atau terus hantar email di sini.

Good Luck......^_^

Tiada ulasan :

Catat Ulasan

Copyright © PR0$aCKSBLoG$ MiNH Solution