4 apr. 2011

Cream un Nor de Etichete deosebit

Buna. In articolul precedent am facut cunostinta cu etichete in Blogger. Dupa cum ati observat Gadgetul standart al blogger-ului "Etichete" este destul de simplu si nu se "distinge din multime", deacea am hotarat sa fac putine modificari pentru al face putin mai "viu". Deci, avem nevoie sa modificam codul HTML a gadgetului "Etichete", pentru aceasta accesam Tabloul de bord => Design => Editati HTML, (inainte de a face modificari in codul HTML, sa recomand sa descarcati sablonul) bifam optiunea "Extindeti sabloanele de control" si cua jutorul combinatiei de taste Ctrl+F gasim
urmatorul cod:
]]></b:skin>


Inaintea lui punem codul urmator:
/* 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}


Iar Dupa ]]></b:skin> codul urmator:
<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>



Acum gasim in sablonul nostru urmatorul cod:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/> (deasemenea pentru cautare mai rapida folosim combinatia de taste Ctrl+F si in campul cautarii scrim de exemplu Label1)
Inlocuim codul ce urmeaza incepand cu <b:widget id='Label1' locked='false' title='Labels' type='Label'/>  terminand cu </b:widget>, cu codul urmator:
<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>



Repet, acest cod al puneti intre <b:widget id='Label1' locked='false' title='Labels' type='Label'/>  si </b:widget> inlocuind codul existent.
Tastam "Previzualizati". Daca nu sunt erori atunci salvam sablonul.
Acest cod ne permite sa facem Norul nostru de Etichete mai viu, adica Etichetele atasate unui numar mai mare de articole, vor avea marimea si culoarea specifica, astfel putem deosebi care eticheta a fost accesata mai des.

Niciun comentariu:

Trimiteți un comentariu