Membuat Label Teknik Cloud dengan Script dan Non Script
Setelah mengenal tentang Label dan pemasangannya, ada beberapa teknik tampilan Label, salah satunya yaitu dengan Teknik Cloud. Sebenarnya, ini bukan hal yang luar biasa lagi, trik ini sudah banyak digunakan orang dan banyak orang yang sudah mem-publikasikannya. Tapi di sini, akan diulas kembali bagaimana cara membuat Label dengan Teknik Cloud dengan tujuan untuk memperindah tampilan blog tentu saja. Yang pertama adalah :
Membuat Label Cloud menggunakan Javascript
- Login pada Blogger
- Pilih Tata Letak/Layout
- Kemudian Edit HTML
- Klik Expand Widget Template: langkah terbaik adalah juga men-download template dengan cara klik Download Template Lengkap sebelum melakukan edit agar bisa kembali ke pengaturan awal jika terjadi kesalahan.
- Copy Paste Kode berikut di atas kode ]]></b:skin>/* Label Cloud Styles die-silver.blogspot.com
----------------------------------------------- */
#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} - Kemudian tambahkan kode di bawah ini di atas kode </head><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> - Kalo udah cari kode berikut :<b:widget id='Label1' locked='false' title='NAMA LABEL' 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> - Ganti tulisan NAMA LABEL dengan Nama Label yang tertampil di blogmu.
- Ganti semua kode di atas dengan kode berikut :<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>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> - Klik tombol Simpan
- Maka hasilnya akan seperti ini
Dan ini adalah trik kedua yaitu :
Membuat Label Cloud menggunakan Non Javascript
- Login pada Blogger
- Pilih Tata Letak/Layout
- Kemudian Edit HTML
- Klik Expand Widget Template: langkah terbaik adalah juga men-download template dengan cara klik Download Template Lengkap sebelum melakukan edit agar bisa kembali ke pengaturan awal jika terjadi kesalahan.
- Kemudian cari kode berikut :<b:widget id='Label1' locked='false' title='NAMA LABEL' 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> - Ganti kode di atas dengan kode di bawah ini :<b:widget id='Label1' locked='false' title='NAMA LABEL' type='Label'>
<b:includable id='main'> <b:if cond='data:title'>
<h2><data:title/></h2>
</b:if> <div class='widget-content'>
<div style="background:#F0E8F1;margin:2px;
padding:10px;border:3px #FAF7FA solid;text-align:center;
text-transform:uppercase;">
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/> </span> <b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/> </a> </b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</b:loop> </div>
<b:include name='quickedit'/> </div></b:includable></b:widget> - Ganti tulisan NAMA LABEL dengan Nama Label yang tertampil di blogmu.
- Klik Simpan
- Maka Hasilnya Akan Seperti ini
Itu cara yang sudah q buktikan di blog q yang satunya dan hasilnya berhasil. Semoga di blog kalian juga yaaa? Mudah-mudahan artikel q bermanfaat :D
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com
Gunakan Tombol berikut untuk menyimpan halaman :
Membuat Label Teknik Cloud dengan Script dan Non Script
menjadi format PDF dan lebih maksimal jika terdapat kesalahan koneksi atau yang lainnya.
Membuat Label Teknik Cloud dengan Script dan Non Script
menjadi format PDF dan lebih maksimal jika terdapat kesalahan koneksi atau yang lainnya.
Trik Blog
- Masalah Pada Kotak Komentar
- Memberi Penomoran Pada Daftar yang Ditulis
- Editor Baru untuk Posting di Blogspot
- Mengganti Tulisan Read More dengan Gambar
- Cara Mengembalikan Blog yang Terhapus
- Cara Setting Domain Berbayar di Blogspot Tanpa Hosting
- Cara Membuat Status YM Sendiri
- Cara Membuat Read More Menggunakan Span-id
- Cara Memasang Emoticon di Atas Kotak Komentar
- Hosting Gratis 000webhost.com Mengalami Problem
- Cara Membuat Spoiler di Blog
- Cara Memasang Gadget Online Visitor
- Cara Berkomentar yang Baik dan Benar
- Membuat Menu Dropdown Dan Variasinya
- Pasang Alert di Blog Sebagai Pesan Penutup
- Cara Memodifikasi Tulisan PAda Blog
- Cara Membuat Daftar Isi Pada Blog
- Cara Membuat Tabel Pada Blog
- Mempercantik Tampilan Judul Posting pada Label
- Membuat Huruf Posting Bergaya Koran
- Cara Pasang Statistik dan Tracker
- Cara Menampilkan Recent Comments
- Cara menghilangkan Tang dan Obeng
- Memodifikasi Tampilan Artikel Berlangganan Feedburner
- Memasang Widget Artikel Terkait/Related Post pada Blog
Blog
- Berhenti Berharap pada Die-Silver
- Masalah Pada Kotak Komentar
- Design Elements of a Blog
- Optimasi Blog dan Link Teman-Teman
- Editor Baru untuk Posting di Blogspot
- Cara Setting Domain Berbayar di Blogspot Tanpa Hosting
- Hosting Gratis 000webhost.com Mengalami Problem
- Cara Membuat Spoiler di Blog
- Cara Memasang Gadget Online Visitor
- Cara Berkomentar yang Baik dan Benar
- Membuat Menu Dropdown Dan Variasinya
- Cara Blogwalking yang Benar Ala Die-Silver
- Cara Menampilkan Adsense di Blog Berbahasa Indonesia
- Memasang Widget Top Komentator
- Membuat Link Berkelip/Pelangi
- Dasar-dasar Pembuatan Link
- Cara Buat Kotak Link Exchange
- Membuat Kotak Komentar di Bawah Postingan
- Cara Membuat Kotak Blogroll
- Membuat Judul Blog Berjalan
- Daftar Blog DoFollow
- Google Update Pagerank
- Cara Menghilangkan Menu Navigation Bar
- Membuat Widget Chat Box untuk Pemula
- Cara Menampilkan Recent Post (Postingan Terbaru)
3 comments:
ini nih ....yang ku cari...
cara kedua....
@Aditya : yoho..emang knapa dengan non script?knapa gak yang atas? hehe... ambil ajee sob...
mas2 menurut info yg aku dapat katanya kebanyakan JS gak bagus buat SEO
bener gak yah ?
Post a Comment
Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.
Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).
Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.
Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia.
Jika anda tidak punya blog/website, kolom URL boleh dikosongi atau dapat juga diganti dengan email anda.
Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi. Lebih baik anda gunakan pilihan dibawah ini:
Jika ingin komentar anda tidak dipublikasi, silahkan klik disini.