Bloggtips – navigeringsknapper/ faner på blogspot
Oppdatert:
Dersom du har en av malene fra malvelger (altså, om du har en av de som settes opp med det nye systemet) så kan du nå lage faner/navigeringsknapper uten å gå inn i koden. Les om det her.
Blogspot har også siden jeg skrev dette fått en mulighet som heter sider. Disse legges i en fanelinje på toppen. Denne funksjonen lager kun statiske sider, og må ikke forveksles med knapper som kan brukes for å samle en kategori.
Navigeringsknapper er knapper for navigering øverst på siden, vanligvis rett under navnet på bloggen, enkelte kaller det også faner. Hos meg fører de deg til forsiden, en side om bloggen, arkiv, og toppkategorier. Andre har knapper som fører til viktige sider, andre blogger de har, lenkelister mm.
Jeg synes navigeringsknapper er praktisk da de gjør det lettere å finne frem på bloggen. Jeg bruker de spesielt ofte når jeg er på besøk i en ny blogg, men også på kjente blogger dersom jeg er på jakt etter noe jeg har lest før eller jeg bare har lyst til å gå i dybden. Navigeringsknapper er ikke noe must, men de er en av mange muligheter man har.
Blogspot har ikke noe oppsett for dette, men det går fint å lage de selv om du ønsker.
Jeg beskriver i denne posten tre ulike måter å lage navigeringsknapper på, velg den som passer for deg og prøv deg frem.
Hvordan sette inn en gadget for knappene og plassere den rett sted:
Alle tre metodene for navigeringssknapper har til felles at man plasserer selve knappene med en gadget. Jeg går derfor gjennom dette først, og referer så til denne gjennomgangen under de ulike alternativene.

1. Gå til bloggens administrasjonsområde, og velg Utforming
2. Velg så Sideelement
3. Trykk der det står Legg til gadget. Velg den som heter HTML/JavaScript Skriv inn eller lim inn tekst som beskrevet i ulike alternativ.
4. Klikk og trekk den nye gadgeten (som nå heter HTML/JavaScript) fra 4. til rett under overskriften din. Du må nok fikle litt for å få den til å legge seg slik bildet viser, altså i full bredde, dra den litt frem og til bake over området.
5. Nå ligger den nye gadgeten her, og om du senere vil rette på innholdet så kan du gjøre det ved å trykke på redigerknappen.
6. Lagre – og gå og test!
Alternativ 1. Kun tekst – den enkleste
- Se Fikleblogg A for eksempel
* Punkt 1-3 forklart over. På pungt 3. i selve gadgeten skriver du inn nøkkelordene du ønsker å bruke.
* Marker de enkelte nøkkelordene og lag de om til lenker.
* Gjør punkt 4 og 6.
* Ferdig! Kom hit og skryt så vi også kan få se!
Ekstratips:
* Det er finest med litt mellomrom mellom de ulike navigasjonsknappene, men bloggen fjerner ekstra mellomrom. Du kan i stedet sette inn en rekke punktum, og så farge de i samme farge som bakgrunnen!
* Dersom du ønsker større skrift, eller sette farge på mellomrom eller annen formatering, så er det enkleste å åpne et nytt blogginnlegg, så skrive inn all teksten du ønsker og formater den der. Så kan du når du står i rediger-HTML vinduet på skrivevinduet kopiere (control-c) og lime inn (control-v) hele tekstbolken inn i Html-vinduet på gadgeten.
.
Alternativ 2. Med små bilder/knapper
- Se Fikleblogg B for eksempel
Du trenger noen knapper/små bilder som kan klikkes på. Disse kan du feks lage i photoscape eller photoshop eller gimp andre bilderedigeringsverktøy (enkelte kamera-program har mulighet for å beskjære og legge på tekst).
* Lag alle knappene du skal ha.
* Lag ett nytt innlegg (dette er kun en kladd, du publiserer det aldri)
* Last opp alle de små bildene, og sett de i rekkefølge (se her om å sette bilder ved siden av hverandre).
* Gå til Html, endre lenken slik at den ikke fører til bilde, men til den siden du ønsker, (se her om å endre bildet til en lenke)
* Kopier all teksten (mens du står i rediger HTML) og lim den inn i HTML vinduet på gadgeten på punkt tre i beskrivelsen over.
* Fullfør punkt 4 og 6.
* Ferdig! Kom hit og skryt så vi også kan få se!
.
Alternativ 3. Testbasert med fancy kode.
- Se Fikleblogg C for eksempel
Dette alternativet krever ikke noe bruk av bildeprogram, men du må inn i malen og lime inn og tilpasse en kode. Jeg har sett flere som har satt det opp slik, blant annet Turbolotte som var så snill å peke meg til der hun hadde funnet tipset, Blogger Buster (forøvrig en super plass for bloggtips). Dette tredje alternativet er basert på gjennomgangen til BloggerBusters
* Først skal du sette inn kode i malen. Denne koden bestemmer hvordan navigasjonsknappene blir seende ut. Gå til tilpass – Utforming – Rediger HTML Du er da i selve HTML koden til malen,
* Lim inn den blå teksten under rett før</b:skin>, det er nesten nederst i malen, og du finner det enklest med å bruke control-f også skrive inn </b:skin>.
a.navigation {
background: #EDEDED;
color: #2E5C00;
margin: 2px;
padding: 5px 35px 5px 35px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #CFCFCF;
text-decoration: none;
}
* Den koden du nå har limt inn kan du lett endre slik at du får de farger du ønsker, men jeg anbefaler at du lar det være som det er først, og heller endrer det når du er ferdig med alle leddene.
* Nå skal du sette inn selve navigasjonsknappene. Gjennomfør punkt 1-3 beskrevet først i posten. Under punkt 3. limer du inn denne koden:
1
<a class="navigation" href="NETTADRESSE">NØKKELORD</a>
Du må bytte ut deler av teksten over slik at det passer for din blogg.Pass på å ikke slette tegnet »
NETTADRESSE Byttes ut med adressen til den siden knappen skal føre til
NØKKELORD Byttes ut med det du vil det skal stå der folk skal trykke.
* Legg til så mange navigasjonsknapper du ønsker (kopier inn linjen over flere ganger etter hverandre).
* Gjennomfør punkt 4-6. Og gå og test.
* Nå kan du finpusse på den første koden du limte inn slik at det blir slik du vil ha det, se illustrasjon under for forslag. Koder for farger finner du hos Color Schemer Klikk til du finner den optimale fargen, og kopier ut koden fra feltet på venstre side

