Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

New Blogger Label Cloud

Setelah kemarin mudik ke bandung selama dua hari nengokin si kembar yang semakin hari
semakin gemesin aja, akhirnya saya balik lagi deh ke jakarta untuk mencari rezeki buat membiayai istri tercinta serta si kembar yang sudah mulai pintar jajan. Yups, tidak usah lama-lama curhatnya, ntar jadi malah garing. OK, kita kembali ke……blog tutorial tentunya. Tutorial kali ini saya ingin membahas tentang pemasangan label Cloud atau Tag Cloud pada template baru/new blogger template.

What’s the meaning of Label Cloud?

Label cloud adalah pemasangan label (kategori) dalam bentuk cloud…. ( desiiig kalau gitu doang ga usah di terangin atuh… abis ga tau definisinya jadi ya asalan-asalan deh), seperti yang sobat lihat pada sidebar sebelah kanan blog ini yaitu di bawah tulisan Kategori
di sana terdapat beberapa label (kategori) yang pada ujungnya tertera berapa jumlah kategori yang terpasang pada kateori tersebut.

Nah itu adalah label yang umum di pakai di blogger, bila ingin sedikit yang berbeda, sobat bisa memasang label cloud. Dengan label cloud, label (kategori) akan di tulis dalam ukuran font yang berbeda sesuai dengan banyaknya kategori yang di pasang, semakin sering kategori tersebut maka semakin besar pula font nya akan tercetak.

Untuk memasang label cloud, tehnik yang saya pakai kali ini adalah buah karya dari phydeaux.
Silahkan ikuti langkah-langkah berikut ini :

  1. Sign in di blogger
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
  5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang.
  6. Tunggu beberapa saat sampai proses selesai
  7. Simpan kode berikut di antara kode <b:skin><![CDATA[ dan kode
    ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
    ]]></b:skin>

  8. /* 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}
  9. Copy paste kode berikut sesudah kode ]]></b:skin> dan sebelum kode </head>
    atau jika bingung simpan saja persis di atas 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>

  10. Cari kode berikut di dalam kode template sobat

  11. <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>

  12. Ganti kode di atas dengan kode berikut ini :

  13. <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>

  14. Klik tombol Simpan template
  15. Selesai.

Bagaimana sobat, berhasilkah? mudah-mudahan tidak menemui kendala apapun. Untuk melihat contohnya, silahkan sobat klik di sini !

Iklan

14 Agustus 2007 - Posted by | blog tutorial, make label cloud

17 Komentar »

  1. trim artikel ttg label cloud-nya, saya langsung praktekkan dan berhasil. sekali lagi trims.

    Komentar oleh Jalu | 14 Agustus 2007 | Balas

  2. trims…

    Komentar oleh M Fahmi Aulia | 22 September 2007 | Balas

  3. trim ilmunya, tapi saya gagal tu mas

    Komentar oleh Rizki Eka Putra | 5 Oktober 2007 | Balas

  4. wahhh…kren bozz….tapi kalo isa jgn pake jumlah…cara ngilangin jumlah na gimana bozz yah..?

    Komentar oleh Anonymous | 31 Oktober 2007 | Balas

  5. Thanks mas atas penjelasannya,,,, aq dah banyak belajar ni dari blognya mas rohman.
    tapi mas, kalo misalnya label itu kita buat menurun seperti ini gimana caranya:

    contoh;
    1. bla..bla…
    1.1 bla..bla..
    1.1.1 ………….
    1.1.2 ………….
    1.2 bla..bla..
    1.2 dst

    2. bla..bla..
    2.1 bla..bla..
    2.2 bla..bla..
    2.3 dst

    Tolong ya mas, dah lama cari caranya ga ketemu-ketemu.
    salam persahabatan…..

    Komentar oleh I P A N | 6 November 2007 | Balas

  6. trima kasih ilmunya tapi koq tampilannya gak seperti kang rohman..juga masih ada jumlahnya.
    http://bojongcity.blogspot.com

    Komentar oleh Indra Gunawan | 8 Desember 2007 | Balas

  7. oms buat rubah warna huruf-na gimana soal-na templateQ background-na hitam jadi gak keliatan deh tuh label-na

    Komentar oleh bL4cK_3N91N3 | 20 Januari 2008 | Balas

  8. Satu lagi ilmu dari Kang Suhu langsung dipasang di blog saya.
    Makasih…

    Komentar oleh Herry | 20 Februari 2008 | Balas

  9. saya baru nyoba neh….telat banget ya? ha ha ha.. yang penting aku berhasil….makasih kang rohman!!!!

    Komentar oleh syahuri | 15 Maret 2008 | Balas

  10. waduhhh tambah binun deh

    Komentar oleh xander | 20 April 2008 | Balas

  11. nha, ini dia yg saya cari…makasih ya kang rohman 🙂

    Komentar oleh Ranggalawe Istifajar Rullinda | 18 Mei 2008 | Balas

  12. walah kang…koq g ketemu ya b:skin nya ya kang…maap merepotkan
    terimakasi atas tutorialnya

    Komentar oleh Anak Bebas | 3 Juli 2008 | Balas

  13. huehueheueh..ga baca yang paling atas…:(( maap kang..soryy..sukses selalu

    Komentar oleh deden | 4 Juli 2008 | Balas

  14. kang…tapi ngubah warnanya gimana??? plizz…

    Komentar oleh Imen | 18 Agustus 2008 | Balas

  15. wahh……….g ktemu kode yg trakhir..

    Komentar oleh rese | 27 Agustus 2008 | Balas

  16. Waduh kang…. saya sudah pasang.. tapi labelnya gak muter tuh… apanya yang salah kang!!!! (http://hot-request.blogspot.com/)

    Komentar oleh Dimas Heru Cakra | 4 September 2008 | Balas

  17. berhasil, kang..terima kasih ya..

    Komentar oleh iam | 4 September 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: