Tips en tutorials voor beginners en gevorderde bloggers

Readmore op je Blogger homepage

blogspotVeel bloggers hebben op hun homepage slechts een stukje van een post staan.

Als bezoekers de hele post willen lezen, moeten ze klikken op de titel van de post, of op een link die bijvoorbeeld getiteld is als ‘Lees meer’. Zo’n klein stukje van een post heet ‘excerpt’.

De post wordt dus als het ware in 2 stukken gehakt op de homepage.

Steffie, die blogt op Beauty Treasures wilde weten hoe ze deze ‘look’ kan maken op de homepage van haar Blogger blog.

Hiervoor zijn 4 methodes.

4 manieren om excerpts op de homepage van je Blogger blog te maken

  1. Je voegt per post een zogenoemde ‘jump break’ toe. In mijn post Ben je een klikker of een scroller leg ik uit hoe dat moet.
  2. Je kiest gewoon even een Blogger template waarbij dit is ingebouwd. Dat is het makkelijkst en het snelst.
  3. Je gebruikt een kant en klare code en plakt die in een html gadget.
  4. Je gaat handmatig in de code van je blogger blog wroeten. Lees hier hoe je dat moet doen.

Ik adviseer methodes 1 en 2, maar zal hier onder methode 3 uitleggen en demonstreren.

Blogspot homepage met hele post

Hier onder eerst even een voorbeeld van een Blogger blog waarbij de hele post zichtbaar is op de homepage.

blogger

En dan gaan we nu zorgen voor excerpts, oftewel dat alleen het eerste stuk van de post zichtbaar is.

Readmore op je Blogger homepage

1. Ga naar je Blogger Dashboard.

2.Klik op Layout

3. Kies Add a gadget

4.Kopieer deze code:

<script type='text/javascript'>
var bxA = {};
bxA.vSize = 250;
bxA.vRatio = 1.5;
bxA.vDot3 = '...';
bxA.vMore = 'More &raquo;';
bxA.vClass = 'bxAlink';
</script>

<style>.bxAlink{display:inline;clear:both;float:right;z-index:3;position:relative;margin:0px;padding:3px 4px;text-decoration:none !important;font-size:0.9em;line-height:1em;border:1px solid #336699;background-color:#B0C4DE;}.bxAlink:hover,.bxAlink:active{  background-color:#FFD363;border:2px solid #D2B48C;padding:2px 3px;}</style>

<script type='text/javascript'>function bxAE(a){return document.getElementById(a)}function bxAC(c,a,b){var d,t,r,s,l,f,i,j,x;d=(a)?a:document;t=(b)?b:'*';r=[];s=d.getElementsByTagName(t);l=s.length;f=' '+c+' ';for(i=0,j=0;i<l;i++){x=' '+s[i].className+' ';if(x.indexOf(f)!=-1){r[j++]=s[i]}}return r}function bxAH(h){var t=h;t=t.replace(/<script(.*?)>((.|\n)*?)(<\/script>)/gi,' ');t=t.replace(/<.*?>/g,' ');t=t.replace(/\s/g,' ');t=t.replace(/[ ]{2,}/g,' ');t=t.substring(1);return t}function bxAS(e,h){var a,s,i,q,b,c,d,f,g,x;b=[];c=e.innerHTML;d=bxAH(c);f=bxA.vRatio;g=bxAC('jump-link',e,'div');if(g.length>0){return}x=c.indexOf('[bxA');if(x>-1){a=c.substring(0,x);s=bxAH(a);f=0.1;if((d.length-s.length)==(c.indexOf(']',x)-x+2)){return}}else{s=d.substring(0,bxA.vSize);b=s.split(' ');for(i=0;i<b.length;i++){q=c.indexOf(b[i],q)}a=c.substring(0,q)}if((d.length)>(s.length*f)){e.innerHTML=a+bxA.vDot3+'<\/textarea>';e.innerHTML='
<div style="display:inline;">'+e.innerHTML+'<\/div><a class="'+bxA.vClass+'" href="'+h+'"\/>'+bxA.vMore+'<\/a>
<div style="clear:both"\/>'}}function bxAI(){var e,p,l1,l2,i,a,h,ih,b;if(arguments.callee.done){return}arguments.callee.done=true;e=bxAC('post-body',bxAE('main'),'div');p=bxAC('post',bxAE('main'),'div');l1=p.length;l2=e.length;for(i=0;i<l1;i++){if(l2>1){a=p[i].getElementsByTagName('a');h=a[1].getAttribute('href');bxAS(e[i],h)}ih=e[i].innerHTML;b=ih.indexOf('[bxA');if(b>-1){e[i].innerHTML=ih.replace(ih.substring(b,ih.indexOf(']',b)+1),'')}}}if(document.addEventListener){document.addEventListener('DOMContentLoaded',bxAI,false)}(function(){/*@cc_on try{document.body.doScroll('up');return bxAI()}catch(e){}/*@if(false)@*/if(/loaded|complete/.test(document.readyState)){return bxAI()}/*@end@*/if(!bxAI.done)setTimeout(arguments.callee,30)})();if(window.addEventListener){window.addEventListener('load',bxAI,false)}else if(window.attachEvent){window.attachEvent('onload',bxAI)}</script>

5.Plak die in het gadget
6.Klik op ‘Save’

Kijk nu naar je homepage en bewonder het resultaat.

Als je niet tevreden bent over de ‘readmore’ button kun je dit veranderen in de code bij de kleurcodes. Die beginnen met #.

Blogger homepage met excerpts

En dan krijg je zoiets is als dit:

blogger

Conclusie over excerpts op je Blogger blog

Er zijn inmiddels veel templates waarbij is ingebouwd dat je posts als excerpts verschijnen op de homepage van je blog. Als je excerpts wilt, is de simpelste methode een template te kiezen dat dit automatisch voor je doet. En anders is de simpelste manier om het handmatig te doen.

One Response to Readmore op je Blogger homepage

  1. Nog een voordeel: Als je excerpts gebruikt gaan je bezoekersaantallen waarschijnlijk omhoog.

    Mensen die jouw blog volgen via Bloglovin of via de feed kunnen zonder excerpts de hele blogpost lezen en hoeven daardoor niet perse meer jouw blog te bezoeken. Met excerpts bezoeken ze jouw blog wel en daardoor gaan de bezoekersaantallen omhoog.

Leave a reply