earth

Guestbook

/* Iklan google ads */
Sebelumnya saya sudah memaparkan bagaimana cara menambahkan tag Cloud non-animasi dengan menggunakan gadget blogger. Nah, kali ini saya akan membahas bagaimana cara menambahkan tag Cloud non-animasi dengan menggunakan javascript. Karena seperti yang sudah dijelaskan pada tulisan sebelumnya, bahwa tidak semua template mendukung tag Cloud gadget blogger, seperti template Jeans 3C. Template-template ini biasanya merupakan hasil konversi dari template wordpress. Jadi untuk template jenis ini sebaiknya menggunakan javascript jika kamu ingin menambahkan widget tag Cloud.

Cara menambahkan tag Cloud non-animasi dengan javascript ini (yang animasi, tunggu saja tulisan berikutnya, hehehe.....), sebenarnya saya ambil dari Suriyadi.com, dengan sedikit melakukan perubahan script HTML-nya. Berikut adalah langkah-langkahnya:
  • Seperti biasa, Login ke akun Blogger kamu.
  • Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.
  • Duplikasi template untuk berjaga-jaga jika terjadi masalah.
  • Kopikan kode CSS berikut:
    /* Label Cloud Non-animasi 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:none; font-weight:bold}
    #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}
    
  • Letakkan kode CSS tersebut di atas kode ]]></b:skin>.
    Untuk memudahkan pencarian, tekan Control F atau F3.
  • Kemudian kopikan script berikut:
    <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>
    
  • Letakkan script tersebut di bawah kode ]]></b:skin>.
  • Selanjutnya kopikan script berikut:
    <b:widget id='Label73' locked='false' title='Tag 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>
    
  • Letakkan script tersebut di bawah kode <b:section class='sidebar' id='sidebar' preferred='yes'>.
    Jika tidak ditemukan, cari kode id='sidebar' atau id='sidebars', lalu letakkan di bawahnya.
  • Lakukan Pratinjau, jika sudah OK, Save hasil kerjaan kamu dan ucapkan Alhamdulillah.....

Untuk tag Cloud yang menggunakan javascript ini memang cukup ribet. Jika kamu tidak hati-hati bisa-bisa template kamu tidak dapat di-parse. Tapi jika kamu sabar dan hati-hati dalam menempatkannya, Insya Allah semuanya akan berhasil dengan baik.

OK coy, segitu aja untuk Tag Cloud non-animasi ini. Selamat mencoba....
  • Artikel Terkait Dengan Blog Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    2 komentar

    Ngamimitian kang...
    Hayang ngoprek blog teh, tapi can aya waktu wae unk kang
    Sperti biasa, good good good

    17 Oktober 2009 12.23  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler