Friday, April 8, 2011

tutorial letak gambar sebelah shoutbox




okei.
tutorial yg kedua.
dtg dari req cik haida itis. *eip!akak ko pnggil aku yek. siap kaw:P
dan husnieyl.

ekceli lisa sebenarnya baru buat shoutbox yg boleh letak gmbar sendiri ni.
so,lisa cuba2 ye bg tutorial.
kalo ta phm tanya je ye:)

kalo mcm lisa buat, lisa gune software photoshop.
lisa ta berapa pro sgt ngn phtotshop ni.
hahaha. kesian kan?

mula2, klik file-->new
so,isi pilihan ikut suka hati korang.ahaha
mane de.
ikutlah korang nak besar cmne. nak kecik ke. nak besar gedabak ke.
make sure transparent yer:)




pastu open mana2 gambar korang yg nak diletakkan di tepi shoutbox tu ye. 
so, utk crop gambar tu lisa besenya gune magnetic tools.
ikut suka korang la nak gune yg mana.
da siap crop, drag kan pada page yg transparent tadi




then korang nampak ta icon T tu, sila la tekan utk taip shoutbox tu,
korang oter2 lah gune tulisan yg korang suka, saiz mcmne, nak mnegak ke, melintang ke.



then, save as web page yer. jgn save mende lain plak



oke. lisa assume korang sume terer da yer photoshop.
lisa ta pro la tentang photoshop. sikit2 boleh lah

oke. gmbar yg korang da save tadi, korang upload kat photobucket ke kat facebook ke, kat mana2 la , yg pnting korang dapat URL gambar tersebut yeerr

kemudian, korang  klik

DASHBOARD-->DESIGN--->PAGE ELEMENTS--->ADD A GADGET--->HTML/JAVASCRIPT


paste code dibawah



<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:320px;
width:100px;
float:left;
cursor:pointer;
background:url('MASUKKAN URL GAMBAR KORANG DISINI') 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, 100-w) : moveGB(120-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 CODE SHOUTBOX ANDA DISINI
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close/tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (100-gb.offsetWidth).toString() + "px";
</script>





then tekan save. hasilnye gmbar anda akan muncul secara tiba2 di sebelah shoutbox tersembunyi anda itu. hehehe

oke. selamat mencuba!




pecah kaca pecah cermin,sudah baca sudilah drop komen:P

24 000 org bercakap-cakap:

Hadia Itis said...

latop aku x de photoshop la plak...adeh..=P

dya adriza said...

klu bab photoshope ni mmg failed. hha. nway, best tutorial. rjn ek buat tuto =)

♥♥LiSsA♥♥ said...

aida: kalo takde photoshop. photoscape pon boleh. tp aku ta reti cmne nak wat jadi transparent kalo gune photoscape

dya: heee. lisa mmg failed photoshop. huhu. ni pun cuba jaya je ni dpt jadik cmtu haaa. heheh

noyis gila kentang~~ said...

KAT MANE NAK DOWNLOAD PHOTOSHOP FREE kak?sume kene beli punye.haaa~~

♥CiK duYung_Ca♥ said...

lisa,,sori x tanya kat shoutbox sbb tenet nie lembap..xkuat pon..urm~ nak tanyer, cane nak wat tajuk kar sidebar ngan tajuk entri dalam kotak yg warna lain dengan isi dia....cuba tgok blog sy, dia sama jek..cuma ade line jek..x cun la.. :(
*cikduyung.blogspot.com

leh pangggil sy ca jek..

Aisyah Nabilah Alias said...

salam,kak lisa napa sya xdpat uat ada gmbar kt tpi shoutbox 2???save dlam web page tu sbgai apa??GIF atau PNG?
sedih la...dh try byak kali tp xjdi pon......=( =( =(

Aisyah Nabilah Alias said...

akak,plish read this...tq.....
http://cikgadisapple.blogspot.com/2011/04/macam-mana-ni-akak-lisa.html

fasya said...

x jd pon..sob3 ='( trus ilang shoutbox yg lame..

♥♥LiSsA♥♥ said...

fasya: sepatutnye takde masalah. even kalo ta jadik pun.boleh bekap lagi. just pi kat shoutmix website then log in guna id n passwrd yg kita buat awl2 dlu,then get the code. nnti dpt balik code tu.jgn isau

Ieyda said...

as salam..lisa, shoutbox dah ade..gambar dah kuar..tp,latar belakang warna putih la..lg satu, cam ne nak besarkan gambar tu...confuse ni..

anis mira said...

lisa, anis da buat, tp xkuar la pic ny. kuar sekerat je,haha buruk gler,, frust then trus delete. camne eh??

anis mira said...

http://e-s-t-r-e-l-l-a-s.blogspot.com/

lisa tgk blog anis ni, nape kuar sekerat je gmbr ny..haha sedih glerr la x jadik uat

Ieyda said...

as salam ..ok lisa.gambar dah ok..tp, nak tunjukkan gambar kat tepi sidebar.dapat tunjuk sekerat je..camne herk???nak wat cam lisanye gambar.FULL..

AmiraRosli said...

thx lisa...=)

normala_ali said...

assalam.. lisa saya punya xnmpak la shout box 2? tp kalo klik kt situ dye baru kuar. camne erk????

PINKaholicx said...

ala sy wt x jd pown,,x muncul pown gmbr kt shoutbox tuh,,haha

Asian Fanatics said...

tutorial yg bgs , layak dicoba . ^o^
Thx infony .

ann said...

lisa... dah try wat tapi x kuar pape pon.. nape ek ? hurm... sedeynye. banyak dah tengok tutorial tapi tak jadi jugak.. macam nak jadi dah, sebab ada kuar icon setting tu.. tak tau ape yang salah setting ni..help me please.. buntu suda :'(

Lady Diana @ Lat'z said...

wahhh..bagus ni..nak jua buat tp takde photoshop..(O.o)...boleh tanya..macam mana buat shoutbox tu tersembunyi n keluar dari tepi tu?? hehe

miss wh0 said...

xjadik lah lisa...urggg....penat dah try...url nie xbetol ker ek..adehh
tolong2...

KHADIERA :) said...

why tak jadi ehh ? susah betul laa , tapi teringin nak buat . tlonglaaa ~ :(

myfirdz said...

x menjadi lar.. huhu... pnt gak edit gmbor.. alih2 masuk, x jdi lak... huhu. nape ea..

Ainul Hamid said...

Terima kasih atas perkongsian ini. Dah lama cari. Kak Ain ambil url gambar dari glitter graphic saja. Cari gambar transparent, copy code dan paste.

Ayah Rie said...

time kasih pd tuan tanah...akhirnya jadi gak setelah sekian lama duk mencari,...yes berhasil...
http://ayienawi.blogspot.com/

 

Copyright © 2012 by ♥♥ Lisa Afha ♥♥