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

  1. 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}

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

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

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

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

  1. 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.
post signature

9 comments:

  1. He.. he... he.. Pertamax Juga nich. Lha Kalo Motif ngeblognya pingin ngajarin orang lain ya... cocoknya bukan blogger lah sebutannya. Tapi kan Tea Cher (di pisahin baca-nya ya?)

    ReplyDelete
  2. simpan dulu ah buat kapan2 kalo udah ngeh :)

    ReplyDelete
  3. wahahahahaha..bunda baca2 dulu..simpen kalo ntar bunda udah pinter he.he.

    ReplyDelete
  4. I've posted the same hack in my blog. AJAX Label Cloud for Blogger. Would you mind giving me a link back?

    ReplyDelete
  5. wah kok aku baru tau ya ada postingan ini :)

    ReplyDelete
  6. Mas.. mo tanya nih... baru sampai langkah ke 3 aku simpan kok ada keterangan " Widget dengan id "Label1" tidak dapat mengandung elemen "#text". Sebuah widget hanya dapat mengandung elemen b:includable."
    gmn mas solusinya, makasih,,,,

    ReplyDelete
  7. duh ini mah triknya sgt dangerous ... (intinya mah leuneung BOS) wkwkkwkwkwk males praktekannya juga ahhhh ... xixixxi ...

    ReplyDelete
  8. thank sering nya,,,
    salam kenal aja han

    ReplyDelete