Saturday, June 11, 2011

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 ^_^ ♥

6 bijik anggur:

caliph shuriken said...

klau wt cmni ada efek kt loading page x?...

latest en3: doodle pun x sekiut ni

Juliet_iRa~" said...

thx wanieeee!nt ira try..
bab nak edit gambo tu yg mls tu..
haihs..haha

Wanie said...

caliph~mcm besa je..klu tenet lembap mmg efek la...keke

ira~klu xnak edit gmbr, curik kt google je..hahaha

Unknown said...

huhu..apik tak penah buat lagi

Anonymous said...

wahh..pandainya ko ltk pic tu..tapi aku laki..x cool klu ltk cmtu..haha

Alif Haris said...

ouhoho .. cmtu rupanya :)
penah niat nk letak tp asek ade je yg menghalang :D