En ny bloggmall för Blogger - DIY Tutorial

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:

1. Sissi - mall med rullgardinsmeny. Fil innehåller mall och sociala ikoner
2. Sissi 1 - utan rullgardinsmeny. Fil innehåller mall och sociala ikoner.

DEMO - SISSI  

DEMO - SISSI 1

LADDA NER SISSI  

LADDA NER 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.

VIKTIGT!

Innan du börjar göra minsta ändringar så kom ihåg att alltid säkerhetskopiera din blogg !!!

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.

I mallen använder jag :

Font: 

Montserrat

Färg: 

#fab7a8, #000000, #ffffff

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 px
Fä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 

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 font: Montserrat, 16px, I (kursiv)

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

Tredje och fjärde:  #000000

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

Båda svarta - #000000

Klicka : " Använd i blogg"

15. Avancerad → Bredder

Sidofältet: 300 px  (ska du använda kontaktformulär då måste du göra det lite bredare)

Innehållets bredd: 1250 px

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.

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"

#FeaturedPost1 h3 a:hover {color:#000!important;border-color:#000;}

#FeaturedPost1 h3 {important;border:1px solid #fff;position:center}

#FeaturedPost1 h3 a {border:1px solid #fff;color: #fff; font-size:35px; position: absolute;right: 0;left: 0px;margin: 0px auto;text-align: center;padding:50px;top: 300px;width: 60%;min-height: 25px;overflow: hidden;text-transform:uppercase;}

#FeaturedPost1 {height:800px;overflow:hidden;}

#FeaturedPost1 p {display:none!important;}

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"

.post-body h2 {
font-size:26px;
font-family:'Playfair Display';
font-style:italic;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1px;
text-align:center;
border-bottom:1px solid #000000;
padding-bottom:10px
}

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)

text-transform - bestämmer skiftlägeskänsligt. Du kan välja mellan:

• 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

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)

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"

blockquote {
background: #fcf0ed;
color: #000000;
position:relative;
font-size:90%;
padding:20px;
border-top: solid 10px #fab7a8;
}

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

---

<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.

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.