Membuat Label/Tag Clouds

Posted By anasku
Nahhh pada kali ini saya yang bernama Anas akan menulis artikel yang biasanya digunakan di wordpress dan technorati yaitu Tag Clouds.. jika anda belum mengerti tentang Tag Clouds saya akan menerangkan sedikit pengertianya..
Tags Clouds adalah sebuah Label yang hurufnya tidak rata maka dari itu dinamakn Tags Clouds yang artinya Tag adalah Label dan Clouds adalah awan jadi rengkumanya adalah Label yang seperti awan atau tidak rata.. Nah jika Tags yang hurufnya berbentuk rata biasanya itu adalah tags yang populer di blog anda jika kecil itu kurang populer... jadi pengertianya adalah semakin besar hurufnya maka menandakan kepopuleran dari Tags tersebut... makanya anda membuat tags dengan kata-kata yang sering digunakan dan tepat dengan isi tagsnya tul gakk

Nah jika Anda belum tau Tags Clouds Saya akan memberikan contohnya niii dibawahhh


komputer
, Blogging, Bisnis Online
laptop, Widget Blog, Yahoo, Google,
blogeer, wordpress, SEO
trik-tips Blog
Pernak-pernik Blog
,
other


Nah contoh diatas adalah tampilan Label yang telah dimodifikasi menjadi Tags Clouds... Semakin besar hurufnya maka semakin populer categorinya

Gimanna anda pengen buat gakk kalau pengen nihh dibawah aku ajari caranya..

  1. Log in Ke Blogger Lalu masuk Menu Layout kemudian Edit HTML

  2. Kemudian Taruh Code dibawah diatas Code ]]></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}


  3. Lalu juga taruh Code Dibawah tepat dibawah Code <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>


  4. Lalu Scroll Kebawah coba cari Code seperti ini <b:widget id='Label1' locked='false' title='Labels' type='Label'/>

  5. Lalu Ganti code diatas dengan Code 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>

  6. Selesai Deh kemudian Save
Jika kamu Faham tentang CSS kamu bisa mengotak-atik tampilanya sendiri...

Nahh gimana gampang thoo dengan Tags Clouds kan kita bisa mengetahui Tags mana yang paling populer iya kannn..... kalau begitu sekian dulu yahhh Anas udah gak tahan lagi nih mau belajar hal-hal yang belum aku mengertii.... Jangan lupa isi komentar yahhh.... biar aku bisa membenahi artikel ini jika ada kesalahan .... thanks
Artikel Terkait untuk "Membuat Label/Tag Clouds"


30 comments:

Anonymous said...

wah... seperti janjian aja, aku juga ngeposting hal ini.

Eh nih alamat utk download :(moga masih aktif )
http://rapidshare.com/files/133620628/Internet_Download_Manager_5.14.B.3_www.smforum.net.rar

Anonymous said...

seperti yang dikatakan loedin, cuma ngepostingnya di bidikCOM sedulur tua blog loedin

Anonymous said...

wah blh nich kapan2 ntar dicobain
thank infonya bro...

Anang said...

thanks tipsnya....

Anonymous said...

mantappp

Anonymous said...

mantap boss...tapi sayang blog w ga da space wat kaya gini,,,

Anasku said...

@anang
semoga bermanfaat

@semua yang udah berkomentar terima kasihh yaa..

Ade Sanusi said...

ha ha bagus Mas,... Saya udah Pasang Cuman sudah di ganti dengan FLASH LABEL COULD :D ada di sini: http://dunia-blogger.blogspot.com/2008/08/blogumus-flash-label-could-untuk.html

Subagya said...

hmmm kalau di integrasikan dengan ajax label ya klik di sini ajax label dan Tag Cloud

Admin said...

oke :O

Anonymous said...

eh mas, tags cloud ini bukanya udah banyak widget yang tinggal pake gitu..?

tapi ngomong2 gw suka blog ini. Siip bgt. Tutorialnya orisinil

Anonymous said...

terima kasih kepada semuanay yang telah berpartisipasi....

mungkin bisa berkunjung ke blog-blog baru.. seperti di
http://afridapn.blogspot.com/
http://journalsarticles.0fees.net/
http://blog.raiderhost.com/

Anonymous said...

terima kasih kepada semuanay yang telah berpartisipasi....

mungkin bisa berkunjung ke blog-blog baru.. seperti di
http://afridapn.blogspot.com/
http://journalsarticles.0fees.net/
http://blog.raiderhost.com/

rama said...

keren

Rudy Azhar said...

Ada efek dengan SEO nggak tag seperti ini???

okokoko said...

klo buat blogspot bisa nggak mas B)

tri amri wijaya said...

nga bsa mas

Aje Gile Mantab said...

thanks for your info

http://linkbee.com/BHOX3
http://linkbee.com/EPY1R

sdura said...

Anasku....terima kasih atas tunjuk ajar, malah saya amat gembira bila anasku mengajarkan dgn cara yang amat mudah. blogku lebih cantik kini...

Firman Azka's Blog said...

Dengan Tags cloud akan membuat tampilan blog kita lebih menarik. Terima kasih atas informasinya

raffkhan said...

bener ,, makin keren...

Along said...

Tag Cloud berputar bisa gak ...

Khairul Amri Dalimunthe said...

nice info mas. Mau tanya ni, bisa gk klo label di buat dengan Add widget, tp pakai HTML/javasrcipt?

Trima kasih

cek info said...

kalo gatgetnya sendiri punya sob?
kirim jawaban anda (VISITBACK)

Dwijayasblog said...

Ok,deh. Dicoba dulu, ya. Biar keliatannya ngejelimet tapi pantas dicoba, nih.

Firman said...

waduh, kok gak bergerak ya gan? aku kira kayak blogumulus gitu. tapi makasih gan.. minimal muncul textnya. kalo pake blogumulus slalu nge-blank

HIV AIDS said...

kayanya boleh juga niihh bwt dicoba..makasih infonya gan..

Kolesterol said...

langsung dipraktekn gan..thanks udh shre..

Trigliserida said...

itu dipasang dimana gan..

Hepatitis B said...

penasaran niihh..coba dulu gan..makasih infonya..

Post a Comment

 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas