torsdag 24 februari 2022

Hur jag designar min blogg med HTML/CSS

Jag är långt ifrån en expert på att designa blogglayouter men i och med att jag har bloggat från och till i över 10 år så har jag lärt mig en del grunder och är välbekant med Blogger/Blogspot. Att göra mindre ändringar i layouten behöver inte vara svårt även om du inte är kunnig när det gäller kodning. Här delar jag med mig av hur jag har gjort. Hoppas att det hjälper er!

På Bloggers plattform kan du lägga in koder på tre olika sätt, antingen genom att gå in i din bloggmall via HTML, genom att gå in i Temadesignern eller genom gadgets. Vilket av metoderna du behöver använda beror på vad det är för kod du vill använda dig av och var du vill placera den.

Hur du kommer in i din HTML-bloggmall:

Gå in på "Tema", tryck på pilen i den orange "Anpassa"-knappen och välj "Redigera HTML". Här ser du hur hela din blogg är uppbyggd med hjälp av kodning. Detta är vad man kan kalla bloggens "skelett".

Hur du kodar i temadesignern:

Tryck på "Layout". Tryck på länken i blått högst upp på sidan där det står "Temadesignern". När du är inne i temadesignern har du ett antal knappar till vänster, tryck på den där det står "Avancerat". I rullmenyn längst upp väljer du "Lägg till CSS". Det här är stället du ska klistra in din kod. Du kan direkt se om den fungerar i förhandsgranskaren.

Hur du lägger in en kod i gadgets:

Gå in i "Layout" och tryck på "Lägg till gadget" där du önskar att använda din kod. Välj "HTML/JavaScript", klistra in din kod och spara.

Här är Google din bästa vän! Majoriteten av den kodning jag gjort på min blogg har jag hittat genom att googla. Svårigheten med detta när du är ny på kodning är att veta vad du ska söka efter på engelska. Tyvärr så finns det inte mycket hjälp att hitta på svenska. Blogger är inte heller den vanligaste bloggportalen idag vilket också kan påverka mängden koder du kan hitta som synkar med Bloggers plattform.

Något jag har gjort i min layout är t.ex. att centrera min sidfot - den sista snutten i mina bloggposter där jag har delningslänkar, publiceringstid och den länk ni trycker på om ni vill kommentera ett inlägg. För att hitta en kod för det här ändamålet har jag behövt googla på "how to center footer in blog post in Blogger". Footer är alltså benämningen för 'sidfot' på engelska. Det är viktigt att inte glömma "in blog post" vid sökning för denna kod, annars kan det hända att du hittar en kod för själva bloggens sidfot (där jag har min avdelning "Vem är Sofia?") och inte för den delen som avslutar dina bloggposter.


Är du osäker på vad de olika delarna din blogg består av heter så rekommenderar jag först och främst att gå in i "Layout". Här ser du visuellt hur din blogg är indelad i olika boxar, så kallade "gadgets", och vad alla dessa boxar heter. Överst har du t.ex. en box som heter "navbar", under den en box som heter "header" osv.


Jag kan så klart inte avsluta det här inlägget utan att länka och ge cred till några källor som har hjälpt mig en hel del när det gäller kodningen av min egen blogg!


Tjejen bakom detta konto heter Elaine och hon är verkligen ett fullblodsproffs när det gäller kodning! Jag har varit i kontakt med Elaine personligen via hennes Facebook-sida och hon är sjukt gullig och hjälpsam även privat. På hennes hemsida kan ni hitta massor av kodning som är anpassat för Blogger (och andra bloggplattformar också för den delen).


Detta har varit min go to-sida sedan första gången jag tog modet till mig att pilla i kodningen på min blogg. Anneli har verkligen gjort ett hästjobb och hjälpt så många under åren. Tyvärr är hennes blogg inte längre aktiv men det gör det inte mindre värt att kika in. Notera dock att en del koder inte längre fungerar. Detta beror antingen på att de inte synkar med Bloggers nyare teman eller för att koden helt enkelt är för gammal (även världen inom kodning går framåt och utvecklas).

_________________________________________________________________


Jag hoppas att ni känner er hjälpta av detta inlägg. Har ni några frågor eller funderingar är det bara att kommentera så ska jag göra mitt bästa för att vägleda er rätt!

Inga kommentarer:

Skicka en kommentar