Blogger İçin Tag Cloud Yapıyoruz !

Öncelikle Template Bölümünden Edit Html kısmına geliyoruz....

]]></b:skin>

Yukardaki kodu buluyoruz. bu kod Css kısmının bitiminde olur.....

Bu kodun üstüne aşağıdaki kodları ekliyoruz.....

/* 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}

__________________________________________________ _______________

]]></b:skin>

kodunun altına ise aşağıdaki JS kodunu

yerleştiriyoruz.....

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

Bu kod sayesinde "Tag Cloud" umuz şekillenecek...

__________________________________________________ __________

Şimdi sıra geldi mevzunun en civcivli kısmına.....

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

Yukarıdaki kodu temada buluyoruz.... Bunu aşağıdaki kodla değiştiriyoruz....

<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&gt;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 = &quot;<data:label.name/>&quot;;
  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] &lt; cloudMin){
         continue;
         }
      for (var i=0;3 &gt; 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>

Bu kısımda sorun yaşıyorsanız.....

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

kodunu silin....

Onun yerine koyacağımız kodları da

</b:section>

kodunun hemen üstüne yerleştirin......

bunu yaptığınızda bi sorunla karşılaşma şansınız en aza iniyor...

Fakat Tag cloud umuz sidebar ın en altında yer alıyor....

Daha sonra onu page elements kısmından istediğimiz yere taşıyabiliriz....

çalışan demo var mı?

bi demo olsaydı iyi olurdu .

buyrun demo fazla tag olmadığı için pek belli olmuyo.....

Çok teşekkürler. İşe yarıyor kardeşim
Aradığım bir konuydu.

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

bu satır benim templatimde bulunmuyor

etiketleri kullanmadığındandır o......

Eğer page elements ten etiketi (labels) eklersen çıkar.......

eklemek istemiyorsan

son deiğimi yapabilirsin......

widgets ın en altındaki </b:section> ın üstüne son kodları yerleştirebilirsin...

teşekkürler

vay hileci