Cara Membuat Tag Cloud CSS3 dengan Efek pada Background & Color Link

Sebelum melangkah lebih jauh untuk membuat tag cloud CSS3 dengan background effect ini, 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. 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?

Jika anda penasaran untuk melihat CSS3 Tag Cloud, silahkan klik DEMO!

D E M O

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.

Tutorial Lain

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

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