εββα βlοmqνisτ ©

Tänkte dela med mig om hur man får en genomskinlig ram bakom bloggen, som den HÄR bloggen har.

---

1. Skapa en bild i Photoshop/Gimp som är 200x200px. Klicka sedan på OK.


2. När bilden kommer upp så är den hel vit, låt den vara det. Sen så ska du ändra på opaciteten, du väljer helt själv hur genomskinlig bilden ska vara, men mellan 40 och 50 brukar bli bra.


3. Nu när du ska spara bilden så skriver du vad bilden ska heta sen avslutar du med .png. Det är viktigt att du sparar bilden som .png och inte (!!) .jpg, annars blir inte bilden genomskinlig.


4. Nu ska du ladda upp bilden på bloggen, gå in på "Skapa" och sen "Bild". Sen ska du välja 200px i bredd på bilden.


5. Nu när bilden har laddats upp så klickar du där bilderna brukar komma upp så kommer bilden att komma upp.
När bilden har kommit upp så ska du kopiera bildadressen som dyker upp i adressfältet!


6. När du har kopierat bildadressen så går du in på "Design" och sen "Redigera Stilmall".
När du har kommit in på stilmallen så kollar du efter stycket #wrapper som ligger högt upp i stilmallen. (Om du inte hittar stycket så kan du klicka ctrl+f så kan du bara söka på det) Precis under #wrapper så ska du lägga in den här koden --> background: url ( bildadressen här ); och ta bort den här koden --> background-color: #FFFFFF; KOLLA BILDEN HUR JAG HAR GJORT!
Där det står "bildadressen här" så ska du lägga in bildens bildadress som du kopierade.



7. Nu är du klar och om det har gått rätt så ska det se ut såhär! (visar en liten del av bloggen)

---

Hoppas ni förstod mina instruktioner, undrar ni över något så släng iväg en kommentar så ska jag försöka hjälpa er!

Tänkte tipsa om ett snyggt designtips! Att länkarna byter färg (segt) vid mouseover, som en "färgövergång".

---

1. Gå in i stilmallen. Klicka på ctrl+f och sök på a:hover.

2. Nu ska du klistra in koden här nedanför efter varje a:hover i stilmallen. Det är bara att scrolla så ser du dom!
color: #fd97eb;
-o-transition: all 1.0s ease-out 0s;
-webkit-transition: all 0.7s ease-out 0s;
-moz-transition: all 0.7s ease-out 0s;

3. Så här kan det t.ex. se ut:

---

Hoppas ni förstod!

Nu tänkte jag försöka förklara hur du delar upp din meny i boxar. Jag utgår från mallen fashion, det tycker jag också ni ska göra! Hoppas ni förstår mina instruktioner :)

---

(läs bara punkt 1 om du startar från mallen fashion))
1. Innan du börjar så ska du göra den HÄR saken först. Annars funkar det inte att göra själva boxarna. (länk från filippao.se)

2. Gå till din stilmall och klistra in koden här under texten under stycket #side (kolla bild)
#box {
width: 200px;
padding: 0px 0px 0px 0px;
background: #FFFFFF;
}



3. Gå till dina kodmallar, nu ska du göra så själva boxarna. Och då gör du så att du sätter <div id="box"> i början av din box, sen slutar du boxen med </div></br> Såhär kan det se ut:


4. Glöm inte att göra samma sak i alla kodmallar, och spara när du är klar!

5. Om du vill ha skuggning eller en ram bakom boxarna så ska du lägga in någon av koderna (olika för kant eller skugga) direkt efter #box {

Kod för kant: (för att få kanten större så ändrar du 1:an till ett högre tal, ju högre tal, ju tjockare kant)
border: 1px #000 solid;

Kod för skugga: (för att få en "större" skugga så ska du ta ett högre tal på 7:an som står på andra raden efter box-shadow:.....)
-moz-box-shadow: 0px 0px 7px #000;
box-shadow: 0px 0px 7px #000;

---

Hoppas det hjälpte och om ni har några frågor, lämna en kommentar om ditt problem! :)

Någon som vet hur man gör så att texten ligger lite ovanför bakgrunden på rubriken, och att datumet, tiden och kategorien ligger på bakgrunden? Kolla hur bilden visar!

En sak som är väldigt efterfrågad här i bloggvärlden är hur man delar upp menyn i boxar.

Så jag tänkte visa er vad jag har lärt mig det. Jag hittade det HÄR! Hoppas det uppskattas! :)