RSS

Cara Buat Label/Categories TagCloud Efek

T
ag Cloud sudah biasa kita lihat pada blog lainnya,, tapi biasanya mereka mendapatkan itu dengan memanfaatkan sebuah situs untuk mendapatkan Tags Cloud yang di pasang pada blog kita ,,
dan Bloggerplungin saya menuliskan ini agar tanpa bantuan sebuah situs kita dapat menampilkan tag clouds dengan fasilitas yang disediakan oleh blogger dengan mengganti sedikit code html/javascriptnya saja..

Atau dengan mengupload Code Css & javascript ke file hosting tp sekarang dengan cara yg lebih simpel .

Untuk mendapatkan itu anda harus menampilkan label pada blog anda.. dengan cara pilih layout-->Page Element-->Add Page Element.. Pilih Label dan Save.
Kalau sudah Ikuti Cara yang berikut :
1. Pilih Layout lagi terus pilih "Edit Html"... (tidak usah di Expand Widget).
2. Cari Code

Klik show untuk melihat

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

3. Ganti Code  dengan kode yang di bawah ini:

Klik show untuk melihat


<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'/>
<p align='center'>
<script type='text/javascript'>
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [0,255,0];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;{
var m=(a-/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';

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>
</p>
<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>
<br/>Powered By:<small><a href='http://alvizcyber.blogspot.com/2012/01/cara-buat-labelcategories-tagcloud-efek.html</a></small>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>


5. Lalu Cari Code :

]]></b:skin>

6. Ganti Code tersebut menjadi :

Klik show untuk melihat

#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:&quot;&quot; !important}
]]></b:skin>
7. Save dan lihat hasilnya.. Semoga bermnfaat .

NB; sebelum anda mengganti semuanya ada baiknya untuk membackup dahulu template anda, jadi kalau ada hal yang dapat merusak blog anda dapat dihindari, karena anda telah membackupnya lebih dahulu.
Inget tiap templat berbeda beda Tergantung kejelian aja Wekwekwek......

Tukeran Link



Judul: Cara Buat Label/Categories TagCloud Efek
Rating: 100% based on 10 ratings. 5 user reviews.
Ditulis Oleh Unknown

Terimakasih atas kunjungan Sobat beserta kesediaan Anda membaca artikel ini. Kritik dan Saran sobat dapat sampaikan melalui Kotak komentar dibawah ini.
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Related Posts

2 komentar:

Anonymous said...

waaaah... perlu di coba nih...?? tapi efeknya gimana nih...??

Unknown said...

Efek nya bisa di lihat pd tagcloud biasa nya . tp ini lebih simpel gak repot ,,, karna javascript udah langsung di upload .