22
01
08

Chmura tagów w Bloggerze/Blogspocie

Jednym z ciekawszych (wizualnie i pod względem użyteczności) sposobów prezentowania listy tagów jest tzw. chmura tagów (tag cloud albo label cloud). Jest to lista tagów, w której wielkość poszczególnych wpisów odzwierciedla ich częstotliwość pojawiania się na blogu. Jeśli więc tutaj największą czcionką (do tego w innym, wyróżniającym się, kolorze) podany jest tag AdSense, oznacza to, że o tym pisałem najczęściej.

Chmurkę tagów można sobie bez kłopotu zrobić na blogu WordPress. Bez większego kłopotu można też zrobić ją sobie na Bloggerze. Z tą różnicą, że będzie to label cloud, bo w Bloggerze nie ma znaczników (tagów), są etykiety (labele). O ile tylko Twój blog tam prowadzony piszesz w nowym formacie layoutowym.

Całość sprowadza się do kilku kroków.

1. Logujemy się do Bloggera, edytujemy szablon i kod HTML. Istotne jest, aby pole „rozszerz szablony widgetów” NIE było zaznaczone.

2. Kopiujemy treść całego szablonu do edytora HTML albo choćby do notatnika. Zapisujemy kopię zapasową.

3. Wyszukujemy fragment:

]]></b:skin>

i PRZED nim wklejamy fragment:

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

4. Zaraz ZA znalezionym przed momentem fragmentem wklejamy ten kod:

<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. Szukamy miejsca, które odpowiedzialne jest za wygenerowanie treści listy tagów, które wygląda tak (lub podobnie):

<b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’/>

6. Zamiast tego wklejamy kod:

<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>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 = „<data:label.name/>”;
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] < cloudMin){
continue;
}
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>

<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. Podmieniamy kod w edytorze HTML w Bloggerze, zapisujemy, cieszymy się chmurką tagów.

8. Jeśli chcemy zmienić kolory „min” (tagi o najmniejszej liczbie wpisów) i „max” (te o największej liczbie wpisów), zmiany wprowadzamy w kodzie wklejonym w punkcie 4. W tym kodzie trzeba wpisać kolor w formacie dziesiętnym od (0,0,0) do (255,255,255). Trzeba więc zamienić kod szesnastkowy używany w HTMLu na dziesiętny. Przykładowo kod #5588aa równy jest (85,136,170). Przyda się kalkulator hex<–>dec.

9. Jeśli wydaje Ci się, że to ja wymyśliłem taki kod, wychodzisz z błędu odwiedzając stronę jego autora.

10. Jeśli chcesz wprowadzać jakieś inne zmiany w kodzie (np. w celu dokładniejszej konfiguracji), korzystasz z informacji zawartych na stronie podlinkowanej w punkcie 9.

Autor:Krzysztof Lis | Tagi:



Wpisy powiązane tematycznie:

7 komentarzy do artykułu “Chmura tagów w Bloggerze/Blogspocie”

  1. Z kodem jest chyba coś nie tak – po skopiowaniu z Twojej strony blogger wyświetlił informację o błędnym skrypcie. Dopiero po skopiowaniu ze strony autora „chmurki etykiet” wszystko zaczęło działać. Proponuję sprawdzić, czy czegoś nie zgubiłeś „po drodze” 🙂

  2. Sprawdziłem to i rzeczywiście, kod po przekopiowaniu z mojego bloga nie działa.

    Nie wiem na czym polega ten fenomen, bo wklejałem go tu wprost ze strony autora. Prawdopodobnie to jakiś bug WordPressa, który zamienia np. pojedyncze cudzysłowy na apostrofy lub coś podobnego. Nie jestem w stanie zaproponować szybkiego rozwiązania tego problemu, więc na razie kopiujcie kod ze strony autora…

  3. WordPressowe rozwiązanie jest jednak dużo lepsze i łatwiejsze w aplikacji. Jeżeli blog prowadzony jest na serwerze wordpressa to tagi od razu linkują do, nie wiem jak to profesjonalnie nazwać, do tagu na subdomenie w przypadku polski pl.wordpress.com/tag/ gdzie znajdują się wszystkie wpisy innych blogerów, którzy wybrali ten tag i tam znajduje się link od naszego wpisu. Tagi chyba powstały w celach seo, a blogger jest od Google, więc może nie uznają za bardzo takich praktyk. Trochę tylko znam blogera. Co oznacza, że będzie to label cloud? Jeśli chodzi o seo jest jakaś różnica? Czy to tylko po prostu inna nazwa tagów?

  4. Label cloud to po prostu sposób prezentacji tagów, w „chmurce”, w której tagi najczęściej używane są większe i najczęściej w innym kolorze. Takie coś, jak u mnie na blogu, na górze sidebara.

  5. A no 🙂 tak przypuszczałem, tylko mnie zastanawiała ta nazwa „label cloud”, bo zwykle jest mowa o „tag cloud”, a „label” to nazwa bloggerowa tagów. W sumie nie ma to znaczenia.
    Rzeczywiście tagi tak dużo dają? Na forum niektórzy twierdzą, że pomagają w pozycjonowaniu na niszowe frazy. Co do precli to też jeden użytkownik (nazwy nie podam, bo może by sobie nie życzył) nagminnie głosi, żeby na to zwracać uwagę przy wyborze precli. Na pewno site się trochę zwiększy i linki może tematyczne do wpisów. Pod warunkiem, że tagi nie będą siedzieć w SI. Zauważyłeś jakąś realną różnice po wprowadzeniu tagów?

  6. Z tagów korzystam nie dla Google’a, tylko dla wyszukiwarek. Aby jednak nie ryzykować SI i duplicate content, staram się, by strony tagów wyświetlały tylko części wpisów. Tak robię na blogach WordPressowych, na Bloggerze tego się nie da ustawić.

  7. przyda się 🙂

Pozostaw komentarz

Pamiętaj tylko proszę o polityce komentarzy! Komentarze służą do wyrażania opinii na temat opublikowanego tekstu, albo zadawania pytań jego dotyczących. Nie służą do reklamowania własnych stron ani zadawania pytań nie związanych z tematem wpisu. Jeśli masz pytanie, zadaj je na forum o zarabianiu na blogach albo napisz do mnie e-maila.

XHTML - możesz użyć tagów:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Jak zarabiam?

Na moich blogach i witrynach zarabiam między innymi sposobami podanymi poniżej.