Fonts 3

Här kommer lite nya fonts till er.

Klicka på bilden eller på länken för att komma till sidan ni kan ladda ner den.

 Ladda ner fonten här

  Ladda ner fonten här

  Ladda ner fonten här

  Ladda ner fonten här

 Ladda ner fonten här

Fonts 2

Här kommer lite fler tips på snygga och annorlunda fonts som ni kan använda i era bilder eller tävlingsinlägg. Det är roligt att spexa till det med lite olika typsnitt och färger.

 Ladda ner fonten här

  Ladda ner fonten här

  Ladda ner fonten här

  Ladda ner fonten här

 Ladda ner fonten här

Hur gör man en Mouseover? Tutorial

Har fått en fråga på Mejlen från Lisa som undrar hur man gör en Mouseover på bloggen. Så i dagens designtips ska jag försöka förklara hur man gör en enkel Mouseover i ett vanligt inlägg i Blogspot (Blogger) eller Wordpress, utan att behöva krångla i kodmallen. Med mouseover betyder alltså att bilden ändrar sig när man för muspekaren över den. Testa att föra din muspekare över bilden nedan för att se effekten. 

Exempel

Så här gör du!

1. Gör två olika bilder som du vill använda dig av.
Här kommer exemplet av mina bilder jag har på bilden ovan.
Tänk på att bilderna ska vara lika stora och döp dom till namn så du kan skilja på dom!

2. Ladda sedan upp dessa på din blogg och spara länken till bilderna så du har dom!

3. Börja skriva på ditt inlägg! Där du vill ha din Mouseover bild stannar du och klistrar in koden nedanför i inlägget. Kom ihåg att du måste vara inne i "Redigera HTML" delen och inte i "skriv" delen.

<a href="LÄNK"><br /> <img src="BILD1" onmouseover="this.src='BILD2';" onmouseout="this.src='BILD1';" /></a>

4. Där det står "LÄNK" kan du klistra in en länk till den sidan du vill att man ska komma när man klickar på din bild. Där det står "BILD1" ska du klistra in länken till den bild du vill ska synas när muspekaren INTE är över bilden. Där det står "BILD2" klistrar du in länken till den bild du vill ska synas när muspekaren är över bilden. Sedan klistrar du in länken till bild 1 igen där det står "BILD1".

5. För ett centrera din bild skriver du bara center innan koden, som här under.
<center> HTML-koden du nyss klistrade in</center>    Hoppas detta hjälpte!
Har du några frågor är det bara att höra av dig!
Antingen i en kommentar eller ett mejl.
Erikawilhelmsson@hotmail.com

Portfolio

Har lyckats lösa alla problem som har varit med designs hit och dit. Nu ska inget krångla och jag ser verkligen fram emot att börja göra lite fler designs! Här nedan följer min portfolio över designs jag hittils gjort. Hör av dig till Erikawilhelmsson@hotmail.com om du är sugen på ny design :)

Denna design gjorde jag till min vän Sofie Israelsson.
Hon ville ha någonting stilrent och enkelt med bilder från hennes hem.

Klicka på bilden för att se den större

Denna design var till Caroline Wilsson.
Hon ville ha en lantlig design med toner av ljusbrun, beige, gammeldagsrosa.

Klicka på bilden för att se den större

Denna design gjorde jag till mig själv med hjälp av andra!
Bakgrunden har min mamma gjort.
Getingen, flugan och tåget designade Agnes.

Klicka för att göra bilden större

Denna design gjorde jag själv till min nya blogg UnikaErika. Jag ville ha någonting enkelt, stilrent men ändå lite barnsligt och "Unikt".

Klicka för att göra bilden större

 Denna design gjorde jag till Caroline Wilsson. Hon ville ha något mer Rockigt fast med ljusa och neutrala toner. En enkel meny i toppen och med ett favoritcitat i headern.

Fonts

Tänkte tipsa om lite olika fonter som jag använder mig av när jag gör tävlingsbilder eller när jag vill piffa till någon bild med lite text. Klicka på fonten eller på länken under för att komma till sidan där ni kan ladda hem fonten. För att installera fonten på er dator gör ni bara så att ni klistar in den under Windows/Fonts på er dator.

 Fonten finns att ladda ner här

Fonten finns att ladda ner här 

 Fonten finns att ladda ner här 

  Fonten finns att ladda ner här 

 Fonten finns att ladda ner här 

 Finns det ett intresse att jag ska tipsa om mer fonts, brushes, tips och trix för fotoredigering och liknande? Vad vill ni i så fall läsa mer om? Tacksam för lite tips om vad ni vill ha! :)

Hur man får sina egna kommentarer att synas bättre

I denna steg-för-steg ska jag förklara för er hur man lätt kan göra så att dina egna kommentarer skiljer sig från övriga kommentarer. Detta är ett väldigt användbart knep för att dina läsare lätt och snabbt ska kunna hitta dina svar i ett inlägg som har massa kommentarer.

1. Logga in på din blogspot och välj sedan "Design-->Redigera HTML"
2. Spara din gamla Mall som försäkring om något skulle gå snett!!!
3. Klicka i boxen "Utöka gränssnittskomponentmallar"
4. Hitta ]]></b:skin> i din mall. Du kan söka på det genom att klicka på Ctrl+F.
5. Klistra in scriptet i boxen nedanför INNAN scriptet ovanför.



.comment-body-author {<br /> background: #E6E6E6; /* Background color*/<br /> color: #000; /* Text color*/<br /> border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;<br /> margin:0;<br /> padding:0 0 0 20px; /* Posotion*/<br /> }

6. Hitta sedan denna kod i din mall.



<dd class='comment-body'><br /> <b:if cond='data:comment.isDeleted'><br /> <span class='deleted-comment'><data:comment.body/></span><br /> <b:else/><br /> <p><data:comment.body/></p></b:if><br /> </dd>

7. Klistra in koden i boxen nedanför i din mall INNAN scriptet ovanför.


<b:if cond='data:comment.author == data:post.author'><br /> <dd class='comment-body-author'><br /> <p><data:comment.body/></p></dd><br /> <b:else/>

8. Hitta sedan denna kod i din mall


<dd class='comment-footer'><br /> <span class='comment-timestamp'><br /> <a expr:href='data:comment.url' title='comment permalink'><br /> <data:comment.timestamp/><br /> </a><br /> <b:include data='comment' name='commentDeleteIcon'/><br /> </span><br /> </dd><br />

9. Lägg till </b:if> i din mall INNAN scriptet ovanför

10. Spara din Mall och du är nu klar för att kommentera och få dina kommentarer i en unik ruta :)

Vill du ändra utseende på din ruta?

Denna Guide gör att dina kommentarer syns i en grå ruta med svart text. Detta kan du självklart ändra på. I första scriptet du fick hittar du färgkoderna och dom kan du enkelt byta ut med vilka färgkoder du vill! Jag har tagit en ljusblå bakgrund som har färgkod #eaf5fd sedan har jag tagit en mörkblå färg till texten med färgkod #6685a3. Mina kommentarer ser nu ut så här:

Snygg och enkel kommentarsruta som matchar min bakgrund:)

Tips på hur du gör för att få fram dina egna färgkoder.

För att snyggt få din kommentarsbox att matcha din blogg så kan du enkelt få fram dina egna färgkoder från din egna blogg. Ta en printscreen när du tittar på din blogg. Lägg in den i ett fotoredigeringsprogram så som Phoshop eller Gimp. 1. Tryck på Pimpetten och tryck sedan på det stället på bloggen som har den färg du vill ha. 2. Klicka på färgen som kommer upp i ditt färgval. 3. Här står nu färgens kod som du sen kan klistra in i scriptet. 

