Membuat Label dengan Teknik Cloud dengan Script dan Non Script

3.12.2009
Setelah sedikit mempelajari mengenai label.Mungkin label buatan blogger cukup simple saja,ingin memberi sedikit sentuhan indah untuk label teman,sentuhan yang cantik dan fresh.


Sebenarnya ini request dari teman saya,Mbak Lyla.

mantep ilmunya... tag cloud nya punya ku ilang kodenya di posting ya... hehee...


Membuat Label Cloud menggunakan Javascript

  • Login ke Blogger.com
  • Klik Menu Edit HTML
  • Klik Edit HTML → Sebelumnya terlebih dahulu teman backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.
  • Klik Expand Widget Template
  • Copy Paste Kode berikut di atas ]]></b:skin>

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

  • Copy Paste kode berikut sebelum 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>

  • Teman cari kode berikut :
    <b:widget id='Label1' locked='false' title='KATEGORI ARTIKEL' type='Label'>

  • Secara lengkapnya begini :

    <b:widget id='Label1' locked='false' title='KATEGORI ARTIKEL' 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>

  • Ganti kode diatas dengan kode dibawah 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>

  • Ganti Tulisan 'KATEGORI ARTIKEL' dengan judul label yang anda terapkan
  • Klik tombol Simpan Template.
  • Maka hasilnya :
Saya telah mencoba trik yang ini,tetapi tidak berhasil mungkin karena tidak compatitable dengan template saya


Membuat Label Cloud menggunakan Non Javascript

Tutorial yang tak asing lagi dari kang jaloe,sebagai pelengkap tutorial ini maka saya akan membuatnya :

  • Login ke Blogger.com
  • Klik Menu Edit HTML
  • Klik Edit HTML --> Sebelumnya terlebih dahulu teman backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.
  • Klik Expand Widget Template
  • Cari kode berikut :
    <b:widget id='Label1' locked='false' title='KATEGORI ARTIKEL' type='Label'>
  • Ganti Tulisan 'KATEGORI ARTIKEL' dengan judul label yang anda terapkan
  • Secara lengkapnya begini :

    <b:widget id='Label1' locked='false' title='KATEGORI ARTIKEL' 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>

  • Ganti kode diatas dengan kode dibawah ini :

    <b:widget id='Label1' locked='false' title='KATEGORI ARTIKEL' type='Label'>
    <b:includable id='main'> <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if> <div class='widget-content'>
    <div style="background:#F0E8F1;margin:2px;
    padding:10px;border:3px #FAF7FA solid;text-align:center;
    text-transform:uppercase;">
    <b:loop values='data:labels' var='label'>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'>
    <data:label.name/> </span> <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
    <data:label.name/> </a> </b:if>
    <span dir='ltr'>(<data:label.count/>)</span>
    </b:loop> </div>
    <b:include name='quickedit'/> </div></b:includable></b:widget>

Sedikit Keterangan :
  1. Kode yang pertama <ul> <li> </li> </ul> dihilangkan.
  2. Kode yang berwarna merah kode yang telah ditambahkan.
  • Simpan Template.
  • Maka hasilnya begini :
Menghapus angka (1) (1) (1) (1) atau jumlah labelnya

Caranya hapus kode ini (<data:label.count/>) dibagian kode dibawah ini.

<b:widget id='Label1' locked='false' title='KATEGORI ARTIKEL' type='Label'>
<b:includable id='main'> <b:if cond='data:title'>
<h2><data:title/></h2>
</b:if> <div class='widget-content'>
<div style="background:#F0E8F1;margin:2px;
padding:10px;border:3px #FAF7FA solid;text-align:center;
text-transform:uppercase;">
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/> </span> <b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/> </a> </b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</b:loop> </div>
<b:include name='quickedit'/> </div></b:includable></b:widget>

  • Maka hasilnya begini :

Semoga tutorial dari saya berguna yapenatkalau berhasil hebat dehpeace.
Terima kasih untuk kang jaloe atas sedikit pengetahuannya.

31 komentar:

  • Siip Wan, makasih infonya...

  • Syamsul Alam

    Wew....... ga capek lo nulis beginian...... wkwkkwkwk........

  • plague doctor

    wah, hebat,
    thx yap.
    TAPI ini kalau mau nulis label baru berarti haruz ada yg diedit lagi dong

  • beat2ws

    Pasti berguna. Tapi belum kepikiran mau ganti :)

  • wahh..
    kamu makin pinter aja Wan...emang kecil-kecil cabe rawit nihhh...

  • Unknown

    mantab mas,,makin siip aja..

    wah abis ini kudu bikin blog baru ni buat praktek tutorialnya mas ridwan..

  • simpen dulu aja ah..
    sekarang blom perlu, besok2 kalo dah mo pasang.
    hahaha,,,,

  • wuihhh sip tambah pinter ae temenku satu ini *ngaku2*

  • Haqielicious™

    sulidh kok gagg nggaruh apa2 yah

  • Kristina Dian Safitry

    sentuhannya romantis banget fren,he..he..

  • Unknown

    Makasih atas tutorialnya...

  • makasih ya Ridwan...
    suadah mau ngasih tutorial buat kita2 yg newbie
    termasuk saya
    :)

  • TEAM 13

    Mas Ridwan, tolong saya donk, saya baru upload templates, tapi di postingnya gak ada quickeditnya,gimana cara menampilkan quickeditnya ya mas,kalo bisa kirim aja tolong kirim ke email saya ya mas, toloong banget ... :D ... n0l4bel@gmail.com ... thx before ... salam ...

  • wah... pantas dicoba nih..:D


    semakin membuat keren aja ..

  • keren bgt nih blog.... saya pgn pnya blog kyk gini... mantap mas... hehehe...

  • annisaharoen

    BERHASILLLL............:))

  • unik jg yang g pake script....hehehe

  • Unknown

    wah, aku berhasil merubahnya. tapi aku gak hilangin data countnya. tks ya.....

  • wah yang ini juga keren labelnya :)

  • bening

    sipppp...
    thanks atas infonya
    langsung praktek

  • keren boss lengkap betul tips nya..

    BTW, link Tukang Arsip dah tertempel ditempatku. link aku juga yah... sukses terus di top seratus.

  • Mantap Wan infonya

  • Unknown

    ZZZZZZZzzzzzzzzzzzzzzzzzzzzZZZZZZ

  • risti

    keren nich boss. oh ya link nya dah lama namgkring di tempatku, bisakah link saya juga nempel disini ? trims

  • donkissotes

    makasih pencerahannya bro,,aq coba yg non jvscrip tp icon pengganti angka tdk muncul spt sampel anda ya??
    regards
    donkissotes.blogspot.com

  • rajalampu.blogspot.com

    http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif

    thanks banget bro..
    saya mau nanya nih... gimana agar title blog kita pas di cari search engine itu sesuai dengan desciption blognya..

  • semua tentang bangka barat

    nice, tp ribet.....................gwe coba deh................

  • xhabcx

    wawww panjang amat scriptnya kang :D
    Sbnerny pgn buat jg kyk gt tp percuma kayakny kl d copy paste ke notepad pada berantakan :D

    Cb kalo ad file mentahny bentuk zip misalny :Dv it jg kl blh usul kang

  • Posting Komentar

    Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

    Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

    Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

    Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia. Jika anda tidak punya blog/website, kolom URL boleh dikosongi.

    Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)