Cara membuat Tag Cloud Dengan Background Effect

Sedikit Penjelasan tentang apa itu Tag Cloud, dan apa fungsinya.
Tag Cloud merupakan sebuah box yang berfungsi sebagai wadah untuk sekelompok link dalam sebuah web.
Fungsi dari tag could kurang lebih 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. lebih jelasnya liaht gambar dibawah ini.

Gambar

Berikut cara membuat Tag Cloud menggunakan efek background :

1. Login ke akun blogger sobat
2. Masuk Tata Letak
3. Edit HTML dan ceklist/centang "Expand Template Widget"
4. Biasakan sebelum sobat mengedit template, backUp dulu templatenya, dengan cara klik "download template lengkap"
5. Carikode berikut : ]]></b:skin>
6. Letakan kode css berikut dan taruh di atas kode ]]></b:skin>

.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;
}

7. Simpan Template.

8. Kemudian masuk ke Elemen Halaman, Tambah gadget, pilih HTML javascript, dan pastekan kode berikut :

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

9. Edit dan simpan.


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.

Semoga Bermanfaat.