Cara Membuat Label Cloud Blogger

Kali ini saya akan mencoba untuk menjelaskan tentang Cara Membuat Label Cloud Blogger, dengan merubah tampilan menjadi Cloud maka Label atau Kategori akan menjadi sederet tulisan-tulisan kategori yang di tandai dengan font-font tebal dan tipis. Berbeda dengan tampilan biasa yang hanya tulisan-tulisan ke bawah serta di tandai dengan angka-angka yang menunjukkan jumlah postingan di dalam setiap kategori tersebut

Untuk contoh tampilannya seperti pada gambar di bawah ini :


Di atas tampak terlihat sederetan tulisan-tulisan label atau kategori yang di bedakan dengan font tebal dan font tipis, untuk font tebal adalah kategori yang jumlah postingan nya terbanyak, sedangkan sebaliknya untuk font yang tipis maka jumlah potingannya sedikit.

Untuk cara membuatnya ikuti langkah-langkah di bawah ini :

1. Log In terlebih dahulu ke akun blog agan
2. Pilih Rancangan lalu pilih Edit HTML
3. Download template lengkap seperti biasa, untuk berjaga-jaga apabila terjadi kesalahan saat pengeditan.
4. Centang Expand Template Widget. tunggu sampai loading selesai
5. Cari kode ]]></b:skin> lalu letakkan kode di bawah ini tepat di atasnya

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

Untuk memudahkan pencarian kode bisa menggunakan Ctrl+F pada keyboard lalu masukkan kodenya dan tekan Enter

6. Cari Kembali kode </head> lalu letakkan kode di bawah ini tepat di atasnya

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

7. Langkah Terakhir, cari kembali kode di bawah ini 

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

Untuk memudahkan pencarian kode di atas bisa di cari dengan kode 'Label1' . Perlu di ingat setiap template berbeda kodenya jadi yang penting cari saja kodenya sampai pada kode

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Setelah Berhasil di temukan tinggal ganti semua kode di atas 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'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('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';
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>

7. Sesudah Selesai tinggal tekan tombol Simpan Template. lalu lihat hasilnya

Hopplah selesai juga. Sekian postingan kali ini tentang Cara Membuat Label Cloud Blogger, semoga berhasil. Selamat Mencoba

1 comments:

100%TERPERCAYA TOKO ONLINE RESMI BUKAN PENIPUAN DI DELIMA PONSEL 100% KAMI JAMIN UANGX KAMI KEMBALIKAN APA BILA BARANGX TIDAK SAMPAI DALAN JANGKA 2 HARI ATAU KUNJUNGI WEBSITE RESMI KAMI DI http://delima-ponsel.blogspot.com
PONSEL:HUB/SMS:0852-4004-4475 PIN BB:5B3C6CE6
Ready Stock ! Apple iphone 5 32GB Rp.3.000.000,-
Ready Stock ! Apple iPhone 5S 32GB Rp.4.000.000,-
Ready Stock ! Apple iPhone 6 plus 32gb Rp.5.500.000,-
Ready Stock ! Samsung Galaxy S5 Rp.2.500.000
Ready Stock ! Samsung Galaxy S6 32GB Putih Rp.3.700.000
Ready Stock ! Samsung Galaxy S4 I9500 Putih Rp.2.200.000
Ready Stock ! Samsung Galaxy Note 3 PUTIH Rp.3.000.000
Ready Stock ! Samsung Galaxy Note 4 SM-N910H Gold Rp.3.500.000,-
Ready Stock ! Samsung Galaxy A3 A300H 16GB Rp.2.000.000
Ready Stock ! Samsung Galaxy A5 A500F Silver Rp. 2.500.000,-
Ready Stock ! Samsung Galaxy E5 E500H Putih Rp.1.700.000
Ready Stock ! Samsung Galaxy E7 E700H Putih Rp. 1.900.000,-
Ready Stock ! Apple iPhone 4 16GB - Black Rp.1.800.000,-
Ready Stock ! Apple iPhone 4S 16GB (dari Telkomsel) Rp.2.200.000,-
Ready Stock ! Samsung Galaxy Grand Prime SM-530H Rp.1.200.000
Ready Stock ! Asus Zenfone 2 ZE551ML RAM 4GB-64GB Rp.2.700.000,

Reply

Posting Komentar