Sabtu, 02 Februari 2013

Hack Labels Tag for Blogger (List & Cloud)

Sebelumnya tata cara membuat template blogger sendiri sudah dipaparkan secara rinci dan gamblang :D Sekarang giliran membedah bagian gadget/widget blogger Sobat sudah pada kenal tentunya dengan widget tags yang ada di blogspot! Secara dasar tagging widget sendiri ditandai dengan kode <b:widget> Basic gadget berjumlah 26 buah, gadget dari pengembang pihak ke tiga 874 biji (Data tertulis, Feb/03/2013) dan customize gadget (Error gadget, Feb/03/2013)
Lebih jelas keterangan mengenai widget tags silahkan sobat satroni link berikut Blogger Help Koben akan memberi contoh trik & teknik melakukan snippet/modifikasi/hack LABELS gadget blog.
Screenshotlabels-gadget-bloggerTampilan labels dibagi menjadi dua jenis yaitu: list and cloud.
Gaya ListGaya Cloud
labelscategory
Dua jenis default label gadget blogger akan terlihat pada screenshot diatas. Default code/script yang gue maksudkan di sini! Lantas bagaimana penampilan labels tersebut jika kode/script kita snippet/hack ;)
Hack List LabelsSnippet Cloud
labelscategory
Label bergaya List dijadikan menjadi berurut menurut alphabet. Cloud label dihilangkan count (jumlahnya) Syarat untuk melakukan hack labels ini, kalian harus meng-add gadget labels dahulu.
Setelah itu lihat kode template [TANPA melakukan Expand Widget Templates] cari kode yang seperti berikut<b:widget id='Label1' locked='false' title='Labels' type='Label'>Hapus code tersebut dan gantikan dengan kode berikut...Hack List Labels
<b:widget id='Label1' locked='false' mobile='yes' title='KATEGORI' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<script type="text/javascript">
var root = "<data:blog.homepageUrl/>";
var tagUrl = "search/label/";
var labels = new Array();

<b: loop values='data: labels' var='label'>
labels.push("<data: label.name/>");
</b: loop>

i=labels.length;
while(i > 0)
{
i=i-1;
document.write("<li><a href='"+root+tagUrl+labels[i]+"'>"+labels[i]+"</a></li>");
}
</script>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Cloud Labels Snippet
<b:widget id='Label1' locked='false' mobile='yes' title='KATEGORI' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>
var max = 150;
var min = 70;
var showCount = false;
var minCount = 1;

var range = max - min;

var labels = new Array();
<b: loop values='data: labels' var='label'>
labels.push(&quot;<data: label.name/>&quot; );
</b: loop>

var urls = new Array();
<b: loop values='data: labels' var='label'>
urls.push(&quot;<data: label.url/>&quot; );
</b: loop>

var counts = new Array();
<b: loop values='data: labels' var='label'>
counts.push(&quot;<data: label.count/>&quot; );
</b: loop>

function sortNumber(a, b)
{
return b - a;
}

var sorted = counts.slice();
var most = sorted.sort(sortNumber)[0];

for (x in labels)
{
if(x != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot; &amp;&amp; counts[x] >= minCount)
{

var textSize = min + Math.floor((counts[x]/most) * range);

if(showCount)
{
var count = &quot;(&quot; + counts[x] + &quot; )&quot;;
}else{
var count = &quot;&quot;;
}

document.write(&quot;<span style='font-size:&quot; + textSize + &quot;%'><a href='&quot; + urls[x] + &quot;' style='text-decoration:none;'>&quot; + labels[x] + count + &quot;</a></span> &quot; );
}
}
</script>
</div>
</b:includable>
</b:widget>
Kalau bumbu tidak jalan mungkin karena ada yg gue maju²in karena bentrok dengan emotikon. Silahkan kunjungi link resource sumber :D
Resource:
How To Sort The Labels Widget Reverse Alphabetically
A Simple Blogger Tag Cloud Widget
Happy labels \m/

Tidak ada komentar:

Posting Komentar