Sabtu, 07 Desember 2013
Browse Manual »
Wiring »
animasi
»
cloud
»
dengan
»
javascript
»
menambahkan
»
menggunakan
»
non
»
tag
»
Menambahkan Tag Cloud Non animasi Dengan Menggunakan Javascript
Menambahkan Tag Cloud Non animasi Dengan Menggunakan Javascript
Sebelumnya saya sudah memaparkan bagaimana cara menambahkan tag Cloud non-animasi dengan menggunakan gadget blogger. Nah, kali ini saya akan membahas bagaimana cara menambahkan tag Cloud non-animasi dengan menggunakan javascript. Karena seperti yang sudah dijelaskan pada tulisan sebelumnya, bahwa tidak semua template mendukung tag Cloud gadget blogger, seperti template Jeans 3C. Template-template ini biasanya merupakan hasil konversi dari template wordpress. Jadi untuk template jenis ini sebaiknya menggunakan javascript jika kamu ingin menambahkan widget tag Cloud.
Cara menambahkan tag Cloud non-animasi dengan javascript ini (yang animasi, tunggu saja tulisan berikutnya, hehehe.....), sebenarnya saya ambil dari Suriyadi.com, dengan sedikit melakukan perubahan script HTML-nya. Berikut adalah langkah-langkahnya:
Untuk tag Cloud yang menggunakan javascript ini memang cukup ribet. Jika kamu tidak hati-hati bisa-bisa template kamu tidak dapat di-parse. Tapi jika kamu sabar dan hati-hati dalam menempatkannya, Insya Allah semuanya akan berhasil dengan baik.
OK coy, segitu aja untuk Tag Cloud non-animasi ini. Selamat mencoba....
Cara menambahkan tag Cloud non-animasi dengan javascript ini (yang animasi, tunggu saja tulisan berikutnya, hehehe.....), sebenarnya saya ambil dari Suriyadi.com, dengan sedikit melakukan perubahan script HTML-nya. Berikut adalah langkah-langkahnya:
- Seperti biasa, Login ke akun Blogger kamu.
- Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.
- Duplikasi template untuk berjaga-jaga jika terjadi masalah.
- Kopikan kode CSS berikut:
/* Label Cloud Non-animasi 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:none; font-weight:bold}
#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} - Letakkan kode CSS tersebut di atas kode ]]></b:skin>.
Untuk memudahkan pencarian, tekan Control F atau F3. - Kemudian kopikan script berikut:
<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> - Letakkan script tersebut di bawah kode ]]></b:skin>.
- Selanjutnya kopikan script berikut:
<b:widget id=Label73 locked=false title=Tag 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>
// Dont change anything past this point ---------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>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 = "<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> - Letakkan script tersebut di bawah kode <b:section class=sidebar id=sidebar preferred=yes>.
Jika tidak ditemukan, cari kode id=sidebar atau id=sidebars, lalu letakkan di bawahnya. - Lakukan Pratinjau, jika sudah OK, Save hasil kerjaan kamu dan ucapkan Alhamdulillah.....
Untuk tag Cloud yang menggunakan javascript ini memang cukup ribet. Jika kamu tidak hati-hati bisa-bisa template kamu tidak dapat di-parse. Tapi jika kamu sabar dan hati-hati dalam menempatkannya, Insya Allah semuanya akan berhasil dengan baik.
OK coy, segitu aja untuk Tag Cloud non-animasi ini. Selamat mencoba....
Label:
animasi,
cloud,
dengan,
javascript,
menambahkan,
menggunakan,
non,
tag
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar