Hoe print je een weblog

Met onze open dag moesten we ook nadenken over hoe we een beetje handzaam mensen van informatie voorzien over datgene wat ze willen weten. Ik had al eerder een presentatie gemaakt en die kunnen we mooi gaan gebruiken om een beknopt overzicht te geven. Het leek me echter ook aardig om per onderwerp wat materiaal te hebben. En eigenlijk heeft onze weblog al die informatie en zijn de labels die er aan hangen de onderwerpen die interessant zijn. Daarom wilden we de weblog printen en daar dan boekjes van maken. Nu zijn er dus bedrijfjes die dat inderdaad voor je kunnen doen. Marcel heeft echter ook ontdekt hoe je dat zelf kunt doen. Het enige wat hiervoor nodig is, is een stukje CSS, dat je toevoegt aan je blog-sjabloon.

Dit stukje CSS zorgt er voor dat allerlei delen van je webpagina niet afgedrukt worden, zoals de kolom met labels en historie, reclame, titelbalken, voetnoten, bladerknoppen.

CSS is een manier om het uiterlijk van een webpagina afzonderlijk te definiëren van de inhoud. Met aanpassingen aan de CSS kun je dus dezelfde tekst verschillend uit laten zien, afhankelijk van allerlei omstandigheden. Een handige "selector" is daarbij @media, waarmee je het uiterlijk voor "print" anders kunt laten zijn dan voor "screen" of "handheld".

Ga in je Blogger blog naar Sjabloon, Aanpassen, Geavanceerd en dan CSS toevoegen (staat onderaan de lijst).
Voeg daar de volgende tekst toe:
@media print, screen
{
.header, #footer-3, .date-header, #blog-pager, #navbar, .noprint, .cap-top, .inline-ad, .column-right-outer, .fauxborder-right, .post-footer, #HTML1, .blog-feeds, .feed-links {display: none;}
.column-right-outer {width: 0}
.main-inner .fauxcolumn-right-outer {width: 0}
.columns {padding-right: 0px}
.content-outer {width: 95%}
}
Als het goed is, zie je in het voorbeeldvenster daaronder dat alles onzichtbaar is, behalve de tekst van je berichten. Als je tevreden bent, moet je @media print, screen veranderen in @media print.

Om het even kort toe te lichten:
@media zorgt er voor dat het blok erachter (tussen accolades) van toepassing is op "print", "screen" of iets anders.
Vervolgens kun je met selectors als .header stukken html van een bepaalde class selecteren. Als je in de brontekst van een webpagina kijkt, herken je ze aan class="header". Ook kunnen delen van de brontekst een id hebben. Deze zijn te selecteren met bijv. #footer-3.
Achter al deze selectors staat {display: none;}, oftewel: verbergen.
De rest van de CSS-code is bedoeld om de tekst bladvullend te maken.

Omdat in Blogger-sjablonen nog heel veel meer CSS-code staat, gaat deze soms vóór op de bovenstaande code. Dit is te zien als je in Google Chrome de Element Inspector aan zet. Je ziet dan bijvoorbeeld dat het stukje .columns {padding-right: 0px} niet tot uitdrukking komt. Het enige wat daar aan te doen is, is een kleine aanpassing aan de sjabloon zelf.
Ga hiervoor naar Sjabloon, HTML bewerken, negeer de waarschuwing ("verdergaan") en ga in de brontekst op zoek naar ".columns" met daaronder {padding-right:...".
Je wilt bereiken dat dit stukje, dus de styling die van toepassing is voor de class .columns alleen actief is voor @media screen. Bij mij ziet het stukje er na aanpassing zo uit: (let op open- en sluit-accolades)
@media screen {
      .main-inner .columns {
        padding-left: $(main.column.left.width);
        padding-right: $(main.column.right.width);
      }
}

Na al deze aanpassingen kun je het resultaat zien door in je browser op de menu-optie "Afdrukken" te klikken. Om het jezelf en je bezoekers makkelijker te maken, kun je ook een link toevoegen in het sjabloon op een plaats naar keuze. De in te voegen code is:

<a href="javascript:window.print()">Afdrukken</a>

Het is wel even puzzelen waar dit precies in het sjabloon moet komen. Succes.