3D chmura tagów na Blogspot / Blogger - Blogumus

--> Zachwycony przeszukiwaniem tagów za pomocą chmury 3D, która jest dostępna dla WordPress zapragnąłem taką za swoim blogu. Szukałem, szukałem i w końcu znalazłem. Dodawanie tego bajeru do Blogspotu jest jeszcze łatwiejsze.

--> Cały opis w języku angielskim znajduje się na blogu Blogger Buster. Z tego, że jest po angielsku postanowiłem go skrócić i przełożyć na polski.

--> Co to jest i jak działa?
Blogumus jest widgetem wyświetlającym chmurę tagów używając do tego technologi Flash oraz skonwertowanego skryptu z Roy Tanck's WP Cumulus - pluginu dla WordPress. Instaluje się go kopiując kod bezpośrednio do kodu źródłowego szablonu. Blogumus oferuje nam oczywiście zmianę wielości chmury, koloru tła oraz rozmiaru i koloru czcionki tagów. Jego ułożenie w menu możemy modyfikować. Aby zobaczyć Blogumus w akcji nasza przeglądarka musi posiadać uaktywnionego Flash wraz z JavaScript.

--> Instalacja
Instalacja jest wprost banalna. Wchodzimy w konfiguracje blogu, a następnie wybieramy Układ --> Edytuj kod HTML. Przeglądamy kod (lub używamy wbudowanej w przeglądarkę "szukarki") w poszukiwaniu za wpisem :

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

Za tą linijką wklejamy ten kod (jednakże radzę skopiować ze strony oficjalnej bo u mnie coś się rozjeżdża i nie wiem czy nie posiada błędów):

<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'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// usun komentarz na dole aby tlo bylo przezroczyste
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Jeśli wszystko poszło dobrze w naszym menu powinna znaleźć się na pierwszej pozycji chmurka.

--> Dostosowanie Blogumus dla naszych potrzeb
Po instalacji będziemy posiadać domyślne ustawienia:
-> szerokość: 240px
-> wysokość: 300px;
-> kolor tła: białe (wight)
-> kolor tagów: szary (gray)
-> rozmiar czcionki: 12

Jeśli któryś z parametrów Ci nie odpowiada możesz go zmienić. Aby zmienić szerokość oraz wysokość poszukujemy fragment poniższy i zmieniamy pogrubione wartości (pierwsza to szerokość, a druga to wysokość):

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Rozmiar zmieniony. Czas na zmianę koloru tła. Poszukujemy w kodzie poniższego fragmentu i zmieniamy pogrubioną wartość (stosujemy postać zapisu kolory wykorzystywany w HTMLu):

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "#ffffff");

Trudno dopasować tło... Zróbmy je przeźroczyste!

// usun komentarz na dole aby tlo bylo przezroczyste
//so.addParam("wmode", "transparent");

Teraz tło ładnie psuje do stylu bloga. Czas na zmianę koloru czcionki tagów. Poszukujemy w kodzie poniższego fragmentu i zmieniamy pogrubioną wartość (stosujemy postać zapisu kolory wykorzystywany w HTMLu):

so.addVariable("tcolor", "#333333");

Wygląda już całkiem nieźle. Brakuje jeszcze zmiany wielkości czcionki. Poszukujemy w kodzie poniższego fragmentu i zmieniamy 12 na własną wartość wartość:

so.addVariable("tagcloud", "

Blogumus wygląda już idealnie. Jedyne co nam nie pasuje to jego pozycja. Zmieniamy to w konfiguracji blogu - Układ --> Elementy strony. Tutaj też możemy zmienić nazwę sekwencji oraz łatwo go usunąć.

--> Reszta informacji znajduje się na blogu Blogger Buster.