customize your shoutbox

Friday, April 30, 2010

well...
this post is specially created for my to dearest friend....
most specially for shoutmix users as i am one...
and so are they...





so how was it done??

how to change smiley
log in to your shoutmix / settings/ smiley
then you'll get something like this...


what you have to do next is just insert the URL of images you wanted to use
for instance you can get it from glitter-graphics
[to get URL easily click download image, then right click image and copy image URL]
then just include the code to be use for the image and click add
and don't forget to SAVE it
then voila~!!


how to change the colour of your shoutbox
log in to your shoutmix / settings/ style & colours
what you have to do is mix and match the colours
if you wish to see it before saving it just click preview
if you are then satisfied by it
click SAVE~!!

next is to replace your green shoutbox image to other images

p/s:
the code provided below is not complete...
this is just to show you where the changes should be done~

go to your existing code
it should look something like this...
the changes to be done are those colour highlighted code

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

.gbtab{
height:118px;
width:80px;
float:left;
cursor:pointer;
background:url('image url here') no-repeat;
}
.gbcontent{
float:left;

border:0px solid #666666;
background:-;
padding:5px;
}

script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 80-w) : moveGB(80-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+")", 5);}

-your shoutbox code here-



div style="text-align:left">
.

.
.
.
.
gb.style.right = (80-gb.offsetWidth).toString() + "px";

where:
yellow = change according to height and width of image used
green = url image that you wish to use to replace the original image
orange = try changing (80-w) to ([image width]-w)
red = try changing (80-gb) also to ([image width]-gb)

i suggest you try your very best cause this requires some time...
if any problem persist do let me know
i'll do my best to assist you...


10 heart throbbing words:

yui92 said...

ngeee.... silap teknik kot... xjadi la plak...

last2 letak shoutbox normal...eheheh

.:|kamaryeah|:. said...

@yui92which part yg agk2 silap nie??

ninie_azriena said...

tanks for the great info..
shoutbox ninie dah ader ikon2 comel lah..
check it out,,,

(n_n)

icee-yah said...

cute la blog awak ni:)

.:|kamaryeah|:. said...

@ninie_azriena
thankz bace entri nie~

.:|kamaryeah|:. said...

@icee-yah
thankz dear~

Anonymous said...

I would like to exchange links with your site kamaryeahtajuddin.blogspot.com
Is this possible?

.:|kamaryeah|:. said...

@Anonymous
do include your link 4 me please~

aisyah Qaisyiah said...

huhuhu sy x dpt buat...mcm mn ni...tlg la, sy t'ingin sy nak letak icon butterfly kat shoutbox sy...

.:|kamaryeah|:. said...

@aisyah Qaisyiah
jgn sedih~
nnt kt tolong k~

 

copyright© 2010 kamaryeah tajuddin
all rights reserved