banner
banner CN
Kunjungi Blog Baru Kami di PROZONAS.COM

Kamis, 12 Agustus 2010

Home » » Tutorial Cara Membuat Label Cloud

Tutorial Cara Membuat Label Cloud

بسم الله الرحمن الرحيم

Tutorial Cara Membuat Label CloudLabel atau Kategori berfungsi untuk mengelompokkan posting-posting yang ada pada blog. Label juga mempermudah para pengunjung blog mencari posting yang meraka inginkan berdasarkan kategorinya.

Sobat pasti sudah pernah melihat Label-Label pada blog yang berbentuk daftar yang bentuknya vertikal alias dari atas ke bawah. Untuk memperindah atau agar tidak standart, Sobat bisa membuatnya menjadi Label Cloud (label yang menyerupai awan). Cara kerjanya, jika posting pada kategori 1 paling banyak, maka kategori 1 berukuran paling besar dan kategori lain akan lebih kecil sesuai dengan frekuensi banyaknya posts.

Untuk membuatnya ada 2 cara. Cara pertama menggunakan kode html dan yang kedua menggunakan fasilitas widget yang sudah tersedia di blogger.


Membuat Label Cloud dengan Kode HTML
  1. Pertama Login ke akun blog Anda.
  2. Pilih Layout / Tata Letak / Rancangan.
  3. Klik tab Edit HTML.
  4. Jangan lupa untuk membackup template Sobat terlebih dahulu...,
  5. Cari kode ini ]]></b:skin> (Gunakan Ctrl + F untuk mempermudah pencarian). Lalu Copy Paste Kode ini di Atas kode tadi.

    /* 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:&quot;&quot; !important}
  6. 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>
  7. Selanjutnya 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>
  8. Hapus kode tersebut dan ganti dengan kode di bawah 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>
    </li>
    </b:loop>
    </ul>
    </noscript>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
  9. Terakhir Simpan Template.

NB : Teliti dalam mencari dan menempatkan kode, agar widget bisa berjalan.


Membuat Label Cloud dengan Gadget
  1. Pilih Layout / Tata Letak / Rancangan.
  2. Klik Tambah Gadget.
  3. Cari Gadget Label dan klik simbol +.
  4. Dan Lakukan pengaturan Gadget, seperi gambar di bawah ini.

    Tutorial Cara Membuat Label Cloud


Sekian Tutorial Cara Membuat Label Cloud.

Semoga Bermanfaat...

by ooG_4u

Klik Tombol "SKIP AD" (setelah 5 detik) Untuk Link Download yang Menggunakan Fasilitas AdF.ly
Kamis, 12 Agustus 2010 | |

Recomended Post

Berikan Kritik, Saran atau Tanggapan melalui Komentar Sobat

 

Saling Follow Sobat

Blog Directories

W3 Directory - the World Wide Web Directory



© Copyright 2010. Catatan Ngeblog . All rights reserved | Powered by Blogger.com | Template by zoomtemplate.com - Modified by Catatan Ngeblog
Al Qur'an