Processing: Tag Cloud

Rabu, 31 Oktober 2012

Membuat Label / Tag Cloud / Kategori Animasi Keren (Cumulus)

Cara Memasang Tag Cloud atau Label Animasi Berjalan (Cumulus)

Membuat Label / Tag Cloud / Kategori Animasi Keren (Cumulus) - sebenarnya artikel ini telah dipubllikasikan para blogger sekitar 5 tahun yang lalu.
Masih ingatkah sobat dengan artikel pertama dari blog sederhana ini?
Yup adalah membuat tag clouds.

Hanya saja,tag clouds yang dulu kami sharing belum memiliki variasi maupun efek animasi yang sedang marak belakangan ini.
Adalah cumulus tag clouds,sebuah tampilan 'label' pada blogger yang memiliki variasi tebal dan tipis pada huruf serta animasi yang memperlihatkan seolah label dapat bergerak memutar.

Seperti pada gambar berikut:

membuat tag cloud berjalan bergerak memutar.

Langkah dan Cara Membuat Tag Cloud atau Label Animasi Berjalan (Cumulus)

Pertama,sobat harus memasang / membuat / menerapkan label pada blog milik sobat terlebih dahulu,caranya silakan baca artikel Membuat Label / Kategori.

Atau jika belum paham ikuti langkah berikut (ilustrasi gambar aja ya):

cara memasang kategori berjalan animasi memutar

Nah,setelah sobat sudah memiliki widget label,kini kita rubah menjadi cumulus tag cloud seperti pada pembahasan malam hari ini.

Pertama,sobat pergi ke Dashboard lalu pilih Template:

Selanjutnya,pilih Edit Html:

Setelah itu,pilih Proceed:

Setelah itu contreng 'Expand Widget Template':

Dan cari kode berikut (jika sobat telah menerapkan widget label,pasti ada kode berikut pent-):

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

Jika sudah ketemu,highlight (tandai / blok) barisan kode dibawahnya,termasuk kode tersebut,kode yang sobat tandai kurang lebih seperti 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 expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Nah,HAPUS! kode barisan kode tersebut dan gantilah dengan kode berikut:

<b:widget id='Label786' 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'> <script src='http://bloggerblogwidgets.googlecode.com/files/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Flash Labels by <a href='http://www.way2blogging.org'>Way2Blogging</a></div> <script type='text/javascript'> var so = new SWFObject("http://bloggerblogwidgets.googlecode.com/svn/trunk/way2blogging_tagcloud.swf", "tagcloud", "250", "300", "7", "#FFFFFF"); so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x000000"); so.addVariable("hicolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Lalu simpan.

Nanti akan ada konfirmasi seperti ini,maka pilih 'Delete Widgets,dan lihat hasilnya.

Penting:
Untuk modifikasi,silakan sobat atur pada situs sumbernya,adalah di:

way2blogging.org.

Semoga berhasil ya gan.Maaf artikel usang,hihihi (buat isi posting sob :( hehe)

Minggu, 18 Januari 2009

Membuat Tag Clouds

Tag Clouds ...

Untuk membuat tag clouds,anda harus sudah membuat label pada situs anda.
Pilih bagian Dashboard ke Pengaturan lalu pada Page Element tambah halaman baru add widget, pilih Label.

Setelah itu Edit HTML kemudian beri tanda centang pada Expand Widget Templates.

Cari kode :

]]></b:skin>

Klo dah ketemu,lalu copy paste kode di bawah ini diatasnya :

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

Setelah itu,tepat di bawah kode :

]]></b:skin>

copy paste kode di bawah ini :

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

Lalu simpan template.

Langkah terakhir,masih pada Edit HTML cari kode di bawah ini :

<b:widget id='Label1' locked='false' title='cloud' type='Label'>
&lt b:includable id='main'>
<b:if cond='data:title'>
<h2></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'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>

</b:widget>

Kalau dah ketemu,ganti kode diatas dengan kode di bawah ini :

Alangkah baiknya backup terlebih dahulu template ke komputer anda,Tapi klo dah percaya,ya langsung ganti aja.

Akurat koq :)

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

Processing