Jak dodać chmurę tagów do Blogger'a?

Jako blogerzy korzystający z platformy Blogger firmy Google, pewnie wiecie, że nie należy ona do najlepszych. Nie posiada tyle funkcji co konkurencyjny Wordpress. Bloggerowi brakuje wielu podstawowych funkcji, które są wymagane do dobrego blogowania. Mówię tutaj o braku możliwości dodania widgetów takich jak 'Rekomendowane wpisy', 'chmura tagów', 'ostatnie wpisy', 'ostatnie komentarze', 'najpopularniejsze posty' i jeszcze kilka innych. Dziś chciałbym przedstawić jak zamienić listę etykiet na chmurę tagów znaną z Wordpress'a.

Jako blogerzy korzystający z platformy Blogger firmy Google, pewnie wiecie, że nie należy ona do najlepszych. Nie posiada tyle funkcji co konkurencyjny Wordpress. Bloggerowi brakuje wielu podstawowych funkcji, które są wymagane do dobrego blogowania. Mówię tutaj o braku możliwości dodania widgetów takich jak 'Rekomendowane wpisy', 'chmura tagów', 'ostatnie wpisy', 'ostatnie komentarze', 'najpopularniejsze posty' i jeszcze kilka innych. Dziś chciałbym przedstawić jak zamienić listę etykiet na chmurę tagów znaną z Wordpress'a.

Zanim zaczniesz jakiekolwiek modyfikacje, zrób kopię zapasową szablonu!

Musisz mieć przynajmniej jeden dodany tag/etykietę na swoim blogu aby modyfikacja zadziałała!

1. Wejdź w Panel Nawigacyjny > *Układ *> Edytuj kod HTML

2. Znajdź: ]]></b:skin>

3. Wklej poniższy kod przed ]]></b:skin>

/* 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

#labelCloud a:hover

#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}

4. Znajdź ponownie ]]></b:skin> i umieść poniższy kod po ]]></b:skin>

<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>

5. Znajdź kod podobny do tego: <b:widget id='Label1' locked='false' title='Etykiety' type='Label'/>

6. Skopiuj poniższy kod i ZAMIEŃ powyższą linię w pkt 5.

<b:widget id='Label1' locked='false' title='Chmura tagów' type='Label'>

<b:includable id='main'></b:if><div class='widget-content'>

<div id='labelCloud'/>

<script type='text/javascript'>

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*=s(minColor*,maxColor*,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>

7. Kliknij Zapisz Szablon. Jeśli wykonałeś wszystko prawidłowo nie powinny wyskoczyć, żadne błędy.

Teraz czas na modyfikacje.

Wartość cloudMin= 1; oznacza, że wszystkie tagi na twoim blogu będą wyświetlane. Jeśli masz +100 tagów możesz zmniejszyć chmurkę poprzez zmianę wartości np. na 2. Wtedy wyświetlą się tagi, które są przypisane do min. 2 postów.

var maxFontSize = 20;

var maxColor = [0,0,255];

var minFontSize = 10;

var minColor = [0,0,0];

var lcShowCount = false;

maxFontSize i minFontSize oznaczają maksymalny i minimalny rozmiar czcionki. Modyfikując wartości dla *maxColor *i minColor (w formacie RGB) dopasujesz kolor tagów do swojej kolorystyki bloga. Na tej stronie znajdziesz pomoc przy wartościach RGB.

#labelCloud {text-align:center;font-family:arial,sans-serif;}

Tutaj zmienić możesz domyślne wyśrodkowanie - 'center' na 'justify', 'right' albo 'left' oraz dobrać krój czcionki.

To są podstawowe modyfikacje dla większości blogerów. Jeśli jesteś zaawansowanym użytkownikiem zajrzyj na stronę autora skryptu.

Źródło: phydeaux3