Cara Membuat Could Tag di Blogger

Oleh Ade Sanusi

8.22.2008

Bagikan :

Tweet

Tag Could / Could Tag apa sih....? kalo udah punya Wordpress sih udah otomatis ada,... yang Menampilkan Kategori, Tag berdasarkan banyaknya /jumlah yang sering di kunjungi... sebelumnya sih ada nih di sini:  [ Maksimalkan Judul Artikel Via Could Tag ] Keliling-keliling nyari inspirasi, coba aja pakek KeyWord [Could Tag /Tag Could] di MBAH  Google, nah.... akhirnya dapet deh... situsnya..... di sini http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html, silahkan mampir ke sana... Upz tapi Penjelasannya di sana bhs. inggris lho.... :D saya buat aja tutorialnya di sini, moga membantu yah.....!!!,

Untuk Membuat Could Tag / tag Could cukup mudah :D soalnya cuman Copy Paste :D Sekarang Masuk deh ke Blogger jangan Baca terus.. :D dah masuk silahkan ke TKPHB (Tempat Kegiatan Pengaturan HTML blogger :D ) jangan lupa Backup dulu yah... kemudian klik [Expand Widget templates] ya dah... nih saya kasih gambarnya dulu deh biar lebih... Jelas:

 

Jika udah liatnya.. di situ Ukuran hurufnya Berbeda antara Tag yang satu dengan yang lain... sesuai banyaknya artikel pada Kategori Label di blog...

Untuk Membuat Could Tag/ Tag Could / Label Could, Sekarang cari kode ]]></b:skin> kemudian copy paste kode 1 di bawah ini dan letakan di Atas kode ]]></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}

Tahap ke Dua, Silahkan Pasang Kode 2 di bawah Ini dan letakan 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>

Selanjutnya Cari Kode /* perhatikan yah... yang penting  ada id='label1' soalnya biasnya pada bagian title sudah di rubah...... */ kurang lebih sperti ini:
<b:widget id='Label1' locked='false' title='Kategori' 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 + &quot;?max-results=100&quot;'>
          <data:label.name/>
        <b:else/>
          <a expr:href='data:label.url + &quot;?max-results=100&quot;'><data:label.name/></a>
        </b:if>
       
      </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Selanjutnya Ganti/Hapus di Atas dengan kode kode 3 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>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 = "<data:label.name/>"; 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] < cloudMin){ continue; } for (var i=0;3 > 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>

Silahkan klik [Preview] untuk mencoba Hasilnya jika sudah Simpan deh... dan sampai di sini sudah Selesai Cara Membuat Could tag di Blogger. STOP !!! Silahkan Mencoba atu Berkomentar sisanya bagi yang ingin Menambahkan pengaturan silahkan lihat perhatikan kode di bawah ini:

var maxFontSize = 20; [Untuk Ukuran terbesar/maksimal Font ]
var maxColor = [0,0,255]; [Warna Maksimal, itu Sistem RGB]
var minFontSize = 10; [ukuran Font terkecil,]
var minColor = [0,0,0]; [ Warna Minimal, sistem RGB ]
var lcShowCount = false; [ Untuk menampilkan Jumlah Artikel /Count Label silahkan ganti false dengan true ]
 #labelCloud {text-align:center;font-family:arial,sans-serif;} [Silahkan ganti Kode yang Warna merah dengan kode ini : text-align:justify; atau text-align:right;dan text-align:left; ini gunanya untuk pengaturan perataan Could tag, tengah (standar) Rata kanan-kirai, rata kanan atau rata kiri....
 #labelCloud  .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} yang warna ungu bisa di ganti menjadi display:block; ini jika
To get the 'Flat' (each entry on it's own separate line) listing of the weighted entries.
Usually if that is set to block you would probably want to change the sort frequency from
alphabetical to frequency. You do that by editing the widget from the Page Elements tab in
Blogger.

And the last bit I'll mention is the line

     #labelCloud .label-count

If you set the lcShowCount variable to true to show the post counts, you could change the
color/size of those numbered entries with that line.
 maklum soalnya saya gak jago bhs. Inggris ih,.,,, :D
 

Jika Ingin Punya 2 Widget, Caranya Gak Usah Menghapus Kode Label..... Silahkan Aja Pasang Di bawah Kode [Widget Labe]noh yang ada background hijaunya, silahkan pasang kode 3 di bawah kode </widget> Kemudaian ubah id='lebel1' menjadi id='label2'

Tag : Tips and Trik