Nu blev detta ett väldigt långt och kanske för några krångligt inlägg. Men ni får som vanligt skriva mejl till mig om det är någonting ni undrar. Eller varför inte lämna en kommentar? då kan jag svara med mina nya fina färgkommentarer :P

Designen fungerar!!

Designen funkar!!! Inte för att jag fick hjälp från teknikerna. Nej det har ju som ni märkt tagit alldeles för lång tid. Jag grejade det hela själv tillslut. Det var helt enkelt att köra "testa allting tills någonting funkar" jag är en mästare på det ända sedan jag fick Wille :) Så nu testade jag varenda inställning, varenda "knapp" varenda allt. Jag vet inte hur många gånger jag uppdaterat samma design. Säkert över 100 med bara en liten inställnings skillnad varje gång. Det var rätt skönt att hitta rätt inställning, och ändra till rätt läge. Så funkade allt tillslut. En liten inställning. Som kunde ställa till så mycket. Jösses. Nu kan jag även med glädje säga att jag kan göra designs till alla problemfritt! Utan att behöva oroa mig för att allt ska krasha. Nu kommer jag inom kort börja kunna ta beställningar på designs. Är du intresserad? Tills dess kan du titta på de designs jag hittills gjort genom att besöka min Portfolio. Vill du ha en personlig design med Drop-Down meny? Kontakta mig så berättar jag mer. Erikawilhelmsson@hotmail.com.

Nu kan även jag detta med design:)

Då var den nya designen på plats, och vet ni vad. Denna har jag gjort helt själv. Några gånger gick saker åt skogen med inställningarna, och då fick jag hjälp av sötaste Agnes. Men annars så har jag lyckats pilla ihop allt på egen hand. Jag tycker resultatet är riktigt bra för att vara min första bloggdesign. Men mer ska det bli! :) Det är verkligen jätteroligt tycker jag. Speciellt nu när det är påsk och man kan köra lite på ett påsk-tema. Ser ni de söta påskäggen innan varje inlägg? Vad tycker ni om designen då?

Design på G

Bloggen är under uppbyggnad det är därför det har varit krångel. Och ser lite konstigt ut nu. Ny Design på G :) Det är ju snart Påsk, så Påsk-Tema självklart! :)

Lägg till en Signatur i bloggen

Som ni ser har jag en signatur längst ner i varje inlägg. Detta tycker jag är lite sött och det sätter en egen stämpel på inläggen. Här följer en liten beskrivning på hur man enkelt gör för att automatiskt få sin egna signatur i varje inlägg.

Skapa först din egna signatur på Mylivesignature där finns det massa olika fonter du kan välja bland. Du kan självklart göra din egna genom Paint, Photoshop eller Gimp också. Men jag tycker det var enkelt att använda mig av det programmet.

• Klicka på "Proceed"
• Klicka på "Using the signature creation Wizard"
• Följ sedan anvisningarna
• Klicka sedan på "Want to use this signature?"
• Klicka på "Generate HTMLcode"
• Klicka på "Generate a code for my handwritten signature"
• Kopiera koden!!
• Gå in i din bloggs inställningar och välj sedan fliken "Formatering" längst ner på sidan hittar du "Mall för inlägg" Klistra in din kod där. Spara dina inställningar och vips så har du en egen signatur automatiskt i varje inlägg! 

Hur man får en "Gilla"-knapp på bloggen

1. Klicka på fliken "Design"

2. Klicka på fliken "Redigera HTML"

3. Klicka i rutan "Utöka gränssnittskomponentmallar"

4. Leta upp data:post.body i din kodmall. Du kan söka i din kodmall genom att trycka på Ctrl+F. Direkt efter data:post.body klistrar du in HTML-koden nedan.

<div><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div>

Vissa har haft problem med koden. Det är för att " skall bytas ut mot "
Varför detta inte syns i rutan kan jag inte förklara.
Men byt ut alla " mot " så ska det funka!

Sök på " genom att klicka på Ctrl+F för att hitta de ställen där du ska sätta in " istället.