Blogger Labels weergeven als Tags

De Labels die je aan elk bericht toevoegd kan je met behulp van het Labels widget tonen op je Blogpagina. Nadeel van dit widget is, is dat je alleen maar een opsomming van de Labels krijg met het aantal keer dat het Label gebruikt is in je Blog, terwijl tegenwoordig veel gebruik wordt gemaakt van een Tag overzicht.

Op de website van phydeaux3 staat een voorbeeld van zo'n Tag overzicht en hij (of zij?) geeft ook nog prijs hoe je zelf dit overzicht kan maken. Ik ben zo vrij geweest om een vertaalde versie op mijn Blog te zetten.

Let op: je moet gebruik maken van de Layout Templates om dit te laten werken en je dient, voordat je begint, het Label widget toegevoegd te hebben op je Blogpagina
Stappen

1. Maak een backup van je huidige HTML pagina, zodat je nog altijd terug kan indien het niet lukt.
   - Ga naar je Blogger dashboard en klik op Indeling en daarna op HTML bewerken
   - Selecteer alle tekst in het vak onder Sjabloon bewerken en kopieer deze naar een bestand op je lokale PC en bewaar het bestand
2. Voeg de HTML styles toe
   - Zoek naar de tekst ]]></b:skin> in hetzelfde tekstvak
   - Kopieer de tekst hieronder en plak deze vóór de gevonden tekst in het tekstvak
   
   /* Label Cloud Styles */
   #labelCloud {text-align:center;font-family:arial,sans-serif;}
   #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
   #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
   #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
   #labelCloud a{text-decoration:none}
   #labelCloud a:hover{text-decoration:underline}
   #labelCloud li a{}
   #labelCloud .label-cloud {}
   #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
   #labelCloud .label-cloud li:before{content:"" !important}
   
   
   
3. Voeg het HTML script toe
   - Kopieer de tekst hieronder en plak deze ná de gevonden tekst in punt 2
   
   <script type='text/javascript'>
   // Label Cloud User Variables
   var cloudMin = 1;
   var maxFontSize = 20;
   var maxColor = [0,0,255];
   var minFontSize = 10;
   var minColor = [0,0,0];
   var lcShowCount = false;
   </script>
   
   
   
4. Vervang de huidige HTML code voor het widget met nieuwe HTML
   - Zoek naar het huidige widget voor het Label overzicht. De HTML code hiervoor ziet er ongeveer zo uit: <b:widget id="'Label1'" locked="'false'" title="'Labels'" type="'Label'/">
   - Kopieer de tekst hieronder en plak deze over de HTML van het huidige widget (deze begint in ieder geval met <b:widget en eindigt in ieder geval met />)
   
   
   <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   
   <div class='widget-content'>
   <div id='labelCloud'/>
   <script type='text/javascript'>
   
   // Don't change anything past this point -----------------
   // Cloud function s() ripped from del.icio.us
   function s(a,b,i,x){
   if(a&gt;b){
   var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
   }
   else{
   var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
   }
   return v
   }
   
   
   var c=[];
   var labelCount = new Array();
   var ts = new Object;
   <b:loop values='data:labels' var='label'>
   var theName = &quot;<data:label.name/>&quot;;
   ts[theName] = <data:label.count/>;
   </b:loop>
   
   for (t in ts){
   if (!labelCount[ts[t]]){
   labelCount[ts[t]] = new Array(ts[t])
   }
   }
   var ta=cloudMin-1;
   tz = labelCount.length - cloudMin;
   lc2 = document.getElementById('labelCloud');
   ul = document.createElement('ul');
   ul.className = 'label-cloud';
   for(var t in ts){
   if(ts[t] &lt; cloudMin){
   continue;
   }
   for (var i=0;3 &gt; i;i++) {
   c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
   }
   var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
   li = document.createElement('li');
   li.style.fontSize = fs+'px';
   li.style.lineHeight = '1';
   a = document.createElement('a');
   a.title = ts[t]+' Posts in '+t;
   a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
   a.href = '/search/label/'+encodeURIComponent(t);
   if (lcShowCount){
   span = document.createElement('span');
   span.innerHTML = '('+ts[t]+') ';
   span.className = 'label-count';
   a.appendChild(document.createTextNode(t));
   li.appendChild(a);
   li.appendChild(span);
   }
   else {
   a.appendChild(document.createTextNode(t));
   li.appendChild(a);
   }
   ul.appendChild(li);
   abnk = document.createTextNode(' ');
   ul.appendChild(abnk);
   }
   lc2.appendChild(ul);
   </script>
   
   <noscript>
   <ul>
   <b:loop values='data:labels' var='label'>
   <li>
   <b:if cond='data:blog.url == data:label.url'>
   <data:label.name/>
   <b:else/>
   <a expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   (<data:label.count/>)
   </li>
   </b:loop>
   </ul>
   </noscript>
   <b:include name='quickedit'/>
   </div>
   
   </b:includable>
   </b:widget>
   
   
   
5. Klik op de knop Voorbeeld om te bekijken of het Tag overzicht goed weergegeven wordt. Indien dit niet het geval is, dan zou ik de backup terugplaatsen in het tekstvak onder Sjabloon bewerken, zodat je Blogpagina in ieder geval weer normaal functioneert. Als je vragen hebt kan je me altijd mailen of een reactie op dit bericht plaatsen.
   Indien het Tag overzicht er goed uitziet kan je het Sjabloon opslaan.

Het HTML script, toegevoegd in punt 3 biedt de mogelijkheden om nog wat aan te passen aan de layout van het Tag overzicht. Hieronder een uitleg:

• var cloudMin= 1
  Indien je dit op 1 laat staan worden alle Labels getoond in het Tag overzicht, maar als je het nummer aanpast naar een hoger getal, dan zullen alleen die Labels worden getoond die minimaal zoveel keer voorkomen in je Blog
• maxFontSize en maxColor
  Hiermee geef je de grootte van het lettertype en de kleur van de letter voor het Label welke het vaakst op je Blog voorkomt (zie onder Bronnen voor een RGB kleurenoverzicht)
• minFontSize en minColor
  Hiermee geef je de grootte van het lettertype en de kleur van de letter voor het Label welke het minst vaak op je Blog voorkomt
• lcShowCount = false
  Indien je de waarde false vervangt door true, dan wordt het aantal keren dat een Label voorkomt op je Blog, weergegeven bij de Tag. Over het algemeen zie je dit nooit terug in Tag overzichten, dus ik zou dit op false laten staan

Verder is het nog mogelijk om je Tag overzicht nóg meer te tweaken door het aanpasen van de HTML styles, toegevoegd in punt 2. Hier wil ik verder niet op in gaan en is bestemd voor de meer ervaren HTML ontwerpers.

Bronnen:
Setup and configuration for New Blogger Tag Cloud / Label Cloud
RGB kleurcodes