Sabtu, 07 Desember 2013

Browse Manual » Wiring » » » » » » » » » Menambahkan Tag Cloud Non animasi Dengan Menggunakan Javascript

Menambahkan Tag Cloud Non animasi Dengan Menggunakan Javascript

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>

    // Dont 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....

Tidak ada komentar:

Posting Komentar