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). 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: 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'> <div class='widget-content'> <script language='javascript' type='text/javascript'> obj = document.getElementById('LabelDisplay'); zoomStyle(); <b:include name='quickedit'/> 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 --> <div class='widget-content'> <script language='javascript' type='text/javascript'> obj = document.getElementById('LabelDisplay'); function menuStyle() { obj = document.getElementById('LabelDisplay'); function linkStyle() { obj = document.getElementById('LabelDisplay'); // set default to zoom style <b:include name='quickedit'/> 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'> <object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" > </div> <b:include name='quickedit'/> 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. 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.A) Label cloud (stil wordpress)
<b:includable id='main'>
<div id='LabelDisplay'>
</div>
</div>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > max)
max = <data:label.count/>;
if (<data:label.count/> < min)
min = <data:label.count/>;
</b:loop>
var display = "";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 80 + (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> ";
</b:loop>
obj.innerHTML = display;
}
</script>
</b:includable>
</b:widget>
<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 id='LabelDisplay'>
</div>
</div>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > max)
max = <data:label.count/>;
if (<data:label.count/> < 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.innerHTML = display;
}
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.innerHTML = display;
}
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.innerHTML = display;
}
zoomStyle();
</script>
</b:includable>
</b:widget>B) Blogumus
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<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>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>
</b:includable>
</b:widget>C) Altele
 | Mulţam fain pentru cetire! Publicat
duminică, octombrie 12, 2008
. Poţi găsi articole similare sub următoarele categorii:
lucrand la fatada
. Dacă ţi-a plăcut articolul, trimite-l altora (Ymess!
email), votează-mă pe un agregator (
F!,g!, z!, M!, r!, p!, bp!, G!) şi consideră abonarea la fluxul RSS sau prin email. Aici vei găsi ştiri inedite, articole hazoase, perspective originale in politică, societate, economie şi relaţii interumane.
Intrebări? Răspunsuri există!
|
|
RSS
