Blog inklapbare berichten

Blog – Inklapbare berichten

blogger inklapbare berichtenBekijk in het EngelsDe vorige keer hebben we de functies van blogger kort bekeken en beschreven. Als je je blog toen hebt aangemaakt heb je waarschijnlijk ook even een bericht geschreven en geupload naar de blogger servers. Het zal je dan ook zeker niet zijn ontgaan dat het bericht in zijn geheel op de voorpagina terecht is gekomen. Vooral als je langere berichten op je blog zet kan dit erg onoverzichtelijk worden, en is dit dus verre van ideaal. In dit bericht leg ik simpel en stapsgewijs uit hoe je een ‘Lees meer’ knop aan je ingeklapte samenvattingen toevoegt, zodat je voorpagina net en overzichtelijk blijft.

Zorg dat die berichten kleiner worden!

Als je voornamelijk lange berichten met veel beeldmateriaal op je blog zet dan valt het al snel op dat je voorpagina eigenlijk onbruikbaar word. Een simpele oplossing hiervoor is het gebruik van een ‘Lees meer’ knop. Dit zorgt ervoor dat je hoofdpagina slechts de eerste alinea, of hoeveel jij wilt weergeeft en dat daaronder een lees meer knop word weergegeven die de lezer naar het gehele bericht brengt. Dit zorgt er ook nog eens voor dat je meer pagina weergaves krijgt omdat mensen ipv één nu twee pagina’s bekijken. Om dit uit te voeren moeten we wel een beetje gaan editten in de HTML code. Geen paniek, dit is makkelijker dan je zou denken.

blogger html templateDe eerste stap die je moet nemen is het backuppen van je huidige sjabloon. Log in bij blogger.com en ga naar de slablonen bladzijde. Klik hier op back-up/terugzetten sjabloon rechtsboven in de pagina. Sla het bestand ergens op waar je het niet kwijt raakt. Ik zelf gebruik daar mijn blogbackup map voor. Zodra je dit hebt gedaan kunnen we verder. We gaan blogger nu vertellen hoe hij jouw berichten moet weergeven. Dit gaan we doen door middel van de sjablonen pagina. Hier klik je op HTML bewerken. Zorg ervoor dat je het vakje ‘widget-sjablonen uitvouwen’ altijd is aangevinkt, zodat je geen code mist.

We gaan nu op zoek naar de </head> tag. Deze is gemakkelijk te vinden via de CTRL-F zoekfunctie.

Zodra je deze gevonden hebt ga je eerst na of er een ]]></b:skin> tag in de buurt is. Is dit het geval, dan moet je de volgende code tussen de </head> tag en de ]]></b:skin> tag in zetten.

Staat de bovenstaande code niet in je document dan kun je de onderstaande code simpelweg boven de </head> tag zetten:

<style>
 <b:if cond='data:blog.pageType == "item"'> 
 span.fullpost {display:inline;}
 <b:else/>
 span.fullpost {display:none;} 
 </b:if>
 </style>

Je kunt het aangepaste sjabloon nu opslaan. Het is verstandig om even de hoofdpagina te bekijken van je blog, om te zien of er iets veranderd is. Dit zou niet het geval moeten zijn. Mocht er wel iets veranderd zijn dan is er iets fout gegaan. Je kan de code nogmaals bekijken om te zien of er iets fout is gegaan, of gewoonweg je vorige back up opnieuw laden.

We gaan nu nogmaals terug naar de HTML code van je sjabloon. We gaan nu zoeken naar <data:post.body/.

De volgende code moet direct na voorgaande code geplakt worden:

<b:if cond='data:blog.pageType != "item"'>
 <a expr:href='data:post.url' target='_blank'>Lees meer!<a>
 </b:if>

Je kunt natuurlijk typen wat je wilt in plaats van ‘Lees meer’. Sla je sjabloon nogmaals op. We zijn bijna klaar.

De laatste stap is het toevoegen van een lijn code in je blog berichten zelf om blogger te laten weten waar je bericht precies in tweeën gehakt moet worden. Je kunt dit stuk code standaard toevoegen aan je berichten sjabloon, maar in de praktijk heeft dit vaak een averechts effect en worden berichten op een vreemde manier verdeeld. Ik heb daarom gewoon de nodige code opgeslagen in een tekstbestandje, of je kunt deze gewoon elke keer weer hier vinden.

Ik dwaal af, tijd om ter zake te komen. Als je eenmaal een bericht hebt getypt kun je daarna de HTML code van dat bericht aanpassen.  Hier ga je op zoek naar het laatste stuk tekst dat je wil weergeven op de hoofdpagina. Direct daarna plak je het volgende:

<span class=”fullpost”>

Zorg wel dat je dit pas na de sluittags van de tekst zet. Een voorbeeldje:

<span lang="EN-US">Once you have come up with a good topic to start a blog about, it is time to set up a basic blog. Now you may think you need to create a website from scratch or that you will need to rent server space or something, but luckily there are lots of website who accommodate starting blogger. Learn how to set up your free blog in this post.<o:p></o:p></span></div>
<div>

Als dit de code is van je eerste stuk tekst dan wil je dat hier onder ergens de fullpost tag te staan komt. Je wil echter niet de sluitingstags scheiden van hun bijhorden tekst. Je wil de tag ergens achter de zin learn how to set up your blog in this post zetten, maar daar horen sluit tags bij. Elke tag die begint met een / wordt gezien als een sluit tag. Daarom moet je in dit voorbeeld de fullpost tag zetten na de laatste sluit tag, en dat is </div>. De uiteindelijke code komt er dan zo uit te zien:

blogger. Learn how to set up your free blog in this post.<o:p></o:p></span></div>
<span>
<div>

Nu zijn we echt bijna klaar. Het laatste wat je nog moet doen is blogger laten weten waar je fullpost eindigt. Dit doe je door helemaal onder aan de HTML code een </span> tag toe te voegen. Gewoon helemaal naar beneden scrollen, achter de laatste code eenmaal op enter drukken en </span> typen. Dat was het, je bent klaar!

Tip: zorg dat je de fullpost tags en de /span tags als laatste toevoegt. Dit minimaliseert de kans dat blogger zelf dingen gaat veranderen in de code. Maak dus eerst de tekst op zoals jij wilt, en voeg daarna deze tags toe.

Succes!

0 comments