Label Cloud For New Blogger

Label Cloud For New Blogger, pengetian Label cloud sendiri yaitu label yang berupa cloud, jadi label menyerupai awan, label tersebut bentuknya ada yang besar adapula yang kecil, ah.. pusing juga pengertian sebenarnya apa label cloud itu?.. tidak usah pikir panjang lagi ini dia cara membuatnya :
   1. Sign in di blogger
   2. Klik menu Layout
   3. Klik menu Edit HTML
   4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
   5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang.
   6. Tunggu beberapa saat sampai proses selesai
   7. Simpan kode berikut di antara kode <b:skin><![CDATA[ dan kode
      ]]></b:skin&gt; , atau jika bingung simpan saja persis di atas kode
      ]]></b:skin&gt;

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

   8. Copy paste kode berikut sesudah kode ]]></b:skin&gt; dan sebelum kode </head&gt; atau jika bingung simpan saja persis di atas kode </head>

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

   9. Cari kode berikut di dalam kode template sobat

      <b:widget id='Label1' 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'>
      <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>
      <b:include name='quickedit'/>
      </div>
      </b:includable>
      </b:widget>

  10. Ganti kode di atas dengan kode berikut ini :

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

  11. Klik tombol Simpan template
  12. Selesai.

Selamat mencoba. kunjungi terus blognya tutorial ipitoon ok, sampai ketemu lagi pada postingan tutorial berikutnya.

0 Response to "Label Cloud For New Blogger"