Att skapa en fin bloggmall kräver oftast kunskaper inom HTML. Och kanske det är det som hindrar dig från att testa!
Jag hör ofta att många bloggare tycker att Blogger (Blogspot) är tråkigt och att det inte går att skapa en fin bloggmall som ser professionell ut om man inte kan koda. Det är inte sant!
Blogger (Blogspot) ger dig verktyg att skapa fina mall utan någon kunskap i HTML!
Jag ska visa dig hur du kan göra en enkel men fin och stilren bloggmall med Bloggers verktyg och några enkla CSS koder. Men jag lovar, du klarar det!
Förbered dig för ett ganska långt inlägg. Jag hoppas att det inte skrämmer dig. Med all lång beskrivning och många bilder ville jag bara göra det så detaljerad som möjligt så att du kan lätt, utan problem, skapa din fina (kanske första) bloggmall. Hoppas du gör det :)
Om du inte vill eller inte orkar testa göra mallen själv men tycker om den så lägger jag upp för gratis nedladdning:
- Sissi - mall med rullgardinsmeny. Fil innehåller mall, videotutorial och sociala ikoner isåfall om du använder mer än de som jag redan lagt i mallen.
- Sissi 1 - utan rullgardinsmeny. Fil innehåller mall, videotutorial och sociala ikoner.
Här kan du se hur båda mall ser ut
Ladda ner Sissi eller Sissi 1
Jag valde att inte använda min signatur i den här mallen så om du laddar ner den, uppskatta snälla mitt arbete genom att lämna kommentar i kommentarfältet, berätta om mig på din blogg samt länka hit.
Nu när du har säkerhetskopia på din blogg kan vi börja. Om något går åt skogen så kan du alltid ladda upp säkerhetskopia och få tillbaka din "gamla version".
Tutorial är för mall Sissi 1 utan rullgardinsmeny på sidofältet (det ska jag visa dig i ett annat inlägg).
Tema
Först måste vi ändra tema till Essential Light
Vi stannar här i temadesigner för att nästan alla ändringar kommer vi att göra just här. Är du med?
Glöm inte klicka : " Använd i blogg" efter varje ändring!
Anpassning
Nu går vi till AVANCERAD och ställer alla värde : text, textstorlek, färg, länkar etc.
Innan vi börjar designa mallen så vill jag påpeka att alla värde (som font, storlek, bakgrundfärger etc) kan du anpassa till dina egna behov, smak, stil.
1. Avancerad → Sidtext
Font: Montserrat 15 pxFärg: #000000 (svart)
Klicka : " Använd i blogg"
2. Avancerad → Bakgrunder
Bakgrundshöjd : 500 px
Skugga : #ffffff (vit)
Brödtextens bakgr. : #ffffff (vit)
Inläggets bakgrund: Transparent
Bakgrundsoskärpa: 0px
Klicka : " Använd i blogg"
3. Avancerad → Länkar
Länkfärg : #000000
Färg på besökt länk: #fab7a8
Länkfärg när anv. håller musen över länken: #fab7a8
Klicka : " Använd i blogg"
4. Avancerad → Bloggrubrik
Font : Montserrat 45px
Färg: #000000,
Bakgrundsikoner: #000000
Bakgrundsikoner: #000000
Klicka : " Använd i blogg"
5. Avancerad → Fliktext
Font: Montserrat , 100%Textfärg: #000000
Vald färg: #fab7a8
Popup fönster textfärg : #000000
Popup fönster valda färg: #000000
Klicka : " Använd i blogg"
6. Avancerad → Inlägg
Inläggsrubrik: #000000
Font: Montserrat 24px , Bold (fet)
Inläggsrubrikflödets font: Montserrat 24px , B (fet)
Inläggtext: Montserrat 16 px
Inläggets bylinefärg: #fab7a8
Blockcitatets färg: #000000
Inläggsikonernas färg: #000000
Skuggning: Transparent
Klicka : " Använd i blogg"
7. Avancerad → Sök
Första och tredje fältet: #000000
Andra: Montserrat 16px
Klicka : " Använd i blogg"
8. Avancerad → Delning
Första och andra fältet : Transparent
Tredje: #fab7a8
Klicka : " Använd i blogg"
9. Avancerad → Populära Inlägg
Första fältet: Transparent
Andra och femte: #fab7a8
Klicka : " Använd i blogg"
Båda svarta - #000000
Sidofältet: 300 px (ska du använda kontaktformulär då måste du göra det lite bredare)
Klicka : " Använd i blogg"
10. Avancerad → Inläggsnavigering
Första fältet: #000000
Andra och tredje: #fab7a8
Klicka : " Använd i blogg"
11. Avancerad → Sidofält
Första & andra: Transparent
Tredje: #ffffff
Fjärde & femte: #000000
Sjätte: #fab7a8
Klicka : " Använd i blogg"
12. Avancerad → Skribentprofil
Alla tre : #000000
Klicka : " Använd i blogg"
13. Avancerad → Etiketter
Första: #ffffff
Andra: #000000
Klicka : " Använd i blogg"
14. Avancerad → Tillskrivning
Klicka : " Använd i blogg"
15. Avancerad → Bredder
Innehållets bredd: 1250 px
Nu går vi till sidrubrik.
Istället för rubrik och beskrivning använder jag bild. Du får välja själv om du ska ha rubrik med beskrivning eller om du ska ladda upp en bild med din logga, bild etc.
Du väljer själv vilket inlägg ska visas som utvalt.
Alla värden i koden kan du ändra (om du vill). Här har du beskrivning:
font-size - storlek på din rubrik. Mina 26px kan du ändra till mindre/större.
font-family - typsnitt för din rubrik. Här kan du ange typsnitt som passar dig ex.: Georgia, Times New Roman, Montserrat etc.
font-style - den här säger om din text /rubrik ska vara kursiv (italic) eller normal (normal).
font-weight - bestämmer tjockleken på texten. Det finns två alternativ att välja mellan:
letter-spacing - här anger du avståndet mellan tecken. Du kan ändra 1px till det valda värdet.
text-align - ställer in textjustering. Du kan välja:
border-bottom - lägger till en understrykning under rubriken
- dashed - streckad linje
- double - dubbel understreck (min 4px)
padding-bottom - lägger till ett avstånd mellan rubriken och underlinjen. Du kan ändra 10px till en annan storlek. Om du använde border-left, border-right, border-top eller border, då ska du använda: padding-left,padding-right,padding-top lub padding)
Innehållsmarginal: 367 px
Klicka : " Använd i blogg"
Sidor & Sidubrik
Nu måste du ha sidor som ska visas i meny.
Här kan du länka vad som helst : etiketter, sociala medier, din webshop etc eller sidor som du publicerade på bloggen t.ex "om mig", "samarbete" etc. Upp till dig.
Om du inte vet hur du ska göra det så hör av dig. Jag hjälper dig gärna.
Här kan du länka vad som helst : etiketter, sociala medier, din webshop etc eller sidor som du publicerade på bloggen t.ex "om mig", "samarbete" etc. Upp till dig.
Om du inte vet hur du ska göra det så hör av dig. Jag hjälper dig gärna.
Nu går vi till sidrubrik.
Istället för rubrik och beskrivning använder jag bild. Du får välja själv om du ska ha rubrik med beskrivning eller om du ska ladda upp en bild med din logga, bild etc.
Mallen ser nu så här ut
Featured Post
Tema Essential Light har fokus på utvald inlägg och exponerar den så effektiv. Men vi ska göra den här gadgeten lite snyggare med CSS kod.
Då måste vi gå igen till :
Tema → Anpassa → Avancerad → Lägg till CSS
Kopiera den här koden och klistra in i CSS fältet. Klicka sen " Använd i blogg"
Du väljer själv vilket inlägg ska visas som utvalt.
Rubrik, Citat och Sociala Medier
Nu är det dags att snygga till citat och rubrik i texten med CSS kod.1. Rubrik
Tema → Anpassa → Avancerad → Lägg till CSS
Kopiera den här koden och klistra in i CSS fältet. Klicka sen " Använd i blogg"Alla värden i koden kan du ändra (om du vill). Här har du beskrivning:
font-size - storlek på din rubrik. Mina 26px kan du ändra till mindre/större.
font-family - typsnitt för din rubrik. Här kan du ange typsnitt som passar dig ex.: Georgia, Times New Roman, Montserrat etc.
font-style - den här säger om din text /rubrik ska vara kursiv (italic) eller normal (normal).
font-weight - bestämmer tjockleken på texten. Det finns två alternativ att välja mellan:
- bold - om du ska ha fetstil på din rubrik
- normal - standardtjocklek (om den standardtjocklek du har innan du lägger till koden passar dig så ska du inte lägga till teckensnittsviktslinjen alls)
- UPPERCASE (alla bokstäver i rubrik är stora),
- lowercase (alla bokstäver i rubrik är små)
- Capitalize (alla första bokstäver är stora resten- små).
letter-spacing - här anger du avståndet mellan tecken. Du kan ändra 1px till det valda värdet.
text-align - ställer in textjustering. Du kan välja:
- left - vänsterjustering (standard)
- right - högerjustering
- center - centerjustering
- justify - den här rekommenderar jag inte för rubriker och undertexter
border-bottom - lägger till en understrykning under rubriken
- 1px - bestämmer linjens tjocklek, du kan ändra den som du vill (t.ex. 5x för att göra linjen tjock)
- solid - här definierar vi utseendet på linjen:
- solid - heldragen linje
- dotted - prickad linje- dashed - streckad linje
- double - dubbel understreck (min 4px)
- #000000 - färg (här kan du använda HEX kod till din färg. Alla HEX koder hittar du HÄR
Inlägg med rubrik i texten ser nu så här ut:
2. Citat
Tema → Anpassa → Avancerad → Lägg till CSS
Kopiera den här koden och klistra in i CSS fältet. Klicka sen " Använd i blogg"Nu ser citat så här ut:
Alla värden i koden kan du ändra (om du vill).
3.Sociala ikoner
Kopiera koden nedan. Ersätt varje # mellan två " " i koden med länkar till dina sociala medier.
Du kan ta bort/lägga till/byta ut en block. Då gäller det block från <a till </a> (se ovan)
Om du behöver ikoner till dina andra sociala medier så du kan ladda ner de HÄR
Om du behöver ikoner till dina andra sociala medier så du kan ladda ner de HÄR
<p>
<a href="#" target="_blank"><img src="https://1.bp.blogspot.com/-mEumtDVqH_g/XnX0R8OKW9I/AAAAAAAAAkg/A-ZOmnDA8SE63GW9GcME6BgCDsSWHPCIACLcBGAsYHQ/s1600/instagram.png" alt="konto Instagram" height="30" width="30" tittle="Följ Mig på Instagram" /></a>
<a href="#" target="_blank"><img src="https://1.bp.blogspot.com/-rEhX43J9lbY/XnX4FDVwa1I/AAAAAAAAAk0/GMPLC8OugDstvaADFMfMJWTGqZL-Hfh-gCLcBGAsYHQ/s1600/facebook.png" alt="konto Facebook" height="30" width="30" tittle="Följ Mig på Facebook" /></a>
<a href="#" target="_blank"><img src="https://1.bp.blogspot.com/-4Udn2iV3cs8/XnX4E2_q3mI/AAAAAAAAAks/aNGhp_pYOwkpysTzrs4KKTiJ6BOyYodvACLcBGAsYHQ/s1600/pinterest.png" alt="konto Pinterest" height="30" width="30" tittle="Följ Mig på Pinterest" /></a>
<a href="#" target="_blank"><img src="https://1.bp.blogspot.com/-fUXxeJ21L4g/XnX4E6VfiZI/AAAAAAAAAkw/-coQjXfcK-kPVv2RHpnrFkD5HKfMs1uBwCLcBGAsYHQ/s1600/you%2Btube.png" alt="konto YouTube" height="30" width="30" tittle="Följ Mig på You Tube" /></a>
</p>
Nu när du kopierade koden så går du till layout och lägger till en ny gadget - HTML/Java Script - i Sidofältet nere (kolla bild) och klistrar du in koden. Kom ihåg att byta varje # mot dina länkar, men ta inte bort de två " " , din länk ska stå mellan de.
Du kan testa lägga gadgeten i sidofältet uppe, kanske du tycker att det ser bättre ut. Upp till dig.
Du kan lägga till etiketter, bloggarkiv och vad du vill på sidofältet nere.
Du kan testa lägga gadgeten i sidofältet uppe, kanske du tycker att det ser bättre ut. Upp till dig.
Du kan lägga till etiketter, bloggarkiv och vad du vill på sidofältet nere.
Det var mycket information i ett inlägg men jag ville göra det så tydligt som möjligt och hoppas att du klarade det.
Lämna din kommentar i kommentarfältet hur det gick för dig.