* Ferdig! Kom hit og skryt så vi også kan få se!
______________________________________
Så, der har du tre muligheter for å få navigasjonsknapper, skulle være noe for en hver smak!
______________________________________
Hvordan få knappene til å føre til sider/samlesider:
Navigasjonslinja skal ha nøkkelord, som fungerer som lenker opp mot ønsket nettside/kategori.
NETTADRESSE = adressen til den siden du ønsker at man skal komme til.
NØKKELORD = det som står på skjermen og som er det folk trykker på for å komme dit du vil. Du lager om nøkkelordene til lenker med nettadressen til det stedet du vil folk skal ende.
* Forsiden. De fleste blogger er slik at du kommer til forsiden om du trykker på bildet/teksten øverst, men ikke alle veit dette, så du kan om du ønsker lage en knapp som heter forsiden, og hvor du legger inn lenke til forsiden av bloggen din.
* Om bloggen Du kan nå lage sider på blogspot, jeg forklarer dette her. Når siden er postet så kopierer du ut adressen til siden, og lager en knapp du kaller (feks) Om bloggen med lenke til siden.
Du kan naturligvis også lage andre sider om bestemte tema og lenke inn i egne knapper på samme måten.
* Kategorier Kategorier heter etiketter på bloggspotsk. Her på bloggen finner du på topplinja feks kategorien Dyr. Klikker du på den kommer du til alle bloggposter jeg har som jeg har merket med kategorien dyr. Du kan få til det samme ved at du merker bloggpostene dine med etiketter (etiketter finner du på selv og fyller inn i hvitt felt rett under skrivevinduet for bloggposter). Når du har publisert en bloggpost (eller redigert en gammel) med en etikett, feks Dyr, så kan du klikke på etikettordet Dyr rett under bloggposten, da kommer alle dine bloggposter med etiketten Dyr opp. Kopier ut adressen som nå står i adressefeltet, og bruk denne til å lage en navigasjonsknapp som du kaller Dyr.
______________________________________
Lyst til å gjøre mere skøy med bloggen din? Se samlesiden for bloggtips












13 august 09
Fortell gjerne om du har navigeringslinje på din blogspotblogg, artig å se hvordan ulike har satt opp :)