Creating a Simple Tag Cloud Using Background Effects

Sebelum melangkah lebih jauh untuk membuat tagcloud dengan memanfaatkan efek background, terlebih dahulu kita akan mencoba memahami apa yang dimaksud tagcloud beserta fungsinya seta beberapa jenis tagcloud yang ada.

Tagcloud merupakan sebuah box yang berfungsi sebagai wadah bagi sekelompok link dalam sebuah web. Pada umumnya difungsikan sebagai wadah beberapa link dari posting yang telah diterbitkan. Model penulisan setiap link judul posting pada tagcloud di buat dalam berbagai variasi bentuk, ukuran dan gaya. Variable HTML pembentuk tagcloud dapat menggunakan kode css dan xhtml saja, atau bisa terjadi juga memanfaatkan javascript untuk memperoleh efek-efek yang tidak memungkinkan bila hanya menggunakan kode css. Penggunaan kode yang berbeda ini tentunya juga mempunyai nilai plus dan minus karena disamping efek yang ditimbulkan berbeda, beban yang termuat dalam desain templatepun akan berbeda pula.

Penggunaan kode css (murni) sebagai pembentuk tagcloud mempunyai nilai lebih pada sisi ringannya beban muatan kode html yang ditanggung sebuah blog, sehingga relatif tidak mempengaruhi kecepatan loading. Meskipun penggunaan javascript mampu menciptakan berbagai efek yang memperindah penampilan sebuah blog, namun penggunaan script yang berlebihan akan sangat mempengaruhi beban dan loading. Bagi mereka yang mempunyai akses internet dengan kecepatan super, masalah loading tidaklah menjadi problem, tetapi karena akses terhadap sebuah blog bersifat umum (semua orang akan mengakses), maka apabila sebuah blog terlalu berat maka blog tersebut mejadi jarang di buka orang (malas karena nunggunya lama).

Dengan berbagai konskwensi seperti tersebut di atas, sekarang tinggal bergantung kepada pemilik blog. Tagcloud seperti apakah yang akan dimanfaatkan untuk melengkapi penampilan blognya?

Cara Membuat CSS Tacloud menggunakan efek background :

• Login ke Blogger (Login to Blogger).
• Dasbor (Dasboard).
• KLIK Design (Rancangan).
• KLIK Edit HTML.
• Back-up Template : Amankan template dengan cara :
  - KLIK Download Template Lengkap (Download Full Template).
  - Simpan Template di folder PC.
• Cari KODE ]]></b:skin> .
• Copy paste KODE CSS berikut dan letakkan di atas kode ]]></b:skin> .
• KLIK Simpan Template (SAVE Template).

KODE CSS :

.tagcloud {
       width:300px;
       font-family:Times;
       padding:15px 8px;
       border:solid 1px #eee; 
       background:#fff;
}
.tcloud { 
       padding:3px 6px;
       text-decoration:none;
}
.tcloud:link {
       color:#003EBA;
}
.tcloud:visited {
       color:#ff900;
}
.tcloud:hover {
       color:#ffffff;
       background:#003EBA;
}
.tcloud:active {
       color:#ffffff;
       background:#5D7CBA;
}

xHTML

Copy xHTML di bawah ini dan simpan melalui Add a Gadget (tambah Gadget) di Elemen Laman.

<div class="tagcloud">
<a style="font-size:10px" class="tcloud" href="Link-1" title="Title Link-1">Nama Link-1</a>
<a style="font-size:16px" class="tcloud" href="Link-2" title="Title Link-2">Nama Link-2</a>
<a style="font-size:18px" class="tcloud" href="Link-3" title="Title Link-3">Nama Link-3</a>
<a style="font-size:14px" class="tcloud" href="Link-4" title="Title Link-4">Nama Link-4</a>
<a style="font-size:27px" class="tcloud" href="Link-5" title="Title Link-5">Nama Link-5</a>
<a style="font-size:22px" class="tcloud" href="Link-6" title="Title Link-6">Nama Link-6</a>
<a style="font-size:14px" class="tcloud" href="Link-7" title="Title Link-7">Nama Link-7</a>
<a style="font-size:18px" class="tcloud" href="Link-8" title="Title Link-8">Nama Link-8</a>
<a style="font-size:10px" class="tcloud" href="Link-9" title="Title Link-9">Nama Link-9</a>
<a style="font-size:14px" class="tcloud" href="Link-10" title="Title Link-10">Nama Link-10</a>
</div>

Keterangan :

1. Link-1 s/d Link-10 : bisa diperbanyak disesuaikan dengan dengan jumlah link yang akan ditampilkan.
2. Link-1 s/d Link-10 : link posting yang telah diterbitkan dengan URL seperti misalnya :
http://..../....../judul posting.html
3. Nama Link-1 s/d Link-10 = Judul Posting.
4. Title Link : berisikan penjelasan singkat Nama Link.

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

• gubhug reot
• Tanty Template Modification
• bgsgr Tutorial
• Mas Gitosamin