Integrasi Ajax Label dengan Label Cloud

Ketika saya berkunjung ke blog sobat Sawa , saya menemukan kalimat yang mengena buat saya “Blog ini kan sebenarnya ini hanyalah catatan elektronik saya, hanya bermaksud untuk mengingatkan saya.“ ,  kutipan di tersebut membuat saya semangat lagi untuk mengeblog lagi di saat saya sedang bimbang, jadi saya menulis ulang blogger hack ini untuk sekadar mengingatkan saya. Ok deh to the point ajah, sebenarnya blogger hack ini sudah pernah di bahas di blog kang Jaloee, mengenai Ajax label.

Blogger hack ini menurut saya sangat bermanfaat sekali. Karena memanggil summary dari postingan kita tanpa merefresh halaman blog sobat, kalau mau lihat yang punya blogger hack silahkan klik disini, nah di sini saya akan coba mensadur kembali blogger hack tersebut dengan mengintegrasikannya ke dalam label cloud punya si Phydeaux3 dan di integrasikan oleh Deepak dengan Ajax labelnya. Hasil dari blogger hack tersebut dapat di test di bog ini, silahkan sobat pilih label yang di kehendaki dan lihat hasilnya. Kalau tertarik silahkan sobat melanjutkan membacanya.

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Pertama kita install terlebih dahulu Label cloudnya, caranya adalah cari kode di ]]></b:skin> kemudian masukkan kode dibawah ini sebelum kode tersebut :

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

3. Setelah selesai masukan kode di bawah ini sesudah kode ]]></b:skin> :

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

Simpan hasil pekerjaan sobat terlebih dahulu

4. Nah di langkah ini saya sudah memasukkan kode dari ajak label supaya memudahkan instalasi ajax labelnya, yang perlu sobat lakukan adalah cari kode ini, tanpa mencentangkan expand widget

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

Setelah ketemu ganti kode tersebut dengan kode 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&#39;t change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
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(&#39;labelCloud&#39;);
ul = document.createElement(&#39;ul&#39;);
ul.className = &#39;label-cloud&#39;;
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(&#39;li&#39;);
li.style.fontSize = fs+&#39;px&#39;;
li.style.lineHeight = &#39;1&#39;;
a = document.createElement(&#39;a&#39;);
a.title = ts[t]+&#39; Postingan dalam label &#39;+t;
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.href = &#39;javascript:getCat(&quot;&#39; + encodeURIComponent(t) + &#39;&quot;,null)&#39;
if (lcShowCount){
span = document.createElement(&#39;span&#39;);
span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
span.className = &#39;label-count&#39;;
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(&#39; &#39;);
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>


Simpan kembali hasil pekerjaan sobat, jika berhasil di simpan, berarti sobat telah mengikuti langkahnya dengan benar

5. Kemudian cari kode </head>, (sekarang baru di centang expand widgetnya-red) paste kode di bawah ini di atas </head> :

<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>

<script src='http://subagya.googlepages.com/prototype.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

// User customisable parameters

// ----------------------------

// maxresults - Number of results to show per page

// navFlag    - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.

// feedLabel  - Text to show for the label feed link.

// catLabel   - Label for categories.

// closeLabel - Label for Close button. You can use hypertext also.

var maxresults = 3;

var navFlag = 1;   //ON by default

var feedLabel = "Subscribe to";

var catLabel = "Di Simpan di:";

var closeLabel = "Tutup";

//]]>

</script>

<script src='http://subagya.googlepages.com/ajaxlabels.js'/>

NB : Script di atas sudah di modifikasi sedikit oleh saya, kalau mau aslinya silakan klik disini

6. Langkah selanjutnya cari kode ini di bawah ini :

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Setelah itu ganti dengan kode ini :

<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>

Simpan hasil pekerjaan sobat, jika berhasi pasti tidak ada masalah, jika tidak silahkan ulangi prosedurnya dari no 5

7. Setelah itu masuk ke Tata Letak > add page elements pilih yang di atas post, kalau belum ada pilihan add page elemet di atas post silahkan baca di sini ( biasanya blogger hack ini di simpan di atas post-red). Pilih insert HTML/Javascript kemudian masukkan kode ini di bawah :

<div id="indicator" style="display:none"><img alt="Indicator" src="http://subagya.googlepages.com/loading-trans.gif"/>Sedang Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div></div>

Kemudian simpan, dan silahkan lihat hasil pekerjaan sobat di blog sobat. Jika berhasil berarti ”selamat anda sukses”, jika tidak silahkan ikuti langkah-langkahnya dengan teliti.

Atau silahkan kunjungi ke blog sobat ini untuk, penjelasan dalam bahasa inggrisnya, atau ke sini blog sobat ini juga.