01 April 2009

Membuat Label Menggunakan Javascript | Making use Javascript Label Cloud

* Login to Blogger.com

* Click Edit Menu HTML

* Click Edit HTML -> Previous backup first friend first templatenya by clicking the Download Template Lengkap.Supaya when the error occurred can be started again.

* Click Expand Widget Templates

* Copy paste the following code above ]]></ 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)



* Copy Paste the following code before the code </ head>


<script type='text/javascript'>
/ / Label Cloud User Variables
cloudMin var = 1;
maxFontSize var = 20;
var maxColor = [0,0,255];
minFontSize var = 10;
minColor var = [0,0,0];
var lcShowCount = false;
</ script>


* People looking for the following code:


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


* The information here:


<b:widget id='Label1' locked='false' title='KATEGORI ARTIKEL' 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>



* Replace the above code with the code below:


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

/ / Do not change anything past this point --------------
/ / Cloud function s () ripped from del.icio.us
function s (a, b, i, x) (
if (a> b) (
var m = (ab) / Math.log (x), v = a-Math.floor (Math.log (i) * m)
)
else (
var m = (ba) / 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>



* Replace paper 'ARTICLE CATEGORY' title with a label that you apply

* Click the Save Template button.

* And the results:

No comments:

Post a Comment