blogger için etiket bulutu yaratmak

blogger da etiketler kendi haline bırakıldığında yenisini ekledikçe kenar çubuğunuzda aşağı doğru uzanan ve sayfanın yüklenmesini zorlaştıran bir hale geliyorlar. bende yeni temaya geçişten sonra yine etiketlerimi içerdikleri yazı sayısına göre yazı büyüklüklerini arttıran bir buluta devşireyim dedim ama bu sefer daha araştırmacı oldum, hem flash lı hemde normal java-html kodlu bulutlar buldum.

 

  • html-java karşık etiket bulutunu http://phy3blog.googlepages... adresinde buldum ama ne yazıkki ingilizce bende kendi çapımda türkçeye çevirdim. ilk aşamada blogunuzun şablon html ini düzenle sayfasına giriyorsunuz  sonra html kodlarının olduğu sayfada widget şablonlarını genişlet yapıyoruz.
  • ]]></b:skin> kodunu bulup bundan hemen öncesine aşağıdaki kodları yerleştiriyoruz

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

  • ikinci aşamada ]]></b:skin> den hemen sonrasına aşağıdaki kodları 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>

  • üçüncü aşamada etiketler widgetimizi bloggerda zaten eklemiştik(başta yapmamız gerekiyor aslında unutmuşum :)

<b:widget id='Label1' locked='false' title='Labels' type='Label'/> kodunu arıyoruz Labels yerine widgeti kurarken girdiğiniz başlık olmalı sonra bu kod dahill </b:widget> yazan ilk satıra kadar seçip siliyoruz ve aynı yere aşağıdaki kodları yerleş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>

yazı renklerini maxcolor,mincolor boyutlarını ise minfontsize, maxfontsize satırlarından düzenleyebilirsiniz.

 

  • flash etiket bulutu için bu etiket bulutunun asıl sayfası ise http://www.bloggerbuster.com/... adresinde yine ingilizce ve ince ayarlar için yine bu sayfayı ziyaret edebilirsiniz.
  • birinci aşama şablon html ini düzenlede

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

satırını buluyoruz ve hemen sonrasına aşağıdaki kodu yerleştiriyoruz

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

0 yorum var | yorum yaz:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

Popular Posts

 

Featured Post

Metallica - Low Man's Lyric (Tr sözlü) - Acoustic

Gözlerim gerçekliği arıyor Parmaklarım damarlarımı arıyor Arka kapının eşiğinded bir köpek var Yağmurdan kurtulup içeri girmeli Düşüy...