6 Tutorial letak gambar tepi shoutbox

Dah lame nak buat tutorial ni...

tapi mase tak mengizinkan..kekeke

Tutorial ni utk bloggers yg nak letak gambar kat tepi shoutbox..

means utk shoutbox yg disorok kat tepi..

Step by Step:

1) Design --> Page Element --> Add a Gadget --> HTML/JavaScript

2) Copy kod di bawah dan paste pada content HTML/JavaScript

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

.gbtab{
height:350px;
width:350px;
float:left;
cursor:pointer;
background:url('DIRECT LINK IMAGE') 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">

KOD SHOUTBOX 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>

Yang colour hijau, merah & purple boleh di edit...

Hijau: Saiz gambar (aku gune yg maksimum)

Merah: Letak direct link bagi gambar yg korg nak gune

Purple: Letak kod shoutmix/cbox korg

3) Dah siap, terus save dan preview...

Cane nak dapatkan direct link gambar?

~ Aku gune Photo Crop Editor utk crop gambar
boleh tgk tutorial cane nak gune software tu kat SINI
~ Lepas dah crop, aku gune PowerPoint lak utk edit saiz et al
agak leceh nak pilih size, banyak kli try baru jadi...
so saranan aku utk memudahkan korg, gune saiz ni
--> 2 (height) x 3.8 (width)
kalau tak jadi pandai2 la tukar saiz k..hehehe
~ Upload gambar yg dah save dlm ImageShack
Image resize: tukar kpd 320 x 240
~ Lepas dah upload dapatkan DIRECT LINK gambar tu..

Kalau tak jelas boleh tanye..:)

Harap tutorial ni membantu ye, especially Ira ^_^

Pssstt: Cbox & Shoutmix dah tukar letak kt sidebar..:)

---

♥ Thanks for reading!~ Have a nice day ^_^ ♥

---