Cara Membuat Label Cloud

It Me at 11:54:00 AM

Mungkin rekan-rekan blogger sudah banyak yang tahu bagaimana caranya membuat label cloud, tapi tidak ada salahnya kali ini saya akan membahas tentang Membuat LABEL CLOUD. Mungkin dari rekan-rekan yang baru saja membuat blog dengan menggunakan blog hosting layanan om google merasa tampilan Widget Label di blog anda kurang menarik, anda dapat merubah widget tersebut menjadi variasi Lable Cloud atau dengan menggunakan Label Flash. Tapi sebelum melangkah lebih jauh tentang bagaimana caranya membuat label cloud, mungkin kita ingin mengetahui apakah yang dimaksud dengan label cloud? Label cloud merupakan label mempunyai bentuk catchy seperti awan dan sangat cocok dengan desain web 2.0 yang sedang trend saat ini. Sudah jelaskan apa yang dimaksud dengan Label Cloud???? Kalau belum ya... tidak tahu lah saya.... Bila sudah jelas ya syukurlah.... Kita lanjut aja ya ke cara pembuatan label cloud-nya: Berikut Langkah-langkah membuat Label Cloud:

1. Buka Blogger milik anda
2. Setelah masuk lalu pilih Layout setelah itu pilih Edit HTML, jangan lupa Back Up (Download templet anda untuk berjaga-jaga apabila terjadi kesalahan pada saat pembuatan widgetnya, lalu pilih Expand Widget TemplateTunggu beberapa saat.
3. Cari Kode di bawah ini ]]></b:skin>
4. Tempatkan kode berikut tepat sebelum kode tadi

   /* 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}

5. Lalu kita akan meletakkan kode untuk konfigurasinya. Jadi temukan kembali kode ini:

   ]]></b:skin>

6. Letakkan kode berikut tepat setelah kode tadi.

   <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. Untuk widgetnya temukan terlebih dahulu widget label yang sebelumnya sudah ada dari Blogger dengan mencari kode berikut:

   <b:widget id='Label1' locked='false' title='Labels' type='Label'/>

   Copy kode berikut ini semuanya untuk menggantikan kode widget Blogger tadi.

   <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'> 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>

8. Simpan Pekerjaan yang telah dibuat tadi.

Selamat Mencoba......

Share : Cara Membuat Label Cloud

• Facebook
• Twitter
• Stumble
• Pinterest
• Google+

About It Me

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.