B.log‎ > ‎Blogger‎ > ‎

inhoudstafel

De inhoudstafel zorgt voor een weergave van al je geposte berichten.
Die je dan kan filteren op titel, datum en label.


1) Ga naar het dashboard, klik op "indeling" en ga vervolgens naar "HTML opmaak".


2) Zoek er naar dit :

<b:section class='main' id='main' showaddelement='no'>


3) En vervang het door dit :

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>


4) Ga vervolgens naar het tabblad "pagina-elementen" en plaats er deze code op de plaats waar je je inhoudstafel wenst te laten verschijnen.  Door op "een gadget toevoegen" te klikken en vervolgens voor "HTML/JavaScript Toevoegen " te kiezen.  De beste plaats ervoor is in je breedste ruimte bovenaan je berichten, zodat het direct zichtbaar wordt wanneer je op de inhoudstafel link klikt.

<div id="toc"></div>


5) Voeg vervolgens een nieuw pagina-element  toe om te bepalen waar je de link die je inhoudstafel, en dus al je berichten weergeeft, zichtbaar maakt.  In dat nieuwe element voeg je dan deze code, vergeet wel niet om infocaris te veranderen door jouw bloglink.  Via de bijgeleverde CSS kan je de inhoudstafel verder helpen te integreren in je site door ze de gewenste wijzigingen mee te geven.

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://bloggerbuster.com/scripts/blogtoc.js"></script>
<script src="http://infocaris.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

<style type="text/css">
#toc {
  border: 0px solid #000000;
  background: #ffffff;
  padding: 5px;
  width:500px;
  margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
  background: #ffd595;
  color: #000000;
  padding-left: 5px;
  width:250px;
}
.toc-header-col2 {
  width:75px;
}
.toc-header-col3 {
  width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
  font-size:80%;
  text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
  font-size:80%;
  text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;
  font-size:70%;
}
</style>


6) De link naar het javascript bestand is overigens volledig in het Engels, als je liever in het Nederlands wenst dan moet je die link vervangen door dit :

http://isurf.libellus.be/infocaris/sjabloon/blogtoc.js

Indien de link niet meer zou werken, door onvoorziene omstandigheden, kan je steeds hier de code ophalen.


Bron : BeautifulBeta
Subpagina''s (1): blogtoc.js
Comments