Modifikasi Label Cloud Dari Blogger

Beberapa waktu yang lalu, Blogger telah menambahkan fitur baru yaitu label cloud. Saya sendiri tidak tahu pasti kapan Blogger menambahkan fitur ini, setelah minggu lalu saya secara tidak sengaja ingin menampilkan label pada blog saya yang lain, saya melihat ada yang baru tapi lama.

 

Baru tapi lama ? iya dong, kan label cloud sudah sering kita jumpai tutorialnya di berbagai blog.

 

Setelah mencoba, rasanya fasilitas label cloud ini kurang menarik tampilannya. Saya mencoba untuk menambahkan beberapa kode pada HTML blog untuk merubah warna dan besarnya huruf pada label cloud ini.

Karena memang label cloud asli dari blogger ini warna dan hurufnya sangat standard atau terlihat biasa � biasa saja. Saya menambahkan beberapa warna kedalamnya, untuk mengetahuinya silahkan sobat ikuti langkahnya berikut ini.

 

1. Seperti biasa, sobat login ke blogger.

    

2. Klik Tata Letak.

    

3. Kemudian klik Edit HTML.

    

4. Backup dulu template sobat dengan mengklik Download Template Lengkap.

    

5. Kemudian letakkan kode berikut tepat diatas kode ]]></b:skin>

    

   .label-size-1 a {
   font-size: 13px;
   text-decoration: none;
   color:#4B8A08;
   }
   .label-size-2 a {
   font-size: 15px;
   text-decoration: none;
   color:#DF0101;
   }
   .label-size-3 a {
   font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;
   color:#045FB4;
   }
   .label-size-4 a {
   font-size: 18px;
   text-decoration: none;
   color:#DF7401;
   }
   .label-size-5 a {
   font-size: 23px;
   text-decoration: none;
   color:#045FB4;
   }

   .label-size-1 a:hover,
   .label-size-2 a:hover,
   .label-size-3 a:hover,
   .label-size-4 a:hover,
   .label-size-5 a:hover { text-decoration:underline;}

         
    

6. Kemudian Simpan Template.

 

Sekarang sobat bisa lihat hasilnya, ada beberapa warna yang saya tambahkan ke dalam label cloud tersebut. Untuk kode yang saya tandai dengan warna merah, sobat bisa ubah sendiri sesuai keinginan sobat. Kode warna bisa sobat lihat disini.

 

Selamat mencoba !!

Membuat Label Cloud Berputar

Label adalah pengelompokkan artikel blog dalam satu kategori, dan kemudian biasa di pasang di sidebar atau mungkin di bagian bawah template. Saat ini model atau bentuk label ada 3, label umum atau yang biasa (standard), label cloud, dan label cloud berputar. Yang akan kita bahas sekarang adalah memasang label cloud berputar di blog

Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.

Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template sobat, jadi saran saya nanti sebelum mengedit template, ada baiknya backup terlebih dahulu template sobat.

I. Langkah Pertama

 

1. Login ke Blogger dengan ID sobat.

    

2. Klik Tata Letak

    

3. Klik tab Edit HTML

    

4. Download dahulu template sobat dengan mengklik Download Template Lengkap

    

5. Kemudian klik button Expand Template Widget dan cari kode yg seperti ini : 

    

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

    

6. Copy kode berikut ini setelah kode diatas :

    

   <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://sites.google.com/site/bloggerustemplatus/code/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://sites.google.com/site/bloggerustemplatus/code/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>

    

7. Kemudian Simpan Template.

II. Langkah Kedua 

• Mengubah lebar dan tinggi kolom serta warna background 

   

  Angka "240" adalah lebar kolom
  

  Angka "300" adalah tinggi kolom
  

  Sedangkan #ffffff adalah kode untuk backgroud
  

   

• Merubah warna font, untuk kode warna bisa sobat lihat disini

   

  so.addVariable("tcolor", "0x333333");

   

• Merubah ukuran font

   

  so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

 

Jika dalam membuat label cloud ini tidak berfungsi, silahkan sobat ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :

 

 

Hanya itu ilmu yang bisa saya bagi-bagi, terima kasih buat roytanck dan amanda fazani yang telah menyediakan javascript untuk label cloud ini. Jika ada pertanyaan silahkan isi di kolom komentar.

Cara membuat Label Cloud

Untuk membuat tampilan label atau kategori lebih menarik, sobat bisa mencoba menggantinya dengan label yang menyerupai awan atau yang lebih dikenal dengan nama label cloud. Untuk membuatnya, lagi - lagi sobat harus mengotak - atik kode HTML blog sobat, jadi sebaiknya backup terlebih dahulu template sobat ubtuk menghindari kerusakkan pada template sobat.

1. Login ke Blogger.
   
   
2. Klik Tata Letak--> Edit HTML.
   
   
3. Jangan lupa backup dulu ya template nya.
   
   
4. Kemudian copy paste kode berikut diatas kode ]]></b:skin>
   
   
   /* Label Cloud
   ----------------------------------------------- */
   #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}
   
   
   
   
5. Kemudian letakkan kode berikut ini diatas 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>
   
   
   
   
6. setelah itu cari kode seperti dibawah ini :
   
   
   <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>
   
   
   
   
7. Hapus kode tersebut dan ganti dengan kode berikut :
   
   
   <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>
   </li>
   </b:loop>
   </ul>
   </noscript>
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   </b:widget>
   
   
   
   
8. Save Template.

Panjang ya..jangan sampai ada yang ketinggalan dalam proses copy paste kode - kode diatas, karena ketinggalan satu elemen saja label cloud tidak akan berhasil dibuat. Untuk membuat label cloud berputar akan saya bahas selanjutnya. So..selamat memandangi label cloud sobat yang baru..