Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com

Cara Membuat Label Cloud

Ehm, sebenarnya udah banyak niih yang kasih tau tentang trik ini, trik membuat Label jadi Cloud, tapi karena permintaan dari temen gue postingin aja deeh. Semoga gak lelah nunggunya yaa??? Hehe....Buat Screen shoot-nya bisa dilihat di gambar di bawah ini:

Ehm, label kayak gini menggunakan format label yang paling banyak postingannya adalah label yang paling besar model hurufnya, jadi kalo semakin banyak postingan label tersebut, semakin besar ukuran label ini. Ah, daripada susah neranginnya langsung aja yaa?? yang penting udah tau maksud gue dan udah tau gambarnya kayak gimana..hehe...nii dia:

  1. Login dulu ke Blogger
  2. Kemudian Langsung ke Layouts/Tata Letak--->Edit HTML
  3. Sebaiknya download dulu template kamu sebelum melakukan perubahan/pengeditan agar bisa menanggulangi kesalahan kalo meng-edit
  4. Copy dan Paste kode di bawah ini di atas kode ]]></b:skin>
    /* Trik Label Cloud by Die-Silver
    ----------------------------------------------- */
    #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}
  5. Buat kode yang ada di dalam kode berwarna merah bisa kamu ubah
  6. Cari kode </head> kemudian taruh kode ini di atasnya:
    <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>
  7. Kalo udah, kemudian cari kode di bawah ini:
    <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>

  8. Ganti kode di atas dengan kode di bawah 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>
    </li>
    </b:loop>
    </ul>
    </noscript>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
  9. Tinggal Simpan deh broo....



Oke, akhirnya selesai juga deegh, semoga bermanfaat yaaaa??? :r

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com
Gunakan Tombol berikut untuk menyimpan halaman :
Cara Membuat Label Cloud
menjadi format PDF dan lebih maksimal jika terdapat kesalahan koneksi atau yang lainnya.

..::Artikel Menarik Lainnya::..

23 comments:

Azwardi Rizal June 9, 2009 at 11:14 AM  

Aq yang pertama baca ne.. mo di coba dlu ach.. thx ya..

Azwardi Rizal June 9, 2009 at 11:25 AM  

Wah, berhasil... :) jd seneng hr nie bs update blog sdikit dm sedikit..

Denny June 9, 2009 at 12:57 PM  

oh ini to yang mau di tulis,, mantabs2..

hehehe tadi koneksiku putus bro,, jadi ngobrolnya to be continued neh :))

hahahaha

otto June 9, 2009 at 9:23 PM  

thanks bro, good info

eSTe June 10, 2009 at 4:25 PM  

BUat tampilan sih tambah manis..tapi blog jadi agak berat dibuka...kasian pengunjungnya kalo harus kelamaan nunggu blog kebuka..hehehe..nice info!!

Awal Sholeh June 11, 2009 at 12:10 AM  

perlu belajar banyak neh sob. PRNya dah 3 yah? sukses bro.

snifan June 11, 2009 at 8:07 PM  

udah coba tapi gagal

Teresa June 12, 2009 at 12:51 PM  

berguna banget nih, tapi gak bisa buat saya soalnya blog saya old blogger :)
salam kenal yaah... nice blog (gak ada shoutbox???)

japraxxx June 12, 2009 at 7:02 PM  

wah boleh ne...kpn2 aj dicobanya....save dulu... :D

Opung June 13, 2009 at 11:09 AM  

keren sob..boleh coba neh.

otto June 13, 2009 at 11:34 AM  

topik n artikel bgs, tp cr post u yg krg mengena buat ndongkrak SEO,

H-FiZ June 14, 2009 at 5:32 PM  

wew... Ribet..

Rasanya saya content sama yang biasa juga.. :D

Video Tips SEO June 14, 2009 at 9:14 PM  

saua juga uda pasang nih di blog.. hehehe.. :P

Wadah Kreativitas Seni Ibanic June 15, 2009 at 2:17 PM  

nah...nie bisa juga buat belajar...
thanks bgt...
jgn lupa lht2 bloq kami wksibanic.blogspot.com..

cara belajar June 19, 2009 at 11:18 AM  

sebenernya mau sih naruh Cloud, tapi label aku banyak banget.....

jadi gk enak dilihatnya... =)

ada gk ya supaya lebih rapi lg

jgn lupa mampir yha.... =)

Cara Belajar

start action June 19, 2009 at 11:32 AM  

makasih mas tips nya keren mantep abis

Anonymous,  June 22, 2009 at 4:38 AM  

terima kasih!

Rusli Zainal Sang Visioner July 3, 2009 at 7:04 PM  

eh aku mau pasang2 ini,, tapi masi bingung juga :D

Rendi July 10, 2009 at 11:44 AM  

bookmark dolo ah....
sapa tau butuh nanti

Blogger Tutorial July 15, 2009 at 1:30 AM  

bro.. ada artikel menarik ga buat di posting?

ugg outlet store November 1, 2010 at 7:46 PM  

Thank your for sharing the experience of your life. We are at the same place. We can figure out the way it should be by sharing.

Post a Comment

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 atau dapat juga diganti dengan email anda.

Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi. Lebih baik anda gunakan pilihan dibawah ini:

Jika ingin komentar anda tidak dipublikasi, silahkan klik disini.

Terima kasih, komentar anda sangat berarti untuk die-silver.blogspot.com
:a: :b: :c: :d: :e: :f: :g:
:h: :i: :j: :k: :l: :m: :n:

newer post older post home

About Me

My Photo
ardi33
Sangat bercita-cita menjadi seorang webmaster yang selalu dapat memberikan yang terbaik dan bermanfaat kepada semua orang, dan sekarang sedang dalam tahap pembelajaran yang tak kenal lelah!!!
View my complete profile

Stats

Blog Rank:Powered by  MyPagerank.Net
Traffic Rank:Alexa Certified Site Stats for http://die-silver.blogspot.com
Online Visitor:
Blogger Template by Ardi33.Web.id.
Originally Die Silver Template Edited by TemplateZone