2009-08-16
22:30:26

Läsarfråga: Scrollruta för bildlänk



Svar till Alexandra: Du behöver bara kopiera koden nedan och byta ut texterna "DIN BLOGGADRESS" samt "LÄNKEN TILL DIN BILDLÄNK".



Kopiera koden genom att markera texten (klicka på rutan) och håll in "Ctrl + C"


2009-04-09
02:03:57

Hur man skapar text spegling?

Jag fick en fråga av Ida angående hur man gör text spegling i photoshop som jag har i mina meny-rubriker.


Såhär går det till:





Jag har försökt att förklarat så tydligt som möjligt men om det uppstår några frågetecken så är det bara att lämna en kommentar här så besvarar jag er fråga snarast.


2008-07-30
12:53:33

Hur skapar man en "Bild-rollover"?

I detta inlägg kommer jag att skriva om hur man gör en bild-rollover (dvs. att en bild ändras då man placerar musen över den).


1) Det första viktiga är att man justerar bildstorlekarna på bilderna man valt ut, så att dem har samma mått både på längden och bredden.  Spelar ingen roll vilket bildprogram du använder bara du kan beskära bilderna så att båda bilderna har exakt samma mått.
OBS! Kom ihåg att beskär bildens bredd till den måtten som du har i din meny i din blogg/hemsida.

Exempel på redigering:



Beskär bilden (måttet i bilden är ett exempel som jag själv använder):



2) Namnge bilderna med samma namn, förutom att den bilden som du vill ska synas då musen ligger över bilden ska du namnge med "over" efter. Det blir sedan lättare att lägga in webbadressen i kodmallen. Då får du bättre koll på vilken bild som ska läggas in först

Exempel: tröja1 (den bild som syns hela tiden) och tröja1_over (den bild som syns då musen ligger över bilden)


3) Ladda sedan upp dessa två bilder i din blogg.


Och nu kommer vi till tyngdpunkten: rolloven.


4) Öppna ett separat word dokument (eller likande, ex. wordpad fungerar utmärkt) och kopiera dåde bild 1 webbadress och bild 2, klistra sedan in webbadressen i text-dokumentet så länge.

5) Kopiera koden nedan (med hjälp av: Ctrl C för att kopiera och Ctrl V när du ska klistra in):


<script LANGUAGE="JavaScript">
<!--
function getAppVersion() {
appname= navigator.appName;
appversion = navigator.appVersion;
majorver = appversion.substring(0, 1);
if ( (appname == "Netscape") && ( majorver >= 3 ) ) return 1;
if ( (appname == "Microsoft Internet Explorer") && (majorver >= 4) ) return 1;
return 0;
}
function swtch(num, imgname) {
if (getAppVersion()) {
document[imgname].src = img[num].src;
}
}
//-->
</script>
<script LANGUAGE="JavaScript1.1">
<!--
imgsrc = new Array();
imgsrc[0] = "webbadressen till bild1";
imgsrc[1] = " webbadressen till bild1_over";
if (getAppVersion()) {
img = new Array();
for (i = 0; i < imgsrc.length; i++) {
img[i] = new Image();
img[i].src = imgsrc[i];
}
}
//-->
</script>


Du byter nu ut texterna webbadressen till bild1 och webbadressen till bild1_over med dina bilders webbadresser.


Denna kod ovan ska du sedan när du är klar med webbadresserna klistra in under <HEAD> avsnitet i kodmallen.


Om
du nu exempelvis skulle ha fler än en rollover i din blogg/hemsida så kan du lägga till dessa 2 koder:
♦ imgsrc[0] = "webbadressen till bild1";
♦ imgsrc[1] = " webbadressen till bild1_over";


Exempel:

Rollover 1:

imgsrc[0] = "webbadressen till bild1";
imgsrc[1] = " webbadressen till bild1_over";

Rollover 2:

imgsrc[2] = "webbadressen till bild1";
imgsrc[3] = " webbadressen till bild1_over";

etc.


Dock MÅSTE du KOMMA IHÅG att ändra på siffrorna, så att de följer en numerisk följd när du skapar de andra rolloverna. Det är alltid två 2 webbadresser till en rollover.


Nu är det dags att kopiera den andra koden som ska hjälpa dig att placera rollovern var i din blogg/hemsida den ska befinna sig.

6) Kopiera koden (med hjälp av: Ctrl C för att kopiera och Ctrl V när du ska klistra in):

<a href="webbadressen som du vill komma till då du klickar på bilden" onMouseOver="swtch('1','bild1')"
onMouseOut="swtch('0','bild1')"><img name="bild1" src="webbadressen till bild 1" border="0"></a>

Du byter nu ut texterna webbadressen som du vill komma till då du klickar på bilden och webbadressen till bild 1 med dina bilders webbadresser.


Denna kod ska du sedan klistra in och placera valfritt inom <BODY> avsnittet i kodmallen.


Om
du nu exempelvis skulle ha fler än en rollover i din blogg/hemsida så kan du lägga till denna kod:


<a href=" webbadressen som du vill komma till då du klickar på bilden " onMouseOver="swtch('siffran på bilden som ska bytas till','bildnummer på förstabilden i rollover-serien')" onMouseOut="swtch('siffran på bilden som alltid syns','bild+numret på bilden som alltid syns')"><img name="bild+numret på bilden som alltid syns" src="webbadressen till bilden som alltid syns" border="0"></a>

Så här ska koden se ut efter (exempel med webbadresser):
<a href=http://itisallaboutsally.blogg.se/ onMouseOver="swtch('1','bild1')"
onMouseOut="swtch('0','bild1')"><img name="bild1" src=http://itisallaboutsally.blogg.se/image01 border="0"></a>



Jag ska nu kort förklara vad begreppen inom koden står för:





 

Dock MÅSTE du KOMMA IHÅG att ändra på siffrorna, så att de följer rollover-bildernas nummer i koden som ska placeras inom <HEAD>, annars fungerar det inte.


Det är lite rörigt i början men ta din tid att klura ut det ;).

7) KLISTRA IN BÅDE KOD 1 OCH 2 i kodmallen i din blogg/hemsida!
8)

image65

Nu ska den synas i din blogg/hemsida!
Exempel:



LYCKA TILL!
(Jag har förklarat så innegående som jag kunnat så ta dig tid till att läsa detta! Självklart får du fråga om du verkligen inte förstår.)



2008-05-23
21:29:06

2 menyspalter


Designa din blogg, har nu klurat ut lösningen till 2 menyspalter, nu väntas bara på att inlägget ska publiceras.  Så jag kommer inte fortsätta med projektet.


2008-04-28
22:10:27

Coming up: 2 Menyspalter

Jag håller på att trixa lite med bloggdesignen och är hyffsat nära på att kunna fixa fram 2 menyspalter. Så om ni vill veta hur man göra så håll utkik i min blogg under kategorin "Blogghjälp - TIPS".

Tidigast jag kan fixa fram en gudie till 2 menyrader är den 1 maj, eftersom jag har prov imorgon och redovisning på onsdag så kommer jag tyvärr inte hinna innan dess.

Hoppas ni är intresserade av detta!


2008-04-06
17:30:30

Bildlänka till mig

Nu finns det bildlänkar till min blogg MEN hur bildlänkar ni till mig?
image56

1) Först rullar ni ner till "Bildlänka till mig" kategorin och sedan kopierar ni koden som finns i rutan.
Markera texten i rutan och kopiera genom att hålla ned CTRL + C.
image62

2) Gå sedan tillbaka till er egen blogg och klicka in på "REDIGERA KODMALL" och leta upp koden <div class="navheader">Länkar</div>.

image63

3) Nu ska ni klistra in - CTRL + V min bildlänkskod "<a href="http://itisallaboutsally.blogg.se" target="_blank"><img src="http://itisallaboutsally.blogg.se/images/2008/bildl_nksikon_1207425149_2732408.jpg" border="0"></a>" under koden <div class="navheader">Länkar</div>, innan koden <tag:linklist>.
image64

4)
image65

LYCKA TILL!



2008-04-05
01:34:52

Problem med inläggsidan?

Jag hade tidigare problem med inläggsidan på min blogg eftersom jag har reklam på startsidan. Headern och inlägger var inskjutet samt att inläggsmarginalen har krympmt.
1)
image52
2)
image53


Jag satt och trixade ett litet tag innan jag kom fram till vad som vad orsakade problemet.

Nu ska jag visa er hur ni kan åtgärda problemet (ifall ni inte vet).

Först går ni in på REDIGERA KODMALL och sedan ändrar ni på fliken STARTSIDA (index) till INLÄGGSIDA. Efter det ska ni under BODY hitta koden <div id="wrapper">, när ni hittat den så ta bort den och efter det förhandsvisa, därefter spara om det ser bra ut.

image55