Carane Gaya Tag Cloud

Gunakake CSS kanggo Gaya Tag Cloud

tag cloud yaiku gambaran saka dhaptar item. Sampeyan bakal kerep ndeleng awan tag ing blog. Iki digawe populer dening situs kaya Flickr.

Tag clouds minangka dhaptar pranala sing ganti ukuran lan bobot (kadhangkala werna banget) gumantung marang sawetara atribut sing bisa diukur. Paling akeh awan tag didhasarake popularitas utawa jumlah kaca sing diwenehi tag kasebut. Nanging sampeyan bisa nggawe label awan saka sembarang dhaptar item ing situs sampeyan sing paling ora rong cara nampilake. Tuladhane:

• Daftar artikel ing urutan abjad kanthi gaya sing nuduhaké popularitas artikel kasebut.
• Dhaptar situs web kanthi urutan abjad kanthi gaya sing nuduhaké sing paling apik.
• Dhaptar editor web sing kadhaptar ing urutan tuku karo gaya sing nuduhake cedhak saben kriteria sing wis ditemtokake.
• Dhaptar kanca kanthi gaya sing nuduhaké jarak saka omah sampeyan.

Apa Sampeyan kudu Nggawe Tag Cloud?

Iku gampang mbangun awan tag, sampeyan mung butuh rong bab:

• Dhaptar item (kayata artikel Web, situs web, utawa kanca-kanca)
• Ukuran kanggo saben item (kaya kaca views saben dina, peringkat 1-10, utawa jarak menyang omah).

Paling akeh awan tag iku daftar pranala, saéngga mbantu yen saben item nduweni URL sing digandhengake. Nanging sing ora kudu nggawe hirarki visual.

Langkah-langkah Nggawe Tag Cloud Link Populer

Situsku nduweni artikel sing entuk tampilan kaca saben dina, lan iki minangka metrik sing gampang kanggo aku digunakake kanggo nggawe tag cloud. Supaya kanggo conto iki, kita bakal nggawe cloud tag saka dhaptar artikel, 25 artikel paling dhuwur ing situsku ing minggu 1 Januari 2007.

1. Nemtokake jumlah tingkat sing dikarepake ing hirarki.
   1. Nalika sampeyan bisa duwe akeh tingkat ing cloud nalika sampeyan duwe item ing dhaftar, iki bakal mbebayani kanggo kode, lan beda bisa banget minimal. Aku nyaranake ora duwe luwih saka 10 tingkat ing hierarki.
2. Nentokake titik mati kanggo saben level.
   1. Sampeyan bisa uga gampang kaya ngethok tampilan halaman saben dina dadi 1/10 irisan - ie. yen kaca paling gedhe ing situs sampeyan bakal nampilake 100 kaca dina, sampeyan bisa nyemplung minangka 100+, 90-100, 80-90, 70-80, lan liya-liyane.
3. Dhaftar item ing urutan tampilan kaca, lan menehi pangkat sing adhedhasar langkah 2
   1. Aja kuwatir yen sampeyan ora duwe item ing sawetara slot, mung nggawe awan luwih menarik.
4. Ndhaptar dhaptar sampeyan miturut urutan abjad (utawa apa wae urutan liya sing pengin digunakake).
   1. Iki sing nggawe maya menarik. Yen sampeyan ninggalake peringkat kasebut, sampeyan bakal dadi dhaptar item sing paling gedhé ing ndhuwur nganti paling cilik ing ngisor.
5. Tulis HTML supaya pangkat iku nomer kelas. class = "tag4"> Nambahake Streaming Audio Files

Yen sampeyan duwe HTML kanggo saben item dhaptar individu, lan supaya sampeyan pengin nampilake, sampeyan kudu nggawe keputusan. Sampeyan bisa nggawe pranala ing paragraf lan sampeyan bakal rampung. Nanging iki ora bakal ditandhani semantically, lan sapa waé tanpa CSS sing teka ing cloud tag sampeyan mung bakal ndeleng paragraf gedhe. HTML kanggo jinis dhaptar iki bakal katon kaya iki:

Nambahake File Audio Streaming Basic Tags for a Web Site Piranti Lunak Desain Web Terbaik Bangunan Kaca Web Kanggo Ngrusak Ing Tuwa Warna Symbolism

Nanging, aku nyaranake sampeyan nggawe label maya kanthi nggunakake dhaptar tanpa aturan. Iku sawetara garis HTML lan kode CSS nanging njamin yen isi bakal bisa diwaca ora ana sing bakal teka. HTML bakal katon kaya iki:

• Nambahake File Audio Streaming
• Piranti Lunak Desain Web Paling Luwih
• Nggawe Kaca Web Kanggo Sejatine Ilang
• Warna Symbolism

  Nanging endi Gaya kanggo Tag Cloud

  Saiki kita bisa nyenengake-gaya CSS. Nalika sampeyan nganggo maya tag, sampeyan biasane ngganti ukuran font lan bobot font. Sampeyan uga bisa ngganti warna font utawa latar mburi utawa atribut gaya liyane, nanging ukuran lan bobot sing tradisional.

  Sampeyan butuh 10 kelas gaya, siji kanggo saben pangkat tag:

  #cloud a.tag1 {font-size: 0.7em; font-weight: 100; } #cloud a.tag2 {font-size: 0.8em; font-weight: 200; } #cloud a.tag3 {font-size: 0.9em; font-weight: 300; } #cloud a.tag4 {font-size: 1.0em; font-weight: 400; } #cloud a.tag5 {font-size: 1.2em; font-weight: 500; } #cloud a.tag6 {font-size: 1.4em; font-weight: 600; } #cloud a.tag7 {font-size: 1.6em; font-weight: 700; } #cloud a.tag8 {font-size: 1.8em; font-weight: 800; } #cloud a.tag9 {font-size: 2.2em; font-weight: 900; } #cloud a.tag10 {font-size: 2.5em; font-weight: 900; }

  Aku seneng nyakup sawetara gaya watara awan dhewe: pusat teks méga, nyetel garis-dhuwur supaya awan bisa dibaca, lan manawa tegalan manawa ora duwe padding ing wong:

  #cloud {padding: 2px; line-height: 3em; teks-align: center; } #cloud a {padding: 0px; }

  Pungkasan, yen sampeyan nggunakake cara gaya semantik (ie dhaptar tanpa aturan), sampeyan kudu nambahake rong baris CSS supaya dhaptar kasebut ora duwe peluru lan ora ana:

  #cloud {margin: 0; } #cloud li {display: inline; }