Har du sett att vissa bloggar har en ruta med ord - blogginläggens etiketter - samlade i en hög?Ju fler inlägg det finns med en viss etikett, desto större ord.
Ett roligt sätt att visa upp vad man skrivit om och länka till inläggen, men hur gör man då?
Det första du börjar med är att lägga in ett sidelement med Etiketter/Labels. Det gör du från din bloggs Layoutläge. Om du redan har ett sånt här sidelement låter du det bara vara som det är.
Det spelar ingen roll vart det ligger, du kan byta placering efteråt om du vill.
Gå så till din bloggs Redigera HTML-läge.Tryck på Ctrl+F för att få fram din webläsares sökruta och skriv in
Tryck enter eller sök. Du kan också söka upp ordet i din kodmall utan hjälp förstås, men det här är lättare.</b:skin>
Klistra in följande kod precis ovanför den här skin-taggen, enligt bilden nedan.
/* 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}
Nu söker du efter ( skriver in i sökrutan eller manuellt)<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Det är det sidelement du lade in med rubriken Label. Du hittar det antagligen under sidebar-wrapper.
Markera den raden i din kodmall och klistra in koden jag skrivit under följande bild. Du ska alltså ersätta den enda raden med all kod i stycket här under!
<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'> <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></div>
<script type='text/javascript'>
// Label Cloud User Variables
var maxFontSize = 20;
var maxColor = [0,0,0];
var minFontSize = 8;
var minColor = [0,0,0];
var lcShowCount = false;
var minPostCount = 0; //integer
// Don't change anything past this point -----------------
function s(a,b,i,x){
if(a>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 ta=0;
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.count'>
if (<data:label.count/> > minPostCount) ts["<data:label.name/>"] = <data:label.count/>;</b:if></b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
lc2.innerHTML = '';
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > 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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Förhandsgranska och se om du har fått ett Label Cloud istället för dina tidigare etiketter i en rad.
Spara!
Nu kan du börja fundera på om du vill redigera texten i ditt Label Cloud. Du kan själv bestämma om du vill ändra färg och storlek på etiketterna. Just nu är de största bokstäverna 20 pixlar höga och de minsta 8pixlar. Färgen på texten är svart. Du ändrar variablerna i den här delen av den andra koden du la in i din blogg:
// Label Cloud User Variables
var maxFontSize = 20;
var maxColor = [0,0,0];
var minFontSize = 8;
var minColor = [0,0,0];
var lcShowCount = false;
var minPostCount = 0; //integer
Vad max och min FontSize betyder är ju inte så svårt att förstå. Storleken räknas i antal pixlar.
Max och Min Color är de färgkoder som de större orden respektive mindre orden har. Du byter färg genom att ändra till en annan färgkod, en så kallad RGB-kod.
IcShowCount bestämmer om du ska visa antalet poster som har etiketten som en siffra efter ordet, exempelvis (2) och false betyder att det inte visas. Byt till true om du vill visa antalet.
MinPostCount avgör vilka etiketter som ska visas beroende på hur många poster som har just den etiketten. 0 betyder att alla etiketter visas, högre tal kan vara bra om man har många etiketter och bara vill visa de viktigaste.
Så ett sista ord, naturligtvis måste du ha satt etiketter på dina poster för att du ska kunna skapa ett Label Cloud. Utan dem - inget "moln". Inte heller blir det så fint om du bara har en eller ett par olika etiketter, det behövs lite fler för att skapa ett snyggt "moln" Lagom är bäst!
