Hur man lägger in en "Scroll to Top"-knapp på bloggen

Tänkte dela med mig av ett superenkelt bloggdesigntips.
Tycker själv att det är smidigt att ha en "tillbaka till toppen"-knapp på bloggen så att om man scrollat långt ner i arkivet kan komma upp till toppen igen genom ett knapptryck istället för att behöva scrolla. Sjukt enkelt är det att göra också!
 
Börja med att gå in på scrolltotop.com och välj en knapp du tycker är snygg. Kopiera texten i rutan bredvid och klista in den precis ovanför </body> i kodmallen och publicera. Klart!


 Några av knapparna man kan välja på

Hur man får en header större än 1000px

 
Jag har fått lite frågor om hur jag fått min header så stor så tänkte göra ett inlägg om hur jag gjort den.
Det första man behöver är en header - obviously. Min header har jag gjort i Photoshop genom att ta en bild och lägga text på den och det kan man ju göra i så gott som vilket bildprogram som helst. Min header är 1920px bred och 792px hög och är sparad som en PNG.
 
Efter det behöver man ladda upp bilden, vilket man inte kan göra på blogg.se då de har en maxgräns på 1000px. Då får man istället använda sig av en annan hemsida och jag har använt mig av tinypic.com och sedan kopierat bildens URL därifrån. 


 
Nu när vi har vår URL är det dags att lägga in den på bloggen genom att gå in på kodmallen (klicka på alt och sedan design för att komma till den gamla kodmallen på blogg.se). Leta upp <div id="header"> och ersätt den och dess innehåll med följande:

<div id="header">
<img src="http://DIN-URL-HÄR" id="full-screen-background-image">
</div>

Flytta sedan hela den koden så att den hamnar ovanför <div id="wrapper"> och gör sedan detta på arkiv-, kategori- och inläggssidan.




Efter det ska vi gå in i stilmallen och ändra lite. Sök upp #header och ersätt den och dess innehåll med följande:

#header {
margin-left: -10px;
margin-top: -10px;
margin-right: -10px;
}

#full-screen-background-image {
background: fixed;
margin: 0px;
padding: 0px;
width: 100%;
height: auto;
}

Ta även bort eventuella #headerimg 

Klart!

Hur jag delat upp mitt arkiv

Under min frågestund frågade Linii om jag kunde göra ett inlägg om hur jag delat upp arkivet i min meny och här är då mitt försök till att förklara det. Om något är otydligt är det bara att fråga!
 
 
 
Mitt arkiv ser alltså ut så här. Jag tycker personligen att det är enklare att ha det som en kompakt "tabell" än i en lista då det skulle göra min meny onödigt lång och jobbig att scrolla i.
 
 
 
För att göra detta behöver man gå in i kodmallen. Då jag inte alls är ett fan av blogg.ses nya sätt att koda på kan man ta sig till den gamla genom att klicka på "alt" på tangentbordet när man är på överblickssidan. Klicka sedan på "Design" i den svarta rutan som kommer upp och klicka sedan på "Redigera kodmallar".
 
 
 
Ovan är koden för mitt arkiv för år 2014. För någon som är insatt i webbdesign kanske det räcker med att visa detta, men för de som inte är det tänkte jag nedan skriva en förklaring för allt. Kan man ingenting om HTML skulle jag rekomendera att läsa på om grunderna på Webdesignskolan.
 
<div class="navheader">2014</div>
Detta är rubriken med årtalet ovanför varje del av arkivet. Den är kodad i en class som jag kallar för "navheader" och alla rubriker i min meny är kodad i den classen. Detta gör att alla ändringar jag gör på classen i stilmallen ändrar allt som är kodat med samma class, vilket gör att man slipper göra samma sak flera gånger.
 
<ul>
Detta är koden för hur man gör listor och den sista biten kod i mitt arkiv är </ul> för att visa att "här slutar min lista". Allt däremellan hamnar därför i en lista och utseendet på den listan har jag kodat i stilmallen.
 
<a class="arkiv" href="http://spontan.blogg.se/2014/january/">01</a>
Detta är hela koden för en månad i arkivet. För att detta ska fungera till din egen blogg så att du inte länkar till min ska din länk se ut enlig följande: 
 
<a href="http://bloggadress/årtal-i-siffor/månad-i-bokstäver-på-engelska/"></a>
 
Ovan är endast länken till den månaden i arkivet, men den är inte synlig om man inte ger den ett namn. Namnet skriver man framför </a> och där kan man väl i princip skriva vad som helst. Jag har däremot valt att döpa alla mina månader till "01", "02", "03" och så vidare för att alla ska vara lika långa. </a> är även det som avslutar den här biten kod.
 
 
 
Om ni var uppmärksamma så har jag även en class="arkiv" i min bit kod. Detta är för att jag i min stilmall kodat den här biten kod så att det blir ett mellanrum till nästa bit kod. Detta har jag gjort genom att lägga på en "padding-right: 10px;" i stilmallen.
 
Hela koden för en månad blir alltså:
 
<a class="namn-på-class" href="http://bloggadress/årtal-i-siffor/månad-i-bokstäver-på-engelska/">namn-på-länken</a>

Jag har fyra stycken sånna här kodbitar efter varandra, alltså fyra stycken månader. Efter det har jag lagt in en <br> för att hoppa ner en rad och lägga in fyra nya månader och fortsatt så. För att byta år har jag börjat om från börjat och lagt till en <div class="navheader"></div> för nästa årtal.
 
Glöm inte ändra det här på inlägg-, arkiv-, och kategorisidan också samt att ta bort den gamla koden för ditt arkiv!
 
 
 
Jag hoppas att detta inlägg var till någon hjälp men om det var helt oförståeligt får ni jättegärna kommentera och berätta det så ska jag försöka rätta till det som är otydligt, jag lovar att jag inte bits!