Etiket Bulutu Nasıl Oluşturulur

Etiket Bulutu Stili için CSS'yi kullanın

etiket bulutu, öğeler listesinin görsel bir betimlemesidir. Bloglarda genellikle blog bulutlarını göreceksiniz. Flickr gibi siteler tarafından popüler hale getirildi.

Etiket bulutları, ölçülebilir bir niteliğe bağlı olarak boyut ve ağırlıkta (bazen de çok fazla) değişen bağlantıların bir listesidir. Etiket bulutlarının çoğu, popülerliğe veya söz konusu etiketle etiketlenmiş sayfa sayısına göre oluşturulur. Ancak, sitenizde, bunları görüntülemenin en az iki yolunu gösteren öğeler listesinden bir etiket bulutu oluşturabilirsiniz. Örneğin:

• Makalelerin popülerliğini gösteren stillerle alfabetik sıraya göre makaleler listesi.
• Web sitelerinin bir listesini alfabetik sıraya göre en iyi sevdiklerinizi gösteren stiller.
• Fiyat düzeninde listelenen Web editörlerinin listesi, her birinin önceden tanımlanmış bir ölçüt kümesine ne kadar yakın geldiğini gösteren stillerle.
• Evinizden kendi aralarına olan mesafeyi gösteren stillere sahip bir arkadaş listesi.

Etiket Bulutu Oluşturmak İçin Neye İhtiyacınız Var?

Bir etiket bulutu oluşturmak kolaydır, sadece iki şeye ihtiyacınız vardır:

• Öğelerin listesi (Web makaleleri, Web siteleri veya arkadaşlarınız gibi)
• Öğelerin her biri için bir ölçüm (günlük sayfa görüntüleme sayısı, sıralamanız 1-10 veya evinize olan uzaklık gibi).

Etiket bulutlarının çoğu bağlantı listesidir, bu yüzden her öğenin kendisiyle ilişkilendirilmiş bir URL'si varsa yardımcı olur. Ancak bu görsel bir hiyerarşi oluşturmak için gerekli değildir.

Popüler Bağlantıların Etiket Bulutunu Oluşturma Adımları

Sitemde her gün sayfa görüntüleme alan makaleler var ve bu, bir etiket bulutu oluşturmak için kullanmam için kolay bir metrik. Bu nedenle, bu örnekte, 1 Ocak 2007 haftası için sitemdeki en iyi 25 makalenin bir listesinden bir etiket bulutu oluşturacağız.

1. Hiyerarşinizde kaç seviye istediğinizi belirleyin.
   1. Bulunduğunuz listedeki öğeleriniz olduğu için bulutunuzda olabildiğince fazla seviye olmasına rağmen, bu kodları yorucu hale getirir ve farklılıklar çok düşük olabilir. Hiyerarşinizde 10'dan fazla seviye olmamasını tavsiye ederim.
2. Her seviye için kesme noktalarına karar verin.
   1. Sayfa görüntüleme sayısını günde 1/10 dilim halinde kesmek kadar basit olabilir - örn. Sitenizdeki en büyük sayfa günde 100 sayfa görüntüleme alıyorsa, 100+, 90-100, 80-90, 70-80 vb. şeklinde dilimleyebilirsiniz. Sayfa görünümlerimi bu şekilde kırptım.
3. Sayfa görüntüleme sırasındaki öğelerinizi listeleyin ve onlara 2. adıma göre bir sıra verin
   1. Bazı yuvalarda herhangi bir öğe yoksa endişelenmeyin, bu sadece bulutu daha ilginç hale getirir.
4. Listenizi alfabetik sırada (ya da kullanmak istediğiniz ikinci sıralamada) bulun.
   1. Bu, bulutu ilginç kılan şeydir. Eğer rütbeye göre sıralanmış bırakırsanız, o zaman sadece en alttaki en küçük olan en aşağıya doğru en küçük olan bir liste olacaktır.
5. HTML'nizi, sıra bir sınıf numarası olacak şekilde yazın. class = "tag4"> Akış Ses Dosyalarını Ekleme

Her bir liste öğesi için HTML'ye ve bunları görüntülemek istediğiniz sırayı aldıktan sonra, bir karar vermeniz gerekir. Bağlantıları bir paragrafa yerleştirebilirsin ve işin bittin. Ancak bu, semantik olarak işaretlenmez ve etiket bulutunuza gelen CSS'si olmayan herkes yalnızca büyük bir bağlantı parası görür. Bu tür bir liste için HTML şöyle görünecektir:

Akışlı Ses Dosyalarının Eklenmesi Bir Web Sitesi için Temel Etiketler En İyi Web Tasarım Yazılımı Tamamen Kaybolan Bir Web Sayfası Oluşturma Renk Sembolizmi

Bunun yerine, etiketlenmemiş bir liste kullanarak etiket bulutunuzu oluşturmanızı öneririm. Daha fazla HTML ve CSS kodu satırı vardır, ancak içeriğin kimin görüntüleneceğini görmeksizin okunabilir olmasını sağlar. HTML şöyle görünürdü:

• Akışlı Ses Dosyalarının Eklenmesi
• Bir Web Sitesi için Temel Etiketler
• En İyi Web Tasarım Yazılımı
• Tamamen Kaybedilen Bir Web Sayfası Oluşturma
• Renk Sembolizmi

  Ama etiket bulutu için stilleri nerede

  Şimdi eğlenceli kısma geçiyoruz - CSS stilleri. Etiket bulutu oluşturduğunuzda, genellikle yazı tipi boyutunu ve yazı tipi ağırlığını değiştirirsiniz. Yazı tipi veya arka planın rengini veya başka herhangi bir stil özelliğini de değiştirebilirsiniz, ancak boyut ve ağırlık gelenekseldir.

  Her etiket sırası için bir tane olmak üzere 10 stil sınıfına ihtiyacınız var:

  #cloud a.tag1 {font-boyutu: 0.7em; yazı tipi ağırlığı: 100; } #cloud a.tag2 {font-boyutu: 0.8em; font ağırlığı: 200; } #cloud a.tag3 {font-size: 0.9em; font ağırlığı: 300; } #cloud a.tag4 {font-boyutu: 1.0em; font ağırlığı: 400; } #cloud a.tag5 {font-boyutu: 1.2em; font ağırlığı: 500; } #cloud a.tag6 {font-boyutu: 1.4em; font ağırlığı: 600; } #cloud a.tag7 {font-boyutu: 1.6em; font ağırlığı: 700; } #cloud a.tag8 {font-boyutu: 1,8em; font ağırlığı: 800; } #cloud a.tag9 {font-boyutu: 2.2em; font ağırlığı: 900; } #cloud a.tag10 {font-boyutu: 2.5em; font ağırlığı: 900; }

  Bulutun çevresine bazı stilleri dahil etmeyi seviyorum: bulut metnini ortalayın, bulutun okunabilmesi için bir satır yüksekliğini ayarlayın ve bağlantı etiketlerinin üzerinde dolgu bulunmadığından emin olun:

  #cloud {padding: 2px; çizgi yüksekliği: 3em; metin hizalaması: merkez; } #cloud a {padding: 0px; }

  Son olarak, semantik stil yöntemini (yani, sıralanmamış liste) kullanıyorsanız, listenin mermi içermemesi ve girintinin olmaması için iki CSS satırı eklemeniz gerekir:

  #cloud {margin: 0; } #cloud li {ekran: satır içi; }