Byta header på gratis design
2012-04-08 @ 12:15:00
Jag får många både kommentarer och mail om man får byta bilderna i headern på mina gratis designer och även hur man gör.
Först och främst så får ni byta header och ändra färger o vad ni vill på gratis designerna, så länge ni har kvar design av-länken då det fortfarande är min grund.
Hur byter man då header?
Hur byter man då header?
Hur? Ändra färg och avstånd på kursiv text i inläggen
2012-01-10 @ 10:12:00
Fick ett mail i förrgår om hur man gör för att få annan färg och bredare avstånd mellan bokstäverna på kursiv text i inläggen. Detta är ett enkelt litet tips om hur du gör!
Gå in i stilmallen leta upp a:hover och efter dennes rad skriv in:
Ju högre värde på letter spacing du skriver desto bredare mellanrum, man kan även skriva -1px för att få dem tajtare.
Färgkoder (#-koder) hittar du bland annat enkelt via denna sida: Färgväljare
Hur? Byta headern i en gratis design
2012-01-05 @ 11:11:00
Fick en kommentar här om dagen hur man gör om man vill ändra headern och lägga in sina egna bilder.
Steg 1: Börja med att gå in i stilmallen och sök upp: #header
Markera sedan sedan bildadressen som finns där och kopiera in i en ny flik på din webbläsare, och spara sedan ned bilden genom att högerklicka - spara bild som
Steg 2: Öppna sedan den sparade bilden i valfritt bildprogram, exempelvis photoshop.
Redigera sedan denna utefter hur du själv vill ha det. Spara sedan bilden och kom ihåg att spara med rätt filändelse (jpeg, png, gif - png gör att bilden får genomskinlig bakgrund, ändra ej detta!)
Steg 3: Ladda sedan upp bilden på din blogg
Skapa - Bild - Välj fil (leta reda på bilden och välj den) - Bildstorlek (välj 1000 pixlar) -> Ladda upp!
Klicka sedan på bilden två gånger så du får fram en adress till bilden och kopiera adressen
Steg 4: Gå sedan in i stilmallen, leta upp samma ställe och kopiera in din nya bild-adress.
Steg 5: Välj sedan förhandsgranska och se så det ser bra ut innan du sparar allt.
Lycka till! :)
Hur? Lägga till meny #1
2011-12-30 @ 09:04:52
Fick en kommentar här på bloggen om hur man lägger till en meny, då tänkte jag börja med att visa hur du lägger in en sidmeny, då vissa av mina gratis designer inte har någon sid-meny alls, kan du enkelt få tillbaks den.
Börja alltid först med att kopiera all nuvarande kod och spara i anteckningar, ifall det blir något knas när du ändrar sedan.
Sen går du in i kodmallarna, sök upp och lägg till: <div id="side"> </div>
Innan den stängda div (</div>) får du lägga in vad du vill ha i menyn, text, bilder, länkar osv.
Gå sedan vidare till stilmallen och leta upp:
För att förstå lite mer och bättre om wrapper, side och content, läs här
Prova dig sedan fram så får du nog till det bra som du vill ha det till slut :)
Hur? Bildspel i headern
2011-07-13 @ 12:12:00
Har fått ett flertal kommentarer kring detta och anar att det är ett antal fler som undrar hur man gör också, många av er är då även lite för slöa för att söka på Google för det är inte så svårt egentligen ;)
Men jag är snäll och ger er en liten hjälp på vägen!
För att få till ett bildspel i headern måste man använda sig av att script, detta script heter EmilyPictureBackground
Via en liten enkel sökning på google kommer ni kunna få fram kod och instruktioner, gör sedan dina olika bilder du vill ha i headern och spara på din blogg och använd sedan i koden.
Guide via denna sida som innehåller koder för scriptet
Skapa en div som heter exempelvis slideshow, bildspel eller vad du än behagar själv som du lägger in både i stilmallen och kodmallen.
I stilmallen är det för att positionera bildspelet så det hamnar rätt i headern och i kodmallen skriver du bara <div id="namnet">
Och följ sedan med punkt 2, 3 och 4 (med dina bildadresser) och fixa och trixa sedan så den ligger rätt och alla bilder är med o rullar :)
Så här ser det ut i min stilmall:
& så här i kodmallen:
Lycka till och ge inte upp i första taget!
Kom även ihåg att om det ska vara ett bildspel på varje sida att lägga in det under varje kodmall (framsida, arkivsida, kategorisida och inläggssida)
Hur? Runda hörn utan bilder
2011-07-01 @ 13:50:00
Här kommer ännu ett tips, hur du får rundade hörn som exempelvis jag har på min hemsida där jag skriver:
Lägg då in denna kod i din stilmall inom side, content, wrapper eller där du vill ha rundade kanter.
Du kan sedan själva fixa dom genom att ändra 10px till något annat tal, prova dig fram! :)
Enkelt fixat istället för att fixa med bilder upp och ner överallt :)
Hur? Rullande twitterstatus
2011-06-27 @ 14:56:00
Här kommer nog ett efterlängtat inlägg, har i alla fall fått frågan flera gånger hur man gör. Så läs och lär!
Börja med att gå in i din stilmall och lägg in:
Detta är rubriken som blir och stå ovanför den rullande twitterstatusen
Denna kod gäller för den själva twitterstatus-texten
Länken som blir är tiden som kommer rullandes efter twitterstatusen
Sen går du in i kodmallen och letar upp var du vill ha twitterstatusen, alternativt under <div id="side"> och lägg då in denna kod:
Leta upp i texten där det står ANVÄNDARNAMN och ändra till just ditt användarnamn på twitter
Sedan ska det fungera, Lycka till! =)
Tips - Spara för webb
2011-01-21 @ 17:24:27
Något som många säkert inte vet om och är väldigt lätt att missa är alla färger som ofta går förlorad genom att spara som vanligt i Photoshop. Istället kan man "Spara för webben och enheter" och det blir en stor skillnad.
Här nedan ser ni skillnaden som blir:
Sparat som vanligt ↓
Sparat för webben och enheter ↓
Hur? - Tidsinställt inlägg
2011-01-19 @ 15:45:00
Finns nog några guider på detta redan men fått frågan från flera stycken hur man gör ett tidsinställt inlägg här på blogg.se
Psst! Man kan även lägga in inlägg bakåt i tiden ;)
Här nedan visar jag med bilder steg för steg hur du går till väga:
Detta är verkligen jättesmidigt, detta inlägg är även det ett tidsinställt var bara att skriva det igår och så publiceras det idag (19/1) när jag jobbar.
Psst! Man kan även lägga in inlägg bakåt i tiden ;)
Hur? - Skapa eget arkiv
2011-01-17 @ 22:15:00
Har fått en förfrågan om att skriva hur man gör för att ordna upp sitt egna arkiv. Har visat lite grann tidigare hur man gör men här kommer en mer detaljerad guide:
Vanligtvis ser arkivet ut så här:
Jag har valt att ta bort arkiv - <div class="navheader">arkiv och gjort det till: <div class="2011">
För att uppdatera för varje månad blir koden att se ut så här:
Om man vill ha all kod färdigt på en gång för kommande månader också blir det så här:
Gör sedan detta för alla år du har arkiverat, kom då bara ihåg att ändra åren ↓
Tips - Mouseover
2010-12-23 @ 14:44:26
Fick en förfrågan om jag kunde visa hur man gör mouseover (så den byter bild när man håller muspekaren över, exempelvis mina luckor) på bloggen så här kommer det!
1. Lägg in koden nedan precis innan </head> i kodmallen
2. Om du vill ha en mouseover fast i designen, i menyn exempelvis använd denna kod & lägg in på önskat ställe:
<a href="länkadressen"><img src="adressen till bild 1" oversrc="adressen till bild 2" border="0"></a>
eller om de inte ska vara länk till någon sida:
<img src="adressen till bild 1" oversrc="adressen till bild 2" border="0">
Vill du ha den i ett inlägg använd denna kod:
<img onmouseover="this.src='ADRESS TILL BILD 2'" onmouseout="this.src='ADRESS TILL BILD 1'" src="ADRESS TILL BILD 1" alt=" " />
Stöd Rosa Bandet på din blogg!
2010-10-08 @ 15:18:40
Som nog många säkert redan vet om är oktober månad = rosa månad. Hela Sverige färgas rosa med hjälp av företag, föreningar och privatpersoner som vill engagera sig i kampen mot bröstcancer.
Jag visar mitt stöd bland annat via bloggen, gör det du också!!!
Klistra in följande kod i din kodmall precis under <div id="wrapper">
Om ni har svårt att få in den på er blogg, kika in denna guide som är mer ingående
Rosa Bandet räddar liv — stöd kampen mot bröstcancer
Varje år får cirka 7 000 kvinnor beskedet att de har bröstcancer. Det innebär att var nionde kvinna drabbas någon gång i livet. Antalet bröstcancerdiagnoser i Sverige ökar, men samtidigt blir de som överlever allt fler. På 1960-talet levde cirka 50 procent av bröstcancerpatienterna i Sverige tio år efter diagnos och behandling. I dag är siffran 80 procent. Cancerfondens mål är att ännu fler ska överleva – ett mål som bara kan bli verklighet genom framgångsrik forskning.
Cancerfondens Rosa Bandet-kampanj bekämpar bröstcancer genom att finansiera forskning, sprida kunskap om sjukdomen och väcka opinion kring viktiga frågor.
Tips - Dropdown meny
2010-08-08 @ 20:50:41
Har varit flera stycken som undrat hur man gör dropdown-menyn som jag har ovanför/i headern, så nu är jag extra snäll och lägger ut en guide här!
Har tidigare länkat till DDB men tänkte att det är lika bra och skriva ned det lite snabbt här.
1. Gå in i stilmallen och lägg in denna kod längst ned:
2. Gå sedan in i kodmallarna och lägg in denna kod vart du vill ha menyn ligga:
Jag har den ligger precis efter
3. Innan du gör något annat med koden så kolla på din blogg så det funkar.
4. Börja sedan med kodmallen och fixa i ordning länkarna utefter hur du vill ha dom.
Börja med att lägga in adressen till de sidor som du länkar till, det gör du i denna kod: <li><a href="#">Länk1</a></li>
Byt ut # mot adressen och byt ut Länk 1 till det namn du vill att länken ska ha.
Byt ut # mot adressen och byt ut Länk 1 till det namn du vill att länken ska ha.
Sedan får du själv tänka lite hur du gör för att fixa din meny till din egna även när det gäller färger o s v..
Hur? Genomskinlig wrapper
2010-08-08 @ 00:53:00
Exempel på resultat ser du längst ned i inlägget
Tips: Ladda ned teckensnitt
2010-07-06 @ 13:10:16
Här kommer ett litet tips om hur du kan ladda hem roliga, fina, nya teckensnitt till din dator.
Att tänka på: Typsnitten funkar att ses när du gör dem som bilder men inte av att skriva in teckensnittet i stilmallen på bloggen exempelvis då det krävs att man som läser har detta teckensnitt nedladdat på datorn också.
Man kan enkelt hitta flertalet sidor med olika teckensnitt genom att söka exempelvis: Fonts, teckensnitt m.m. på Google.
En sida att rekommendera är dafont.com
Gör så här:
Du kan sen bara ta bort filen från datorn där du sparat den från början.
Att tänka på: Typsnitten funkar att ses när du gör dem som bilder men inte av att skriva in teckensnittet i stilmallen på bloggen exempelvis då det krävs att man som läser har detta teckensnitt nedladdat på datorn också.
Man kan enkelt hitta flertalet sidor med olika teckensnitt genom att söka exempelvis: Fonts, teckensnitt m.m. på Google.
En sida att rekommendera är dafont.com
Gör så här:
Du kan sen bara ta bort filen från datorn där du sparat den från början.
Tips: Färgkoder på internet
2010-06-22 @ 19:14:31
När man vill ha en viss färg på exempelvis bakgrunden på sin blogg får man använda sig av färgkoder. Själv får jag enkelt fram dom via photoshop där jag oftast ändå sitter när jag ska göra designer osv. Men för er andra som vill ändra bakgrunden, ta reda på en färgkod och exempelvis säga till någon vilken färg man vill ha eller så.
För er finns det en sida på internet som ger dig samma möjlighet som photoshop och andra liknande program:
ColorPop
För er finns det en sida på internet som ger dig samma möjlighet som photoshop och andra liknande program:
ColorPop
Nu är det bara fritt fram att använda!
(Glöm inte # före koden)
(Glöm inte # före koden)
Att göra en bloggdesign
2010-06-20 @ 20:03:15
Jag fick nu för ca 1 månad sedan en kommentar från en tjej som ville att jag skulle skriva om vilka html koder jag använder. Nu har jag äntligen lite tid att sätta mig ned med detta!
Allting jag gör i bloggdesign och hemsideväg gör jag textbaserat. Då med hemsidor för att jag ännu inte hittat något underlättande program jag känner mig nöjd med men så småningom kanske det kommer.
Men gällande min design, så är det inte så mycket special kod som jag tycker.
En grundande mall via blogg.se har jag startat med och sedan utformat den efter vad jag själv velat ha det.
Header & Bilder - Bearbetar jag i Photoshop CS5. Finns att ladda hem som 30 dagars version här
Html-koder - Självlärd, vågar prova mig fram och man kan söka väldigt mycket på internet idag.
Två små kod-tips kan jag ge här:
Meny med dropdown - finns enkel guide hos designadinblogg.se - SE LÄNK
Denna meny går sedan att utforma utefter dina egna önskemål. Alltifrån färger, storlek, placering m.m.
Eget arkiv - För att få som jag:
Här får du uppdatera koden för varje ny månad
Om du vill ha alla månader länkade på en gång:
Ändra så det handlar om rätt år och din blogg adress sen lägger du bara in den på önskat ställe i kodmallen.
Mer tips om kodning och så kommer om ni så önskar!
Allting jag gör i bloggdesign och hemsideväg gör jag textbaserat. Då med hemsidor för att jag ännu inte hittat något underlättande program jag känner mig nöjd med men så småningom kanske det kommer.
Men gällande min design, så är det inte så mycket special kod som jag tycker.
En grundande mall via blogg.se har jag startat med och sedan utformat den efter vad jag själv velat ha det.
Header & Bilder - Bearbetar jag i Photoshop CS5. Finns att ladda hem som 30 dagars version här
Html-koder - Självlärd, vågar prova mig fram och man kan söka väldigt mycket på internet idag.
Två små kod-tips kan jag ge här:
Meny med dropdown - finns enkel guide hos designadinblogg.se - SE LÄNK
Denna meny går sedan att utforma utefter dina egna önskemål. Alltifrån färger, storlek, placering m.m.
Eget arkiv - För att få som jag:Här får du uppdatera koden för varje ny månad
Om du vill ha alla månader länkade på en gång:
Ändra så det handlar om rätt år och din blogg adress sen lägger du bara in den på önskat ställe i kodmallen.
Mer tips om kodning och så kommer om ni så önskar!
Tips om stilmall & kodmall
2007-12-02 @ 01:53:00
Stilmall - Här bestämmer man hur allting ska se ut med exempelvis textstilar, färg, storlek osv.
Kodmall - Här bestämmer man vart allting ska sitta och vad det ska innehålla.
Body ~ själva kroppen på designen - här lägger du in bakgrundsfärg/bild exempelvis
Wrapper ~ Ramen runt designen där headern, sidmenyn och inläggen ingår
Header ~ header kort och gott
Side ~ Sidmenyn där man oftast har profilbild, infotext, senaste inläggen, kategorier m.m.
Content ~ Ramen för alla inläggen du skriver på din blogg
a {color: #535353;} bestämmer färgen på alla överblivna länkar
a:hover {color: #a78d8d;} bestämmer färgen på alla överblivna länkar när du håller muspekaren över
h1 & h2 - bloggnamn och bloggbeskrivning som ligger i headern som standard
h3 - inläggsrubriker
.navheader - rubriker i menyn
.nav - övrigt text i menyn
.nav a & .nav a:hover - länkarna i menyn
/** Post's body text **/ - Inläggstexten
/**`Posted by´txt**/
.entrymeta{ - datum, tid, kommentarer, kategori m.m. efter inläggen
.entrymeta a & .entrymeta a:hover - länkarna (kategori, kommentarer m.m.)
.commentheader - Kommentarsrubriken ~ "Postat av:"
.commenttext - Själva kommentaren
.commentmeta - datum, tidpunkt, länk (url) från personen som kommenterat
.commentmeta a & .commentmeta a:hover - länkens utseende
.commentform ~ där man kommentaren skrivs
.separator - ligger oftast som en linje mellan varje inlägg
.default - styr "kommentarer" & "trackbacks" som syns när man tittar på ett enskilt inlägg
.subside - rss-ikonen
.image - alla bilder på din blogg, exempelvis så man har en bestämd ram runt varje bild
.thumbnail - de klickbara miniatyrerna
.form - alla form-koder, väger upp commentform och exempelvis sök-rutan
#profile - standardprofilen som finns på första sidan i menyn
#profile h4 - rubriken "Om" i profilen
<hr class="separator"> - koden i kodmallen som bestämmer vart separator ska ligga, går att använda i menyn för att få mellanrum. men man kan även ta bort denna kod i alla fyra kodmallar och då slippa linjen
.image & .thumbnail - i stilmallen välj här border: 0px; för att slippa någon ram runt bilder & miniatyrer
- Om man vill öka bredden width på side eller content måste även wrappern's width ökas
Ligger med hos content & side
float: left; ~ ska ligga till vänster
float: right; ~ ska ligga till höger
Texttrix:
text-transform: uppercase; ~ ger stora bokstäver/versaler
font-style: italic; ~ kursiv
font-weight: bold; ~ fetstilt om man ej vill ha fetstil skriver man bara (font-weight: normal;)
text-align: left / center / right ~ bestämmer om texten ska vara vänster-/ centrerad /högerjusterad
Border: border: 1px solid #000000; ger ram runt hela
Top ~ om den ska ligga ovanför (border-top:)
Left ~ om den ska ligga till vänster
Right ~ om den ska ligga till höger
Bottom ~ om den ska ligga under
1px - tjocklek
solid - rak linje, dotted - prickad linje, dashed - streckad linje
#000000 - önskad färg på linjen/linjerna
Padding/Margin: 0px; ger 0px i mellanrum åt alla håll
Padding: 0px 10px 5px 10px (top right bottom left)
margin - vid förflyttning av hela elementet
padding - innehållet i elementet
Snö på bloggen
2007-11-30 @ 01:07:00
I juletider kan det vara roligt att få lite snö på bloggen, ladda hem zip-filen och följ instruktionerna som står där.
Har haft problem med att få till koden i ett inlägg direkt så ni får nöja er med att behöva ladda hem filen :)
Ladda hem filen här:
