onsdag 3. juni 2009

Installasjon og bruk av vis/skjul

I løpet av disse tre årene har jeg brukt et vis/skjul-system for å gjøre bloggen litt mer oversiktlig. Systemet lar deler av blogginnleggene være skjulte helt til man vil lese dem. Dette er en kort guide til å installere og bruke vis/skjul på en blogg. Begge delene av denne bruksanvisningen krever redigering av HTML, men jeg forutsetter ikke at du skal kunne det.

Installasjon:

For å installere dette, er man nødt til å endre litt på malen til bloggen. Det er ingen kompliserte endringer som trengs, så prosessen er ganske rett fram:

  1. Først må du inn på siden der du kan endre innstillingene til bloggen din. Dit kan du komme ved å trykke "Tilpass" på forsiden til bloggen, eller ved å trykke på "Innstillinger"/"Utforming" på oversiktssiden til kontoen din.
  2. En av hovedkategoriene er "Utforming". Gå inn dit, og så videre inn på underkategorien "Rediger HTML".
  3. Hvis du har gjort andre endringer på malen til bloggen din, kan det være lurt å ta en sikkerhetskopi. Det gjør du i så fall øverst på denne siden. Dersom det skulle bli behov for å gjenopprette den, er det bare å laste opp filen fra harddisken.
  4. Det neste steget er å redigere malen. Den kan du se i tekstboksen nedenfor. Nøyaktig hvordan den ser ut er avhengig av hvilket design du valgte for bloggen din, men oppbygningen vil alltid være den samme. Ikke så langt fra toppen burde det være en linje hvor det står bare "<head>". Lag et par linjers åpenrom under denne, og lim inn dette (se bilde):
    <script type="text/javascript">
    //<![CDATA[
    function visskjul(thisNode) {
        var node = thisNode.parentNode.parentNode
                     .getElementsByTagName('div')[1]
                     .getElementsByTagName('div')[0];
        if(node.style.display != 'inline') {
            node.style.display = 'inline';
            thisNode.innerHTML = '(Skjul)';
        } else {
            node.style.display = 'none';
            thisNode.innerHTML = '(Les videre)';
        }
    }
    function getElementsByClassName(className) {
        var elements = document.getElementsByTagName("*");
        var nodeList = new Array();
        var x = 0;
        
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].className == className) {
                nodeList[x] = elements[i];
                x++;
            }
        }
        
        return nodeList;
    }
    //]]>
    </script>
  5. Trykk lagre mal, og installasjonen er fullført. Hvis du gjorde alt riktig, burde det ikke gå an å se noen endring på selve bloggen.
(Les videre)
Bruk:

Etter koden er plassert i malen til bloggen, er det bare å bruke det i vei. Systemet ble egentlig laget for poster skrevet i HTML, men det burde også fungere på de skrevet med "rike" tekstfunksjoner. Det eneste som må passes på er å ikke begynne på et format (f.eks. fet eller høyrejustert skrift) innenfor et skjult område, og så avslutte det utenfor.

Når man skal bruke vis/skjul-type funksjonalitet i et innlegg, er det først bare å skrive det som normalt. Etterpå må passe på at man er i den modusen hvor man redigerer HTML. Den går man inn på ved å trykke "Rediger HTML" oppe til høyre når man skriver innlegget. Så må man finne ut hvilken del av teksten som skal skjules, og lime inn:

<a name="BESKR"></a>
<div><div style="margin: 5px;"><div><div style="display: none;">
før den, og
</div></div>
 <a href="#BESKR" onclick="visskjul(this);">(Les videre)</a>
</div></div>
etter den. Det er også nødvendig å bytte ut begge forekomstene av "BESKR" i HTML-kodene over med et annet ord som kjennetegner innholdet (siden dette ordet bare kan brukes til én skjult tekst). Legg merke til at dette kan ødelegge forhåndsvisningen av innlegget. Dette er derfor ett av de siste stegene man tar før man publiserer det.

(Les videre)

Håper dette var forståelig!

Ingen kommentarer: