Cara Membuat Efek pada Background

Penggunaan kode css (murni) sebagai pembentuk tagcloud mempunyai nilai lebih pada sisi ringannya beban muatan kode html yang ditanggung sebuah blog. Di luar itu dengan hadirnya CSS3, kini banyak efek indah bisa dibuat tanpa bantuan javascript. Jika kita membandingkan dengan tag cloud yang dibuat menggunakan javascrip, tagcloud CSS ini tak akan menjadi terlihat mengecewakan karena background efect dibuat dengan memanfaatkan CSS3 transition hingga ada semacam animasi/fade efect yang muncul saat tersentuh cursor. Untuk menjadi perhatian pula bahwa sekalipun javascript mampu menciptakan berbagai efek yang sangat indah, 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) dan banyak di antaranya yang loadingnya lambat, maka apabila sebuah blog terlalu berat maka sebagian dari mereka yang menggunakan modem dengan kecepatan lambat akan (malas membuka karena loading yang 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 Tag Cloud dengan Background Effect :

• Login ke Blogger (Login to Blogger).
• Dasbor (Dasboard).
• 
  KLIK Design/Rancangan.
• KLIK Edit HTML.
• Back-up Templates : Amankan template dengan cara :
  • KLIK Download Template Lengkap (Download Full Template).
  • Simpan Template di folder PC.
  • Kembali ke Edit HTML.
• 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;
       margin:10px auto;
       font-family:Times;
       text-align:center;       
       padding:15px 8px;
       border:solid 1px #eee; 
       background:#fff;
}
.tcloud { 
       padding:3px 6px;
       text-decoration:none;
       -o-transition:all 0.6s ease-in;
       -moz-transition:all 0.6s ease-in;
       -webkit-transition:all 0.6s ease-in;       
}
.tcloud:link {
       color:#003EBA;
}
.tcloud:visited {
       color:#ff900;
}
.tcloud:hover {
       color:#ffffff;
       background:#003EBA;
       text-decoration:none;      
}
.tcloud:active {
       color:#ffffff;
       background:#5D7CBA;
}

Cara Menggunakan Kode HTML :

• Setelah dasbor anda akan masuk di Page Element/Elemen Laman. KLIK Add a Gadget.
• Setelah terlihat beberapa widget, pilih dan KLIK HTML/Javascript.
• Akan disediakan sebuah box untuk menambah widget. Copy-paste xHTML ke dalam box.
• KLIK Simpan/SAVE.
• Buka halaman blog dan lihat hasilnya.

xHTML

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

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