Hitta rätt i mallen

Blogger har rensat upp lite i sina mallar och till en viss del har det gjort det lättare för oss användare men jag känner att vissa delar kan behöva en liten förklaring också.

När man vet vad man letar efter känns det nya upplägget smart och genomtänkt, men är man inte så van vid kodmallar kan det nog kännas lite krångligt.

Så, vi på Fixas ska försöka förklara.

En websida idag är först uppbyggd runt ett html-skelett. Html-koden talar om för en webläsare vilka delar som ska finnas med och i vilken ordning de ska komma.
I html-koden finns också information om websidans namn, språk (som att vi vill kunna läsa å ä och ö) och allt det där andra som inte syns men som måste finnas med. När man lägger till ett script (som att det ska snöa på bloggen eller om vi vill lägga till någon annan funktion) är det uppe i <head> delen av mallen vi lägger det, i html-koden.

Men, en sida utan utseende blir ju bara en massa text och lite blå länkar så för att styla vår blogg behövs CSS. CSS står för Cascading Style Sheets vilket betyder ett antal sidor med regler för utseende med det som är viktigast längst ner. Nu översatte jag rätt vilt, men det är huvudpoängen.
Cascading betyder just det, det är den regel som står längst ner som vinner om det finns flera likadana alternativ. På så vis kan man alltid lägga till en ny regel även om man inte hittar just det man söker, så länge det du lägger till ligger längst ner i css'en är det din nya regel som vinner.

Okej. Då har vi kommit så långt.
Men vad är vad i Bloggers mallar då?
Först har vi de här knapparna. Här kan du välja att redigera en speciell widget (som du också kan göra i layoutläget) spara, förhandsgranska och också återställa om du känner att de ändringar du gjorde nu senast inte riktigt blev bra.
Återställ ändringar återställer det du gjorde nu senast innan du sparade, medans Återgå till mallstandardinställning för grässnittskomponent (puh) är en större återställning, något man oftast provar om något blivit fel på bloggen och man inte hittar någon lösning. Använder du den knappen bör du först spara dina speciella inställningar (egna koder etc) och widgets.




I själva kodmallen hittar du den här texten.
Först radar Blogger upp version och hur webläsare ska tyda koden. Sen står allt det där andra som inte syns för dina besökare men som är viktigt ändå.
För att spara plats och för att förenkla har Blogger valt att minimera vissa delar av kodmallen, men du öppnar lätt de delarna genom att klicka på den pil som står till vänster om det stycke du vill öppna.




Om du klickar på pilen på rad 10 <b:skin> etc hittar du din css-kod, den del där du bestämmer din bloggs utseende. Vissa delar finns under nästa rad, <b:template-skin>. Hittar du inte rätt först så kolla den delen också.
Här hittar du namn på din mall och allt annat du behöver.




Vad finns i resten av kodmallen då?
Jo, det är din bloggs html-kod, skelettet. Allt det som står där behövs för att bygga upp din sida.

En css-kod börjar med en punkt. eller ett # tecken och själva regeln omgärdas av {klammrar}
I html-koden börjar varje stycke med ett <-tecken och avslutas alltid med det också />

Vill du veta mer om hur html- och css-kod fungerar?
Håll utkik, jag tänkte skriva ett inlägg snart som förklarar vad som är vad och varför det fungerar som det gör.

Lycka till med din kodmall!
»»  läs vidare

AV Fixa-Anneli | 25 kommentarer |

Ta bort ram på bilder

Uppdaterat inlägg!
Jag har tidigare skrivit om att lägga till ramar på bilder i de mallar där det inte finns någon redan, men jag har sedan dess fått många frågor om att ta bort de befintliga ramarna.

Så här gör du om du har en av designmallarna Enkel, Häftig Ab eller Vattenstämpel.

Kodmallarna ser lite olika ut beroende på vilken av de tre mallarna du har och också vilken variant av just den mallen du har. Antingen får du radera i koden som finns eller så får du lägga till ett litet stycke.

Öppna kodmallen
Vi börjar med det första gemensamma steget.
Gå till din bloggs kodmall.



Först behöver du öppna den del där koden ev. finns eller ska läggas till. Blogger har valt att minimera vissa delar och du öppnar dem genom att klicka på rätt lilla pil i vänsterraden bredvid radnumren.
Du ska titta efter <b:skin>...</b:skin>




När du öppnat den här delen i mallen klickar du i kodrutan med din mus för att markera att det är här du vill söka och sen trycker du Ctrl och F på ditt tangentbord. Du får då fram en sökruta som hjälper dig att hitta rätt plats i mallen.
I sökrutan skriver du in  .post-body img  och trycker enter.
(sökrutan kan ligga på olika platser i olika webläsare, t.ex. i underkant på fönstret, men de fungerar lika ändå)

Om din mall innehåller den här koden kommer du att hitta ett par stycken som ser ut så här:




Hittar du koden är det dags att radera.

Det är bara det lilla .post-body img, som ska raderas i de två styckena. (Ev. har du bara ett stycke, då är det förstås bara i det du ska radera.)

Resultatet ska alltså se ut så här, med nästa punkt framme vid radkanten. Glöm inte att ta bort kommatecknet efter kodsnutten.



Förhandsgranska och om det stämmer - Spara!

I vissa varianter av mallarna finns inte något .post-body img stycke och då får man istället lägga till det. Om du inte hittar koden trots att du öppnat upp mallen och gjort en sökning kan du istället söka efter /* Posts och längst ner i det stycket (före /* Comments) lägga till följande kod.

.post-body img {
    background: none;
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    -goog-ms-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}



Den här koden tar bort den vita kanten och säger till webläsarna att inte visa någon skugga.

Som tidigare - förhandsgranska och spara om du är nöjd med resultatet.

Om du får något problem (jag har inte testat alla varianter av alla mallar) så kan du ställa en fråga här i kommentarerna eller ännu hellre på vårt nya forum, swechat.se
»»  läs vidare

AV Fixa-Anneli | 1 kommentarer |

Vinnaren är utsedd



Vi har utsett vinnaren i Swechats första medlemstävling!

Av tio deltagare drog vi en gästbloggare som vinner en Asus Memo Pad 7 och ett tillhörande trådlöst tangentbord så att hen kan blogga vidare både med stil och "on the go"

Innan jag avslöjar vem det blev vill jag tacka alla deltagare, det är inte lätt att gästblogga på en nästan obefolkad sida med en valfri rubrik! Ni gjorde det jättebra och jag hoppas att jag får höra mer av er framöver! Tack!

Tillbaka till vår Gästbloggstävling.
Vinnaren är...... 


Grattis, jag hoppas att du får nytta av din surfplatta!

Till er andra vill jag bara säga - håll ögonen öppna för det kommer fler medlemstävlingar framöver.


»»  läs vidare

AV Fixa-Anneli | 1 kommentarer |

Använd en responsiv (stretchig) bakgrund i din blogg

Vill du att din bakgrund ska vara lika stor i förhållande till skärmen oavsett vilken storlek dina läsare har på den? Alltid synas från kant till kant?

Då kan du lägga till en enkel liten kodsnutt i din bloggmall.

Du laddar upp din bakgrundsbild som vanligt i Malldesignern om du inte vill använda en bild som redan finns i deras lager förstås.
Laddar du själv upp en bild bör den vara åtminstone 1600 pixlar bred för att inte bli suddig på större skärmar, gärna lite större.


Välj först din bakgrund, sen tittar du på den lilla menyn bredvid din bild. Välj justering (vad som är bäst är beroende på hur din bild ser ut, men top center är normalt det man väljer) Välj att INTE rotera och kryssa ur Rulla med sida. Nu stannar din bild stilla även om man rullar ner och bilden upprepas inte varken åt sidan eller nedåt.

När du gjort det här och SPARAT ska du gå till din bloggs kodmall.


Här ska du först öppna stycket som innehåller din bloggs CSS-kod, den del där utseendet bestäms. Det gör du genom att klicka på den lilla pilen som finns vid sidan om <b:template-skin>...</b:template-skin> i den övre delen på mallen.
Då öppnar sig css-delen.


Här hittar du body där du ska lägga till din kod.



Var noga att inte radera något av det som redan står. Under min-width raden lägger du till följande:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;


Att det är flera rader med olika början men samma slut beror på att vi riktar oss till olika webläsare, alla blir tilltalade och läser koden. Men - den här koden gäller inte för äldre Internet Explorer-webläsare så de besökare som kommer till din blogg via en sån ser din bakgrund precis som den var innan du la till koden.

Visst var det enkelt!
»»  läs vidare

AV Fixa-Anneli | 2 kommentarer |

Lägg till en Chattbox

På Swechat har vi förutom forum, anslagstavla och gästblogg också ett par chattrum vilket är ett enkelt och roligt sätt att kommunicera. Det passar precis lika bra på en privat blogg!

Jag har tidigare skrivit om att lägga till en Chattbox/en Shoutbox på Fixabloggen men det var fyra år sedan och nu känns det som om det är dags att uppdatera sig lite med en ny variant på chatt, Smart Chatbox.

Du kan lägga till chatten i din bloggs sidokolumn eller så kan du göra ett större chattrum på en statisk (fast) sida och länka till den i din meny.

För att lägga till en Smart Chatbox behöver du först registrera dig på http://www.smartchatbox.com/

När du har gjort det får du börja designa din chattbox. Välj vidd efter din sidokolumns mått eller din inläggskolumns mått om du vill ha chatten på en statisk sida.Höjden kan du prova dig fram till vad du vill ha, det går utmärkt att ändra efteråt.
Fyll i din bloggs adress och välj en bildbakgrund eller en enfärgad.


Efter det väljer du namn, det som syns för andra användare och det du loggar in med.
Du är ju admin för din chatt och du kan radera inlägg och styra funktioner via det här kontot.


Sen är det dags att generera din chattbox-kod.


 Kopiera koden, du behöver den strax.

Nästa steg är att gå till din bloggs Layoutmall och välja att lägga till en Gadget.







Här väljer du en html-gadget.



Välj en rubrik om du vill ha det och klistra sen in din kod. Spara!


Nu kan du öppna din blogg och se din nya chattbox.

För att skapa en fast chattsida, ett chattrum, skapar du en ny sida och klistrar in din kod där. Var noga med att välja html-läget när du klistrar in koden.


Nå, nu när du har din nya chatt kan ändra lite i den. Först ser chatten ut något så här (beroende på vilken bakgrund du valt förstås)
Överst ser du hur många användare som är online.
Sen ser du en Log in eller Sign out-knapp, ditt namn, en skicka-knapp och en smileys-knapp.

I början står skicka-meddelandet på engelska, men det kan du ändra i din Dashboard (kontrollpanel) på SmartChatbox.com


Det finns några olika val man kan göra, men titta speciellt på nummer tre, sex och sju.
Vill du t.ex kunna chatta privat eller vill du bara ha en allmän chatt? (privat chatt är något som kostar extra, det ingår i premiumalternativet)
Vill du att dina gäster ska kunna välja ljud och annat?
Här rättar du också till ev höjd- eller viddproblem.


I den nedre delen av alternativmenyn finns bland annat Sticky Shout, du kan lägga till en fast hälsning till dina chattande gäster som inte försvinner ner i takt med att folk skriver nya meddelanden.


Den första veckan får du premiumfördelarna, t.ex. utan reklam, men sen går ditt medlemskap automatiskt över till Basic som är gratisalternativet om du inte väljer att uppgradera.
Eftersom jag testade den här chatten själv först nu tidigare i kväll kan jag inte säga exakt hur mycket reklamen stör, men det lär visa sig!

Vill du prova på en annan chatt kan du läsa mitt gamla inlägg här, den programvaran finns fortfarande aktiv och är ett bra alternativ det också.
»»  läs vidare

AV Fixa-Anneli | 4 kommentarer |

Uppgradera till Windows 10 med Media Creation Tool

Längtar du efter att få förnya din dator?
Kanske har du aldrig riktigt vant dig vid Windows 8 eller är du bara redo för ett nytt, uppdaterat och användbart operativsystem på din dator?

Tyvärr är det fler än jag som sett fram emot den 29 juli som var det datum uppgraderingen skulle finnas tillgänglig men som fått inse att vi behöver ha lite mer tålamod då Microsoft skickar ut de här uppgraderingarna gradvis över flera veckor eftersom det är så många som förhandsbokat.

Som tur är finns det en genväg för oss som är lite otåliga!
Vi kan ladda ner ett uppgraderingsverktyg direkt från Microsofts hemsida som hjälper oss att sätta igång med installationen nu direkt. Jag har redan uppgraderat min Windows 7 dator (vilket visserligen tog tid, men fungerade utmärkt) och nu sitter jag mitt i uppgraderingen med min Windows 8 dator, så jag kan intyga att det är enkelt och smärtfritt.

För att uppgradera behöver du ha en dator med antingen Windows 7 , 8 eller 8.1. Beroende på vilken version du har får du tillgång till motsvarande version Win 10


Det första du behöver kolla upp, om du inte redan vet, är om din dator kör med en 32-bitarsversion eller 64 bitars. Det gör du genom att gå till din dators Kontrollpanel och välja först System och säkerhet och sen System. Här hittar du systemtyp.




Nu när du vet kan du gå till Microsofts nedladdningssida och hämta uppgraderingsverktyget Media Creation Tool. Välj din version av operativssystem och klicka på Ladda ner verktyget nu.




När du hämtat hem filen är det dags att börja uppgraderingen. För att starta verktyget behöver du vara inloggad med ett Administratörskonto och jag brukar välja att öppna såna filer genom att högerklicka på dem och välja Kör som Administratör för säkerhets skull, då vet man att det blir rätt. 



Sen är det bara att låta Media Creation Tool jobba. Välj att installera på "den här datorn", det är nog det enda valet du behöver göra vad jag minns. 

Det tar lång tid och du behöver ha datorn uppkopplad mot internet för att kunna ladda hem operativsystemet, men du kan åtminstone i början fortsätta jobba vidare på din dator medan verktyget gör sitt i bakgrunden. På slutet behöver datorn starta om ett par gånger, då får du roa dig med något annat. 


När du gör en installation med det här verktyget finns alla dina filer, dokument och bilder kvar. Skrivbordet behåller sina ikoner och dina installerade program finns kvar, smidigt!

Om du föredrar att göra en så kallad ren installation, alltså att rensa ut datorn på allt och börja om från början med ett nytt operativsystem och en tom dator kan du läsa mer om hur man gör här.
Du behöver då ha tillgång till din produktnyckel, något man inte behöver om man gör den enklare uppgraderingen jag skrev om ovan.

Vad är då nytt i Windows 10?
Det överlåter jag åt Microsoft att förklara och visa, det är så mycket! Och du - uppgraderingen är GRATIS, åtminstone det första året, så passa på!

»»  läs vidare

AV Fixa-Anneli | 0 kommentarer |

Google webfonts - välj ditt eget teckensnitt

Blogger ger oss möjligheten att välja font (teckensnitt) på både rubriker och text via Malldesignern men kanske hittar du inte riktigt rätt utseende där och vill få lite mer att välja på. Då kan du med ett par enkla tillägg i din kodmall utnyttja Googles Webfonts, 698 olika teckensnitt!

Börja med att gå till sidan Google Web Fonts och välj bland alla de teckensnitt du hittar där. Du kan byta exempeltexten mot din egen genom att klicka i rutan jag markerat och skriva in den text du vill testa. Bra om du vill se hur just din rubrik skulle se ut.



När du hittar ett teckensnitt du gillar klickar du på den lilla rutan med en pil i, "Quick use".



Skrolla ner litegrann och där hittar du en flikruta med koder. Välj den första, Standard.

Kopiera hela raden (jag klippte av lite för att få ett bra skärmklipp) och gå sen till din bloggs kodmall.



Kodmallen hittar du här:


I början på din mall hittar du ett stycke som omringas av taggarna <head> kod </head>. 
Det är här du ska lägga in den kod du hämtade från fliken Standard i bilden ovan. Lägg den precis innan taggen slutar, som jag gjort, före </head>


När du har gjort det ska du lägga till ett tecken, ett snedstreck  /  för att din blogg ska godkänna koden. Det betyder att din font-kod ska se ut så här;

<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css' />

Nu stämmer ju inte teckensnittet i koden ovan, du väljer din egen variant, men det är det lilla snedtecknet på slutet du måste lägga till själv. Gör ett mellanslag mellan ' och / så stämmer det bra.

När du har kommit så långt kan du spara din mall.


Nu finns möjligheten att använda ditt nya teckensnitt, men för att det ska synas där du vill måste du lägga till det i koden på rätt ställen också.

För varje slags rubrik och också för brödtexten kan man välja font-familj i koden, "font-family".

.Header h1                        är din bloggrubrik.
.Header .description        är beskrivningen under rubriken
h3.post-title                      är inläggsrubrikerna
div.widget > h2                är rubrikerna på dina gadgets i din sidebar
h2                                      är också gadgetrubriker, det beror på vilken mall du har
.tabs-inner .widget li a    är länkarna i din meny
body                                  är den löpande brödtexten i din blogg, alltså den vanliga texten

Om du nu vill ändra teckensnitt i din bloggrubrik ska du i din kodmall klicka med musen och sen trycka Ctrl + F för att få fram en sökruta. I den sökrutan skriver du in .Header h1 

På Google Web Font sidan hämtar du namnet på din font och klistrar sen in den på rätt plats i din kodmall. Se till att också kopiera ev ' ' tecken som står runt fontens namn, de är viktiga.



Både header-koden och de andra finns på flera platser, men du ska välja den där font-namn finns angivna. Så här ser det ut:


Det finns två rader med font-namn, den första raden börjar med default="normal normal etc. Den ska du inte röra.
Den andra raden börjar med value="normal normal etc. Det är här vi ska lägga till vårt teckensnitt.
Det ska ligga före de andra, t.ex. Arial, Tahoma och liknande, direkt efter storleken på texten. Glöm inte att lägga till ett kommatecken efter ditt importerade teckensnitt och se till att få med ' ' tecknen runt namnet om det har såna. De håller ihop namn som innehåller flera ord.

Klicka på Förhandsgranska och spara om du är nöjd.

Vill du lägga till samma teckensnitt för flera rubrikalternativ går det bra att göra likadant med dem.

Det här ser kanske krångligt ut, men det är egentligen bara två steg och de ger dig möjlighet att verkligen personifiera din blogg!
Lycka till!


»»  läs vidare

AV Fixa-Anneli | 8 kommentarer |

Vinn en surfplatta med tangentbord

För att kicka igång vårt nya forum och gästblogg utlyser FixaDinBlogspot ett gästbloggslotteri!

Vi lottar ut en champagnefärgad Asus Memo Pad 7 surfplatta och ett tangentbord med plats att luta surfplattan mot medan man skriver (värde sammanlagt 2190:-) bland de 10 första medlemmar som skriver ett gästbloggsinlägg på vår sajt Swechat.se.

Blogga med stil medan du är på språng!

Asus Memo Pad 7 är en 7 tums, fyrkärnig, ljus- och färgstark platta med lång batteritid, upp till 11 timmar. Den har dessutom en snygg design med känsla av en kuvertväska.


Med ett trådlöst tangentbord skriver du enkelt dina blogginlägg om du inte hellre skriver direkt på skärmen. Luckan i den främre delen kan öppnas och användas som stöd för din surfplatta.



Så, hur vinner du då detta snygga blogg-paket?

Börja med att registrera dig som medlem på vår forumsajt Swechat.se.

Fyll i din profil (om du har en egen anonym blogg behöver du förstås inte avslöja vem du är här heller, välj bara en passande profilbild och skriv några rader om vem du är/vad din blogg handlar om)

Under länken Profil hittar du länken Skriv inlägg. Här skriver du ditt gästbloggsinlägg och länkar till din blogg. Tryck på Skicka när du är klar och vänta sen på att ditt inlägg ska bli godkänt!
(jag godkänner alla inlägg manuellt för att undvika rasistiska, våldsamma, hotfulla eller liknande poster.)

När 10 gästbloggare fått sina inlägg publicerade lottar vi ut en vinnare som presenteras både här och på Gästbloggen.


Reglerna är enkla.

Ditt inlägg måste utgå ifrån ett ämne, oavsett om det är barnuppfostran, astronomi, djur, drömresan eller dina värsta nojor. Självklart uppskattar vi humor!
(Det vi försöker undvika är rena "idag åkte jag till HM och handlade och sen fikade vi och sen åkte vi hem och åt makaroner"-inlägg.)

Ditt inlägg får inte vara hotfullt, rasistiskt, våldsamt eller uppmana till olagliga handlingar.

Ditt inlägg bör vara minst 140 ord långt, du kan fylla i din text här för att kolla.

För att ditt inlägg ska publiceras behöver du lägga till en profilbild och en liten text om dig själv i din profil, men bloggar du anonymt kan du välja en bild som föreställer något annat och din text behöver inte berätta vem du är i detalj förstås.

För att kunna vinna surfplattan behöver du förbli medlem under tävlingstiden för att kunna svara på ev. frågor från läsare till ditt inlägg och också för att jag ska kunna kontakta dig om du vinner.


Så, är du sugen på en alldeles ny, snygg surfplatta att blogga ifrån? Välkommen till oss på Swechat!


Lite mer nyfiken på Asus Memo Pad 7? Här får du ett smakprov. Låt dig bara inte luras av att videon fokuserar mest på utseendet, den här plattan har fått riktigt bra recensioner även funktionsmässigt.



Ps, om vi inte har fått ihop tio gästbloggare till den 7'e augusti drar vi vinnaren bland de som bidragit tills dess. Har tio skrivit innan det datumet drar vi då - så snart som möjligt,  vi får se vad som kommer först!

»»  läs vidare

AV Fixa-Anneli | 1 kommentarer |

Blockcitat/ Block Quote

Vad är blockcitat/block quote?

Ibland vill man markera en liten del i en text som lite viktigare eller som en början på en ny vändning i det man skriver. Då är ett blockcitat ett bra alternativ.

Det finns en block citat funktion i din redigerare i Blogspot men resultatet när du använder den är kanske inte så rolig, texten dras in litegrann men i övrigt förändras den inte. Det kan du ändra på med lite kod!

Du använder ett blockcitat genom att markera en del av din text och sen trycka på knappen för det i redigeraren, den här.



Normalt sett ser ett blockcitat ut så här:
"Det här är ett blockcitat utan någon kod som förändrar det!" 

Med lite förändring kan det se ut så här t.ex. Större, lutande (italic) text och med ett streck före som markerar att här finns något speciellt att titta på. Du kan självklart välja själv hur just dina blockcitat ska se ut. Kanske med en färgad bakgrund?

Men hur gör man då?

Jo, vi behöver lägga till lite kod i din kodmall. 

Gå till Redigera HTML under rubriken Mall i din adminpanel.



Klicka med din mus i kodrutan (för att markera att det är här du vill söka) och tryck sen Ctrl + F för att få fram en sökruta. Kopiera .post blockquote och klistra in det, tryck Enter.



Här hittar du koden för hur ditt blockcitat ska se ut. Just nu står det inte så mycket, men du kan lägga till det du vill. Du kan också radera raden med margin om du inte vill att texten ska ligga lite åt höger. (1 em är detsamma som storleken på din text, 2 em är två gånger höjden. Du kan byta ut siffran mot pixlar, px, om du vill )

Här nedan hittar du ett exempel på vad du kan göra. Välj själv vad du vill lägga till och ändra på siffror och färgkoder som det passar dig och din blogg.

Spar rubriken .post blockquote { och lägg bara till de rader du vill ha nedan. Var försiktig så att du inte raderar någon av klammrarna ( {} ) eller något ; tecken.

Du kan spara mina förklaringar, de ligger inom /* såna här tecken */ vilket gör att de inte syns ute i bloggen. Det är något webdesigners använder sig av för att spara anteckningar i sin kod, när man går tillbaka efter ett tag kan det vara bra med små anteckningar som påminner en om vad som är vad!

.post blockquote {
  font-size: 17px; /* storlek på texten */
  color: #a70000; /* färgkod */
  font-style: italic; /* lutande text, vill du ha tjockare bokstäver kan du använda "bold" istället */
  border-left: 3px solid #a70000; /* ett rött streck till vänster om ditt citat, byt färg om du vill */
  padding: 0 6px 6px; /* lite luft runt texten, framför allt användbart om du vill ha en bakgrundsfärg */
  background-color: #f4f4f4; /* en färgkod för bakgrundsfärg */
}


Vill du istället för ett streck ha en bild kan du lägga in en bildkod - som den här. Glöm inte att ändra på paddingen, du måste flytta din text så att den inte ligger över bilden (om du inte vill ha den så förstås...) Din bild måste du först ladda upp någonstans på internet så att den får en webadress.

background-image: url('http://din bildadress.png'); /* klistra in din bildadress mellan ' ' tecknen */
  background-repeat: no-repeat; /* bilden ska bara visas en gång, inte upprepas längs raden */
  padding-left: 30px; /* avståndet mellan bild och text */

Avsluta med att spara mallen



Lycka till!
»»  läs vidare

Mest lästa inlägg