vineri, 29 mai 2009

Categorii sub forma de Tag Clouds animat in Blogger

Pentru a vedea cum arata dati clic aici si miscati mouse-ul peste el. Acesta este modul cum vor arata categoriile voastre in format tag cloud flash. Acest widget pentru Blogger a fost creat de catre Amanda dupa un plugin din Wordpress. Scriptul contine link-urile catre creatorul plugin-ului in wordpress si catre Amanda, cei care au creat acest widget, si de aceea va rog sa nu scoateti link-urile din script.



Deci, daca vreti sa afisati categoriile blogului sub forma de Tag Cloud Flash (vezi exemplu si in sidebarul meu) trebuie sa adaugati un cod in html-ul sablonului. Este chiar foarte simplu asa ca nu trebuie sa va ingrijorati.

Urmati calea: 'Aspect --> Editati Html'
Mai intai salvati o copie a sablonului (clic "Descărcaţi şablonul complet") in calculator pentru a reveni la sablonul actual daca ceva nu merge cum trebuie. Aceasta este prima regula atunci cand modificati html-ul sablonului.

Apoi cautati urmatoarea linie de cod:

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

Imediat dupa aceasta linie introduceti urmatorul cod:

<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://sites.google.com/site/myfilesdan/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://sites.google.com/site/myfilesdan/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//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>

Editati scriptul

Inainte de a introduce codul aveti posibilitatea sa modificati cateva lucruri la el. Deschideti un editor de text cum ar fi Notepad si copiati codul. Editati-l dupa cum vedeti mai jos.

Culoarea de fundal a widget-ului:
- by default fundalul este alb:

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

- modifica - ffffff - cu alt cod html al culorii pe care o vrei. Aveti aici un tabel de culori din care puteti alege.

Culoarea textului
- by default culoarea textului este gri:

so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);

- modifica - 333333 - cu alt cod html al culorii pe care o vrei. Aveti aici un tabel de culori din care puteti alege.

Marimea textului
- by default marimea fontului este 12

var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop>

- modifica numarul 12 cu ce numar vrei

Latimea si inaltimea widgetului
- by default latimea este setata la 240px si inaltimea la 300 px

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

- modifica cele 2 valori dupa dimensiunea sidebar-ului unde vrei sa o adaugi.

Dupa ce ati modificat codul, copiati-l in html-ul sablonului dupa cum spuneam mai sus. Previzualizati sablonul si daca widget-ul arata cum trebuie, salvati sablonul. Pentru a modifica pozitia widget-ului in sidebar sau pentru a sterge sau redenumi widget-ul, mergeti la tabul 'Aspect --> Elemente de pagina' si procedati la fel cum ati proceda cu orice alt gadget adaugat in sidebar.

28 de comentarii:

  1. interesant..dar cum modific sa pun alte cuvinte adica categoriile?ms

    RăspundețiȘtergere
  2. Nu trebuie sa modifici niciun cuvant. Cuvintele care apar sunt categoriile (etichete, labels) pe care le pui la fiecare articol scris.

    RăspundețiȘtergere
  3. am pus si eu..e fain..ma bucur ca scrii lucruri interesante si care ne ajuta..bafta in continuare...si app/urmaresc frecvent blogul tau..

    RăspundețiȘtergere
  4. Nu gasesc acea linie in codul Html.

    Ce este de facut ?

    RăspundețiȘtergere
  5. Trefla, la tine in sablon trebuie sa cauti:

    id='sidebar5' preferred='yes'

    si sa copiezi codul imediat dupa el.

    Previzualizeaza si apoi salveaza.

    RăspundețiȘtergere
  6. zimi si mie cum ai facut sa ai paginile numerotate ( de ex pag 1,2,3 etc)

    RăspundețiȘtergere
  7. Daniel crede-ma am cred o luna de cand ma chinui sa adaug widgetu asta, nu imi reuseste, am facut exact cum ai zis tu si imi da eroarea asta : Controlul cu id-ul Label99 nu este în interiorul unei secţiuni (elementul părinte actual este: div.) Fiecare control trebuie să fie într-o secţiune.

    Ajuta-ma te rog frumos nu stiu daca imi permiti sa te contactez pe mess

    RăspundețiȘtergere
  8. Ai schimbat cumva sablonul ca nu mai retin?

    Linia pe care am scris-o in comentariul de sus are la capete < cod > si codul din articolul meu trebuie adugat dupa acest semn >, dar nu pot sa o scriu in intregime in comentariu ca nu se poate.

    Daca nu reusesti trimite-mi pe mail 'nu pe mess" linkul de unde ai descarcat sablonul.
    Succes

    RăspundețiȘtergere
  9. Pentru "Anonim"

    ai aici link-ul de unde l-am luat

    Clic
    aici

    RăspundețiȘtergere
  10. salut. si eu ma chinui sa adaung acest gadget dar nu resusesc. nu gasesc niciunul din codurile pe care le-ai dat.

    RăspundețiȘtergere
  11. Am incercat si eu dar nu se incarca flash-ul. Ramane un sreptunghi alb. :-/

    RăspundețiȘtergere
  12. Pe http://2wireless.blogspot.com . Dar acum l-am scos ca n-avea rost sa-l tin asa.

    RăspundețiȘtergere
  13. Daca ai scos codul nu pot sa te ajut. Daca il vei adauga din nou sa ma anunti si voi vedea despre ce este vorba.

    RăspundețiȘtergere
  14. multumesc.... e foarte fain :)

    RăspundețiȘtergere
  15. buna. si eu am aceeasi problema, cu dreptunghiul alb... Daca ai putea sa ma ajuti putin... adresa e: ideei.blogspot.com Multumesc.

    RăspundețiȘtergere
  16. Julia acelasi lucru si la tine. Daca nu lasi codul nu pot sa te ajut.
    Ps: in momentul in care ai pus codul aveai vreo categorie creata?

    RăspundețiȘtergere
  17. Salutare

    Voi aveti probleme cu acest Tag ? mie nu imi mai functioneaza de azi, pur si simplu mi-a disparut de pe blog.

    RăspundețiȘtergere
  18. In acest moment sunt cateva probleme cu acest widget. In momentul in care lucrurile se vor rezolva, voi anunta in postare.

    RăspundețiȘtergere
  19. da fuctioneaza la uni la mine nu gasesc absolut nici un cod prezentat mai sus pentru a pune Tag Cloud ....ar mai fi si alte soluti de ce nu as gasi codu
    sau id='sidebar5' preferred='yes' spus de daniel ...thx :)

    RăspundețiȘtergere
  20. Trimite-mi o copie a sablonului tau si iti voi spune unde sa adaugi codul.

    RăspundețiȘtergere
  21. cautam de mult timp asa ceva, multumesc pentru toate tutorialele publicate

    RăspundețiȘtergere
  22. Am si eu aceeasi problema,nu gasesc nici un cod.
    http://augustin-marian.blogspot.com/

    RăspundețiȘtergere
  23. La mine in cod nu gasesc acea linie si nici pe cea de la Trefla. Te rog poti sa+mi spui care este linia la mine. Sau ce tre sa fac ca sa apara.

    RăspundețiȘtergere
  24. Eu am pus dupa . Si acum merge. Daca mai sunt persoane care nu gasesc este bine sa caute ceva asemanotor(care contine si cuvantul sidebar si b: section)

    RăspundețiȘtergere
  25. Salut Daniel Nicolae,si eu o problema cu ecest cod HTML,poate ai putea sa ma ajuti si pe mine sa rezolv problema.Acesta este mesajul de eroare:

    Controlul cu id-ul Label99 nu este în interiorul unei secţiuni (elementul părinte actual este: div.) Fiecare control trebuie să fie într-o secţiune.
    Error 500

    RăspundețiȘtergere