Galleritva

Nu tänkte jag visa hur man lägger in en egen bild som header! Hoppas att ni förstår (om ni inte gör det är det bara att fråga)

1. Du börjar med att göra en bild som du vill ha som header och ladda upp den på din blogg. Du kan göra bilden i ett vanligt bildpogram som paint eller Picasa 3, eller om du har photoshop kan du ju göra det där med. Jag gör mina headers i Photoshop elements 8.


Jag brukar ladda upp min header i 900 pixlar men det beror på hur stor bilden och bloggen är men ni får helt enkelt testa er fram.

2. När du har laddat upp bilden så ser det ut så här:


Då trycker du på bilden och kopierar bildens adress (Ctrl+C)



Det som är markerat längst upp ska du kopiera.

3. Nu går du in i din stilmall (Först "design" och sen "Redigera stilmall") och letar upp kodavsnittet #header {


Sen ska du kopiera denna koden: background: #FFFFFF url(adressen till din bild här) no-repeat right center; (inom parantesen ska du klistra in adressen till din bild)
och leta upp background:  (som är markerat med rött och en tvåa på bilden) ta bort HELA den raden och ersätt den med koden du just kopierade. Alltså klistra in (Ctrl+V).

Nu är det bara att förhandsgranska och se så allt är bra och om den är väldigt liten eller stor får du ändra där det står width och height (längst ner i kodavsnittet header)

2. Klistra in den under <div id="wrapper"> i kodmallen, glöm inte att spara och klistra in den i de andra kodammallarna också ;)

Hoppas ni förstod och om ni har några frågor är det bara att kommentera!

(Tryck på bilderna för att komma till tipset)

10 - Gratis stilmall

11 - Jobba med rubrikerna i menyn

12 - Jobba med kommentarsfältet

15 - Få fixerad bakgrund på bloggen

16 - Bård eller liknande i bakgrunden (längst upp)

20 - Hur gör man mouseover bilder?

21 - Skugga bakom rubrikerna

23 - Enkla HTML grundkoder

border-top-width: 0px;

border-top-style: solid;

border-top-color: #959595;

border-bottom-width: 1px;

border-bottom-style: dotted;

border-bottom-color: #959595;

Fick en fråga om hur jag har gjort så att det blir ett streck under rubrikerna i menyn, t.ex:

1. Börja med att kopiera denna koden:

2. Gå nu in under design >> redigera stilmall och bläddra ner till kodavsnittet .navheader. Klistra in koden du kopierade någonstans i den kodsnutten under navheader, t.ex längst ner.

3. Förhandsgranska och se så att det ser bra ut och spara!

Om ni har några frågor är det bara att slänga in en kommentar ;)

Det ser olika ut i nästan alla kodmallar, men om ni trycker på Ctrl + F så kommer det upp en sökruta, skriv i <input type och tryck enter. Då kommer du hit (som på bilden) och precis efter hela koden som börjar med <input type och slutar med > (det är olika för nästan alla så därför kan jag inte skriva exakt) klistrar du in denna koden:

Sedan sparar du och ser om det ser bra ut. Pröva dig fram helt enkelt! Då lär du dig mer :D Du kan även ta hjälp av inlägger "HTML grundkoder". Har du några frågor? Var inte rädd för att ställa dem!

Fick en fråga om hur man ändrar bokstäverna i rubrikerna på bloggen till små istället för stora, så tänkte ta det lite kort.

Leta upp kodavsnittet h3 (entry headers) i stilmallen. Där finns det en kod som heter text-transform: uppercase; Skriv text-transform: none; om du vill ha små bokstäver istället, se bilden:

Ett litet tips jag tänkte ge er idag (kommer från julkalendern) tänkte berätta hur man gör för att få bakgrunden på sin blogg fixerad, alltså att den sitter still när man scrollar neråt.

Det är väldigt lätt att få den så, det ni ska göra är att lägga in denna koden under kodavsnittet body (längst upp i stilmallen)

Så här kan det se ut:

Ni ser body längst upp och den gråmarkerade koden är den ni ska klistra in.

Här kommer ett tips från julkalendern! Tänkte berätta hur man gör mouseoverbilder (bilden ändras när man håller musen över den). Hoppas ni kommer ha nytta av det :D

1. Börja med att göra två bilder - en som du använder som vanligt och en bild som kommer upp när man håller musen över den "vanliga bilden". Ladda sedan upp dom på din blogg och spara bildadresserna.

2. Kopiera sedan denna koden och lägg över </head> i alla kodmallarna.

<mce:script LANGUAGE="JavaScript"><!-- // This is the implementation of SimpleSwap // by Jehiah Czebotar // Version 1.1 - June 10, 2005 // Distributed under Creative Commons // // Include this script on your page // then make image rollovers simple like: // <img src="/images/ss_img.gif" mce_src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif"> // // http://jehiah.com/archive/simple-swap // function SimpleSwap(el,which){ el.src=el.getAttribute(which || "origsrc"); } function SimpleSwapSetup(){ var x = document.getElementsByTagName("img"); for (var i=0;i<x.length;i++){ var oversrc = x[i].getAttribute("oversrc"); if (!oversrc) continue; // preload image // comment the next two lines to disable image pre-loading x[i].oversrc_img = new Image(); x[i].oversrc_img.src=oversrc; // set event handlers x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');"); x[i].onmouseout = new Function("SimpleSwap(this);"); // save original src x[i].setAttribute("origsrc",x[i].src); } } var PreSimpleSwapOnload =(window.onload)? window.onload : function(){}; window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();} // --></mce:script>

3. Nu ska du lägga in bilden/bilderna och det gör du med hjälp av denna kod:

<a onfocus="blur()" href="länkadressen" mce_href="/1901887/entries/article/105719780/länkadressen"><img src="adressen till bild 1" mce_src="/1901887/entries/article/105719780/adressen till bild 1" oversrc="adressen till bild 2" border="0"/></a>

Du lägger in koden i kodmallarna där du vill ha mouseoverbilden. T.ex. om du vill ha den i menyn lägger du den någonstans under <div id="side">

4. Om du bara vill ha mouseoverbilder, alltså utan länk så att man inte kan klicka på dom lägger du in denna kod istället:

<img src="adressen till bild 1" mce_src="/1901887/entries/article/105719780/adressen till bild 1" oversrc="adressen till bild 2" border="0">;


KLART

Om du undrar över något är det bara att fråga!
Puss&Kram♥

(från julkalendern) Idag tänkte jag visa de enklaste html - grundkoderna som man ofta har nytta av (i kodmallen)

Tror att det var dom flesta, i alla fall det jag kunde komma på men om ni saknar något så är det bara att fråga eller kommentera :D

Alltså, istället för färgkoden (tex: #FFFFFF = Vit) skriver ni transparent.

1. Börja med att spara texten du vill ha i rutan, i ett word dokument eller liknande.

2. Sedan skriver du all text du vill ha med i inlägget som vanligt. Där du vill ha rutan skriver du KOD HÄR för att lättare hitta var du ska lägga in koden för rutan.

3. När du skrivit klart allt trycker du på Ändra redigerare längst ner i högra hörnet ↓

.Då kommer du in till ett html - läge och det är här du ska sätta in koden för rutan (så att det blir en ruta). Koden är:

4. Nu ska du leta upp stället du skrivit KOD HÄR. Ersätt det med kodsnutten du nyss kopierade här ovanför. Där det står DIN TEXT ska du då klistra in texten/koden du vill ska vara i rutan.

5. Sen kan du ändra storleken på rutan genom att ändra på siffrorna 40 (bredden) och 1 (höjden).

SVAR: Jag kan visa hur man gör exakt (vilket jag kommer att göra) men man lär sig inte mycket på det. För er som verkligen vill bli duktiga på det här med bloggdesign skulle bli duktigare ifall jag istället hade berättat lite vad de olika koderna i kodmallen betyder, så hade ni sedan löst det själva. Men nu kör jag på det lätta sättet!

1. Börja med att gå in i dina kodmallar och leta upp kodavsnittet <div class="entrymeta"> (för att hitta lättare: Ctrl+F och skriv in det du söker).

2. Texten nedanför kanske ser ut så här ungefär (det grå markerade) :

Ta bort den texten och ersätt med denna koden:

Men ibland kan texten bli väldigt ihop tryckt och då kan du kopiera denna koden istället och se om det blir bättre:

Sedan, om du vill, kan du ändra storleken, typsnittet och färgen. Se bild:

RÖTT: Ändra siffran 1 till något högre

BLÅTT: Byt ut Arial mot något annat typsnitt du vill ha

GRÖNT: Ändra Black till en annan färg (måste skrivas på engelska).

2. Men i alla fall, nu när du ska öka bredden så ska du ändra på siffrorna som står efter width. I detta fallet 538. Om du tex vill kunna ladda upp bilder i 600 px kan du ju ändra 538 till 620 tex. Ni får testa er fram helt enkelt! Glöm bara inte att ändra på båda ställena!

3. Nu måste du bara göra en till sak innan du är klar! Bläddra upp lite i stilmallen till #wrapper och widht. Där står också siffror som du ska ändra. Du måste öka med lika mycket som du gjorde i #content koden. Så om du ändrade 538 till 620 px ökade du ju med 82 px. Detta betyder då att du måste öka #wrapperns widht med 82 px.

Lite dåligt ljud och kvalité, men jag hoppas ni förstår vad som sägs!♥