Trending
Loading...
pasang
Monday, March 5, 2012

Cara buat Label Keren Di Blog

Apakah anda pernah mengunjungi blog-blog dan melihat label mereka yang keren-keren, sedangkan yang kita miliki tidak ada pengaturan untuk mengubahnya, yang kita punya hanyalah bentuk label standar yang disediakan oleh Blogger sendiri, label bisa diubah bentuknya karena menggunakan code script, Oke mari simak baik-baik. Untuk mendapatkan itu anda harus menampilkan label pada blog anda.. dengan cara pilih layout-->Page Element-->Add Page Element.. Pilih Label dan Save.

1. Pertama-tama edit pengaturan centang pada "semua label, Alfabetik, Cloud dan Tampilkan jumlah entri per label.

Kalau sudah Ikuti Cara yang berikut :
 

2. Edit Template lalu edit html
3. Cari Kode

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

4. Copy Paste Code berikut pas dibawahnya


<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<p align='center'>
<script type='text/javascript'>
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [0,255,0];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
// 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(&#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;;

a = document.createElement(&#39;a&#39;);
a.title = ts[t]+&#39; Posts in &#39;+t;
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
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>
</p>
<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>

</div>

</b:includable>
</b:widget>


5. Sesudah itu cari kode berikut


]]></b:skin>

6. Copy paste code berikut pas diatasnya


#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:&quot;&quot; !important}
7. Klik Simpan "Sebaiknya pratinjau dulu sebelum disimpan untuk menghindari eror element"

Semoga bermanfaat

10 komentar:

  1. ada cara yg lebih simpel ngk bozz,,??

    coz q bingung kode" html,,

    ReplyDelete
  2. asiiikkk gan ...
    nitip gan, moetivasi.blogspot.com

    ReplyDelete
  3. mantaps..
    dateng ke blog gue ya brow blgaffandi.blogspot.com

    ReplyDelete
  4. terima kasih infonya sob, ijin mencoba ya....

    ReplyDelete
  5. woisshhh mantabs bang
    kunjungi balik ya bang :D http://arifiencjr.com

    ReplyDelete
  6. Newbie gant mantep kunbal ya http://heri-gipzy.blogspot.com/

    ReplyDelete
  7. wah yang aku gagal gan, coba deh cek, bingung nih

    ReplyDelete
  8. artikel menarik,kunjungan baliknya gan
    www.mbahgahol.blogspot.com
    follow aja gan, nnti saya followbalik blog agan

    ReplyDelete
  9. gak bisa diterapkan di blog punyaku gan http://maswidikira.blogspot.com/

    ReplyDelete

Nah apa komentar anda?

Copyright © 2012 PRONITY All Right Reserved
Designed by YudhizUlb
Back To Top