Tag cloud (categorii still wp) pe Blogger / Blogspot

I find labels offensive; tu nu? Totusi, m-am gandit ca e o chestie misto de pus pe blogger. Blogger / blogspot nu are asta automat, dar ca orice altceva, se poate face un hack. Si daca esti cumva pe Wordpress (nimeni nu-i perfect), iti voi arata cum sa ai animatia si-acolo (sari direct la punctul 3).

LE: Ambele metode prezentate aici nu mai sunt valabile. Blogger permite acum label clouds in modul normal, blogumus nu pare sa mai functioneze. Raspund la intrebari numai pe BlogIdol.ro.

Eu n-am de gand sa ma mut in curand de pe blogger, dar sunt anumite chestii pe care am vrut sa le-mbunatatesc, si cred c-am reusit in cea mai mare parte. Una din ele este prezentarea categoriilor.

Trebuie pastrata o diferentiere clara intre categorii (labels) si taguri (tags). Categoriile sunt scheletul blogului si nu cred ca trebuie sa ai mai mult de 30. Dac-ajungi sa ai mai mult de 30, inseamna ca tu confunzi categoriile cu tag-urile. Categoriile le alegi pe baza tematicii blogului, si cred ca-i o idee buna sa incerci sa le mentii intr-un numar cat mai mic. Alegi cuvinte generale. Tag-urile sunt cuvinte mai restrictive, si le adaugi pentru a gasi mai usor articolul (atat tu, cat si motoarele de cautare). Nu stiu in ce masura asta te-a lamurit ce-s alea; daca nu, iata o lista de tutoriale:

A) Label cloud (stil wordpress)

Desi Blogger imi permite sa arat categoriile in ce ordine vreau, optiunile nu sunt suficiente sa ma satisfaca. Am vrut sa arat Categoriile in ordine alfabetica, cu marimea fontului data de numarul articolelor sub categoria respectiva. Rezultatele pot fi vazute in subsolul blogului. Nu-mi amintesc exact ce tutorial am urmat, dar cred ca primul la care m-am uitat a fost cel a lui Phydeaux. Acesta pare mai complex decat e necesar, intrucat e prea lung, si declaratia variabilelor se face in capul sablonului.

Hackosphere a publicat in 2006 un hack pentru asa ceva, iar frivolousmotion l-a rescris. Iata hackul frivolousmotion:

1. Du-te in Dashboard si login.

2. Apasa pe Layout -> Edit HTML. Nu apasa "Expand Widget Templates" - nu e necesar.

3. Fa un backup la sablon. Poti face asta fie apasand pe "Download Template" si salvandu-l cu un nume semnificativ, fie selectand tot textul si salvandu-l cu o descriere in Google Notebooks, de pilda. Daca faci vreo greseala majora sau nu esti multumit cu rezultatul, te poti duce la Upload a template from file, Choose... si apoi apesi Upload.

3. Apasa Ctrl+F pentru a cauta in pagina, si cauta

<b:section class='sidebar' id='sidebar' preferred='yes'>

4. Imediat dedesubt, fa copy & paste urmatorului cod:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>

<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>

<script language='javascript' type='text/javascript'>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> &gt; max)
  max = <data:label.count/>;
if (<data:label.count/> &lt; min)
min = <data:label.count/>;
</b:loop>
var display = &quot;";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 80 + (delta * 100) / (max - min);
display = display + &quot;<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span> &quot;;
</b:loop>

obj = document.getElementById(&#39;LabelDisplay&#39;);
obj.innerHTML = display;
}

zoomStyle();
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

5. Fa un preview al sablonului apasand pe "Preview". Daca-i OK, salveaza sablonul apasand Save Template. Daca nu, apasa pe Clear Edits sau incarca sablonul salvat mai devreme, si ia-o de la capat, avand grija sa urmaresti instructiunile cu mai multa atentie - eu le-am incercat si-a mers (rezultatul se vede dedesubt, pe pagina).

6. Apasa pe Page Elements si muta Widgetul unde vrei. Apasa pe Preview inainte de a salva.

Daca preferi varianta originala (hackosphere), inlocuieste codul de la punctul 4. cu combo box (permite alegerea mai multor stiluri) sau zoom style only (un singur stil). Iata si varianta combo:

<!-- Multi-style labels - zoom, menu and list styles -->
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <h2>Multi-style Labels</h2><br/>
  <a href='javascript:void' title='Switch to List' onclick='javascript:linkStyle();'>
  <img src='http://www.anniyalogam.com/widgets/list.jpg'/></a>
  <a href='javascript:void' title='Switch to Menu' onclick='javascript:menuStyle();'>
  <img src='http://www.anniyalogam.com/widgets/menu.jpg'/></a>
  <a href='javascript:void' title='Switch to Zoom' onclick='javascript:zoomStyle();'>
  <img src='http://www.anniyalogam.com/widgets/zoom.jpg'/></a>
  <b><a href='http://hackosphere.blogspot.com/2006/09/multi-style-labels-widget-for-blogger.html'>?</a></b><br/><br/>

  <div class='widget-content'>
  <div id='LabelDisplay'>
  </div>
  </div>

  <script language='javascript' type='text/javascript'>
  function zoomStyle() {
    var max = 0;
    var min = 10000;
    <b:loop values='data:labels' var='label'>
    if (<data:label.count/> &gt; max)
         max = <data:label.count/>;
    if (<data:label.count/> &lt; min)
       min = <data:label.count/>;
    </b:loop>
    var display = "";
    <b:loop values='data:labels' var='label'>
      var delta = <data:label.count/> - min;
      var size = 100 + (delta * 100) / (max - min);
      display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>";
    </b:loop>

     obj = document.getElementById('LabelDisplay');
     obj.innerHTML = display;
  }

  function menuStyle() {
     var display = "<select onchange='location = this.options[this.selectedIndex].value;'><option>Select a label</option>";
     <b:loop values='data:labels' var='label'>
       display = display + "<option expr:value='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</option>";
     </b:loop>
     display = display + "</select>";

     obj = document.getElementById('LabelDisplay');
     obj.innerHTML = display;
  }

  function linkStyle() {
     var display = "<ul>";
     <b:loop values='data:labels' var='label'>
       display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><data:label.name/></a> (<data:label.count/>)</li>";
     </b:loop>
     display = display + "</ul>";

     obj = document.getElementById('LabelDisplay');
     obj.innerHTML = display;
  }

  // set default to zoom style
  zoomStyle();
  </script>

    <b:include name='quickedit'/>
</b:includable>
</b:widget>

 

B) Blogumus

Widgetul blogumus consta intr-un tag cloud sferic, animat si poate fi vazut in stanga sus. Instalarea unui widget Blogumus este similara cu cea zoom style, diferenta constand in codul introdus la punctul 4, care-i urmatorul:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>

    &lt;object type="application/x-shockwave-flash" data="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
        &lt;param name="movie" value="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" /&gt;
        &lt;param name="bgcolor" value="#ffffff" /&gt;
        &lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
      <b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
        &lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
    &lt;/object&gt;

  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Acest cod a fost publicat de Amanda Fazani la bloggerbuster (exista si o varianta mai veche). Este adaptat dupa un plugin Wordpress creat de Roy Tanck, WP-Cumulus. Atentie, insa: pluginul nu "inghite" labels sau tag-uri cu diacritice. L-am rugat pe Roy sa se uite la chestia asta, dar nu stiu cand, daca sau cum o va face.

Atributele de latime (width) si inaltime (height) pot fi modificate de la default (250px si, respectiv, 200px). Culorile textului si backgroundului sunt exprimate in hex - alb este #ffffff, negru este 000000. Exista mai multe modalitati de a afla valoarea hex asociata cu fiecare culoare, dar cea mai simpla este sa mergi in Layout -> Fonts and Colors si sa gasesti culoarea asociata cu sablonul tau (sau alta culoare, daca vrei sa fii funky). In cazul meu este #fff0e0. Nu uita sa Clear Edits dupa ce gasesti culoarea preferata, intrucat vrei sa schimbi numai widgetul, nu tot blogul.

 

C) Altele

Daca-ti place ideea de "tag cloud", s-ar putea sa te bucuri sa afli ca poti face un tag din orice, inlcusiv feed-ul comentariilor tale, site-ului tau sau chiar al altui site. Un tutorial se afla in lista de clipuri youtube de mai sus. Tot ce trebuie sa faci este sa mergi la MakeCloud.com si sa introduci un feed.

20090810 UPDATE: Vrei mai multe articole tehnice pentru Blogger / Blogspot? Este modificarea de aici curenta, s-au am facut una noua, cu acelasi efect, dar mai buna? Toate modificarile aduse de mine acestui sablon (template) pot fi gasite in Zamolxis ChangeLog. Seria lucrand la fatada va gazdui de-acu’ incolo articole despre PR, media persuasion si eventual imaginea Romaniei.

LE: Inlocuit in blogumus halotemplates.s3.amazonaws.com/wp-cumulus-example cu sites.google.com/site/bloggerustemplatus/code.

zamo, lucrand la fatzada, tehnicalitati, technicalities, bloger, blogger, blogspot, google, gugal, hack, wordpress, tag cloud, categorii, labels,yt (Tags)