lørdag 6. mars 2010

SIDER! + hvordan lage navbar

ENDELIG HAR BLOGGER LAGT TIL 'FASTE SIDER'!
(finn dem ved siden av 'Rediger innlegg'). Faste sider er som navnet sier faste sider med informasjon, som "Om meg", "Linker", og en post i bloggfeeden.
Derfør kan man klikke på Start igjen og igjen og igjen og på Start.

Blogger.com, gratis og Google-eid, er som kjent den ikke-bezte-bloggeplattformen, med klumpete muligheter for å tilpasse bloggen (Jeg har aldri brukt wordpress, men wordpress virker mye friere, og har hatt 'SIDER' lenge).

Tidligere måtte jeg benytte meg av urkoden for å få til en slik navbar og tilhørende undersider. Ønsker man noe på bloggen sin her.blogspot.com, noe annet som er mer innviklet enn den elendige arkiveringa som ikke klarer sortere etter årstid, må man ty til urkode. For å få til fenomener som 'LabelCloud' (innført nå!), 'Beslektede innlegg', 'Les mer'-linker (også innført nå..), 'Siste kommentarer', må man først oversette tankene sine og finne dem igjen på engelsk, lete etter hjelp, såpe seg inn med html-kode og lime det inn i bloggens kildekode. Kanskje virker det åsså!

Jeg hadde et behov for å vise linker øverst i bloggen, omtrent som sider-funksjonen gjør nå. Skal herunder vise hva slags elendighet man måtte gjennomføre. Målet med denne koden er å lage en vannrett liste over hoveddeln og under overskriften, en liste som fungerer som en 'menubar', et 'navigasjonsfelt' eller 'navbar'.

1. Kom deg til html-redigeringsvinduet (Tilpass - Utforming - Rediger HTML).
2. Last ned malen din som backup før du gjør noe mer.
3. Merk av 'Vis utvidede widgeter', og lim følgende, fra og med #newnavbar, inn i kildekoden under /*Header*/ - for å finne header, trykk på ctrl+F

/* Title & Description
----------------------------------------------- */
/* Header */
#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:6px;
margin:4px;
border:0px solid;
}

#newnavbar li a{
color:#dfffed;
}

#newnavbar li a:visited {
color: #57E964;
}

#newnavbar li a:hover {
color: #F88017;
background: #ffff66;
}


De kursiverte avsnittene angir farge og stil til henholdsvis linker, besøkte linker og hover-linker (når pekeren ligger over linken). Fjern dem om du vil linkene skal ha samme farge som ellers på bloggen din.

4. I oppsettsvinduet, legg til et html/jss-kodefelt og lim inn følgende


<div class="widget-content">
<div id="newnavbar">
<ul>
<li><a href="http://treshoe.blogspot.com">den pene bloggen</a></li>
<li>Risgraut</li>
<li><a href="http://www.blogger.com/profile/03541071420279870099">Om bloggeren</a></li>
</ul>
</div>
</div>


  • < ul > betegner begynnelsen på listen, < /ul> slutten. 
  • Hver < li> er ett punkt, og avsluttes på samme vis med < /li>. 
  • For å lage en link, bruker man <a>. href="nettadresse", og det som står mellom > og < /a> blir det som kommer til syne.  
Nå skulle det vise seg at det ikke var så elendig likevel, for med denne nye side-funksjonen går det ikke an å legge til egne linker i menyen, da må man bruke denne metoden ^^

TAKK OG RIS, ENDELIG

Ingen kommentarer:

Legg inn en kommentar

Skriv i vei!