Profesjonalny Hosting

Chmura tagów na Bloggerze / Blogspot

Tagi to słowa kluczowe. Blogger umożliwia Tobie dodanie listy tagów. Funkcja ta ma pewne wady, gdyż:


  • wygląda archaicznie i nieprofesjonalnie

  • niepotrzebnie zajmuje dużo miejsca

  • elementy odróżniają się cyferką postawioną obok, co jest po prostu brzydkie

Poza tym serwisy Web 2.0 nauczyły się pokazywać słowa kluczowe właśnie w formie chmury tagów. Jeśli wyposażysz swojego bloga w taką chmurę tagów, ludzie pomyślą, że to wygląda profesjonalnie. Zyskasz dzięki temu prestiż lub może nawet nowego/-ych czytelnika/-ów.



Jeśli znasz język angielski z pewnością możesz przejść od razu na stronę http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html, gdzie znajdziesz obszerniejszą instrukcję jak zamieścić Chmurę Tagów na Bloggerze.



Dla tych, którzy nie znają angielskiego.


  1. Przechodzimy do zakładki Ustawienia - Edytuj kod HTML

  2. W kodzie odnajdujemy linię ]]>‹/b:skin›

  3. Wklejamy poniższy kod powyżej odnalezionej linii

    /* 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. Poniżej tej samej linii kodu ]]>‹/b:skin› wstawiamy


    ‹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>


    Tu ważna informacja. Kolejno CloudMin oznacza minimalną ilość użyć, aby tag został wyświetlony (w domyśle jest 1), MaxFontSize to maksymalny rozmiar czcionki elementu, który występuje najczęściej, MaxColor to maksymalna wartość koloru, który jest współzależny MaxColor i MinColor. MinFontColor jest domyślnym rozmiarem najrzadziej występującego elementu. lcShowCount odpowiada za liczbę użyć tagu (false lub true jeśli chcesz, żeby liczba powtórzeń była widoczna).


  5. Ostatecznie pozostaje nam odnaleźć ostatnie miejsce w kodzie: ‹b:widget id='Label1' locked='false' title='Labels' type='Label'/›
    Znajduje się ono prawdopodobnie na samym dole kodu. Zastępujemy tę linijkę następującym kodem:


    ‹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›


wtorek, 16 grudnia 2008
Profesjonalny Hosting

Najnowsze