Awan tag adalah penggambaran visual dari daftar item. Anda akan sering melihat awan tag di blog. Itu dibuat populer oleh situs-situs seperti Flickr.
Tag cloud adalah daftar tautan yang mengubah ukuran dan berat (terkadang warna juga) tergantung pada beberapa atribut yang dapat diukur. Kebanyakan tag cloud dibangun berdasarkan popularitas atau jumlah halaman yang ditandai dengan tag tertentu. Tetapi Anda dapat membuat tag cloud dari daftar item apa pun di situs Anda yang setidaknya memiliki dua cara menampilkannya. Sebagai contoh:
- Daftar artikel dalam urutan abjad dengan gaya yang menunjukkan popularitas artikel.
- Daftar situs web dalam urutan abjad dengan gaya yang menunjukkan mana yang paling Anda sukai.
- Daftar editor Web yang tercantum dalam urutan harga dengan gaya yang menunjukkan seberapa dekat masing-masing hingga ke set kriteria yang ditentukan sebelumnya.
- Daftar teman dengan gaya yang menunjukkan jarak dari rumah Anda ke rumah mereka.
Apa yang Anda Perlu Bangun Tag Cloud?
Sangat mudah untuk membangun tag cloud, Anda hanya perlu dua hal:
- Daftar barang (seperti artikel Web, situs web, atau teman Anda)
- Ukuran untuk masing-masing item (seperti tampilan halaman per hari, peringkat Anda 1-10, atau jarak ke rumah Anda).
Kebanyakan awan tag adalah daftar tautan, jadi ini membantu jika setiap item memiliki URL yang terkait dengannya. Tapi itu tidak diperlukan untuk menciptakan hirarki visual.
Langkah-langkah untuk Membuat Tag Cloud dari Tautan Populer
Situs kami memiliki artikel yang mendapatkan tampilan halaman setiap hari, dan ini adalah metrik mudah bagi kami untuk digunakan untuk membuat tag cloud. Jadi untuk contoh ini, kita akan membuat tag cloud dari daftar artikel, 25 artikel teratas di situs saya untuk minggu 1 Januari 2007.
-
Tentukan berapa level yang Anda inginkan dalam hierarki Anda.
Meskipun mungkin memiliki banyak level di cloud Anda karena Anda memiliki item dalam daftar Anda, ini menjadi membosankan untuk kode, dan perbedaannya bisa sangat minim. Saya sarankan memiliki tidak lebih dari 10 level dalam hierarki Anda.
-
Tentukan titik potong untuk setiap level.
Mungkin sesederhana memotong tampilan halaman Anda per hari menjadi 1/10 irisan - yaitu. jika halaman terbesar di situs Anda mendapat 100 tampilan halaman setiap hari, Anda bisa mengirisnya menjadi 100+, 90-100, 80-90, 70-80, dll. Saya memotong tampilan halaman saya dengan cara itu.
-
Buat daftar barang Anda dalam urutan tampilan halaman, dan beri mereka peringkat berdasarkan langkah 2
Jangan khawatir jika Anda tidak memiliki item di beberapa slot, itu hanya membuat cloud lebih menarik.
-
Masukkan daftar Anda dalam urutan abjad (atau jenis apa pun yang Anda ingin gunakan).
Inilah yang membuat cloud menarik. Jika Anda membiarkannya diurutkan berdasarkan peringkat, maka itu hanya akan menjadi daftar dengan item terbesar di bagian atas hingga yang terkecil di bagian bawah.
-
Tuliskan HTML Anda sehingga peringkatnya adalah nomor kelas.
class = "tag4"> Menambahkan File Audio Streaming
-
Itu dia!
Setelah Anda memiliki HTML untuk setiap item daftar individual, dan urutan yang ingin Anda tampilkan, Anda harus membuat keputusan. Anda dapat menempatkan tautan dalam paragraf dan Anda akan selesai. Tetapi ini tidak akan ditandai secara semantik, dan siapa pun tanpa CSS yang datang ke tag cloud Anda hanya akan melihat paragraf besar tautan. HTML untuk jenis daftar ini akan terlihat seperti ini:
Sebagai gantinya, kami sarankan Anda membuat tag cloud Anda menggunakan daftar unordered. Ini adalah beberapa baris kode HTML dan CSS tetapi memastikan bahwa konten akan dapat dibaca tidak peduli siapa yang datang untuk melihatnya. HTML akan terlihat seperti ini:
Tapi Di Mana Gaya untuk Tag Cloud
Sekarang kita sampai pada bagian yang menyenangkan - gaya CSS. Saat Anda mengatur tag cloud, Anda biasanya mengubah ukuran font dan berat font. Anda juga dapat mengubah warna font atau latar belakang atau atribut gaya lainnya, tetapi ukuran dan beratnya adalah tradisional.
Anda membutuhkan 10 kelas gaya, satu untuk setiap peringkat tag:
Kami ingin menyertakan beberapa gaya di sekitar awan itu sendiri: pusatkan teks awan, tetapkan tinggi-baris sehingga awan dapat dibaca, dan pastikan bahwa tag anchor tidak memiliki padding pada mereka:
Akhirnya, jika Anda menggunakan metode styling semantik (mis. Daftar tidak berurutan), Anda harus menambahkan dua baris lagi dari CSS sehingga daftar tidak memiliki peluru dan tidak menjorok:
