एक टैग क्लाउड कैसे स्टाइल करें

एक टैग क्लाउड स्टाइल करने के लिए सीएसएस का प्रयोग करें

टैग क्लाउड आइटमों की सूची का एक दृश्य चित्रण है। आप अक्सर ब्लॉग पर टैग बादल देखेंगे। इसे फ़्लिकर जैसी साइटों द्वारा लोकप्रिय बनाया गया था।

टैग बादल कुछ मापनीय गुणों के आधार पर आकार और वजन (कभी-कभी रंग) में परिवर्तित लिंक की एक सूची होती है। अधिकांश टैग बादल लोकप्रियता या उस विशेष टैग के साथ टैग किए गए पृष्ठों की संख्या के आधार पर बनाए जाते हैं। लेकिन आप अपनी साइट पर आइटम्स की किसी भी सूची में टैग क्लाउड बना सकते हैं जिसमें उन्हें प्रदर्शित करने के कम से कम दो तरीके हैं। उदाहरण के लिए:

• लेखों की लोकप्रियता को इंगित करने वाली शैलियों के साथ वर्णानुक्रम में लेखों की एक सूची।
• शैलियों के साथ वर्णानुक्रम में वेब साइटों की एक सूची दर्शाती है कि आपको कौन सा सबसे अच्छा पसंद है।
• शैलियों के साथ मूल्य क्रम में सूचीबद्ध वेब संपादकों की एक सूची दर्शाती है कि प्रत्येक मानदंड के प्री-डिफ़ाइंड सेट के करीब कितना करीब आता है।
• शैलियों के साथ दोस्तों की एक सूची जो आपके घर से दूरी तक इंगित करती है।

टैग क्लाउड बनाने की आपको क्या आवश्यकता है?

एक टैग क्लाउड बनाना आसान है, आपको केवल दो चीजों की आवश्यकता है:

• वस्तुओं की एक सूची (जैसे वेब लेख, वेबसाइट्स, या आपके मित्र)
• प्रत्येक आइटम के लिए एक माप (जैसे प्रति दिन पृष्ठ दृश्य, आपकी रैंकिंग 1-10, या आपके घर की दूरी)।

अधिकांश टैग बादल लिंक की सूचियां हैं, इसलिए यदि प्रत्येक आइटम में इसके साथ एक यूआरएल है तो इससे मदद मिलती है। लेकिन दृश्य पदानुक्रम बनाने की आवश्यकता नहीं है।

लोकप्रिय लिंक के एक टैग क्लाउड बनाने के लिए कदम

मेरी साइट में लेख हैं जो हर दिन पृष्ठ दृश्य प्राप्त करते हैं, और टैग क्लाउड बनाने के लिए मेरे लिए यह एक आसान मीट्रिक है। तो इस उदाहरण के लिए, हम लेखों की सूची से एक टैग क्लाउड बनाएंगे, 1 जनवरी, 2007 के सप्ताह के लिए मेरी साइट पर शीर्ष 25 लेख।

1. निर्धारित करें कि आप अपने पदानुक्रम में कितने स्तर चाहते हैं।
   1. यद्यपि आपके क्लाउड में जितने स्तर हैं, उतनी ही संभव है क्योंकि आपके पास आपकी सूची में आइटम हैं, यह कोड के लिए थकाऊ हो जाता है, और अंतर बहुत कम हो सकते हैं। मैं आपके पदानुक्रम में 10 से अधिक स्तर रखने की अनुशंसा करता हूं।
2. प्रत्येक स्तर के लिए कट ऑफ़ पॉइंट्स पर निर्णय लें।
   1. यह प्रति दिन अपने पृष्ठ दृश्यों को 1/10 स्लाइस में कटौती के रूप में सरल हो सकता है - यानी। यदि आपकी साइट पर सबसे बड़ा पृष्ठ एक दिन में 100 पृष्ठ दृश्य प्राप्त करता है, तो आप इसे 100+, 90-100, 80-90, 70-80, आदि के रूप में टुकड़ा कर सकते हैं। मैंने उस पृष्ठ में अपने पृष्ठ के दृश्यों को काट दिया।
3. अपने आइटम को पृष्ठ दृश्य क्रम में सूचीबद्ध करें, और उन्हें चरण 2 के आधार पर एक रैंक दें
   1. चिंता न करें अगर आपके पास कुछ स्लॉट्स में कोई आइटम नहीं है, जो क्लाउड को और अधिक रोचक बनाता है।
4. वर्णमाला क्रम में अपनी सूची को रिज़ॉर्ट करें (या जो भी दूसरा प्रकार आप उपयोग करना चाहते हैं)।
   1. यह क्लाउड दिलचस्प बनाता है। यदि आप इसे रैंक द्वारा क्रमबद्ध छोड़ देते हैं, तो यह शीर्ष पर सबसे छोटी वस्तुओं के नीचे नीचे सबसे छोटी सूची के साथ एक सूची होगी।
5. अपना एचटीएमएल लिखें ताकि रैंक एक क्लास नंबर हो। वर्ग = "टैग 4"> स्ट्रीमिंग ऑडियो फाइलें जोड़ना

एक बार आपके पास प्रत्येक व्यक्तिगत सूची आइटम के लिए HTML हो, और जिस क्रम को आप उन्हें प्रदर्शित करना चाहते हैं, तो आपको निर्णय लेने की आवश्यकता है। आप लिंक को अनुच्छेद में रख सकते हैं और आप कर लेंगे। लेकिन यह अर्थात् चिह्नित नहीं किया जाएगा, और आपके टैग क्लाउड में आने वाले सीएसएस के बिना कोई भी लिंक का एक बड़ा अनुच्छेद देखेगा। इस प्रकार की सूची के लिए एचटीएमएल इस तरह दिखेगा:

<पी आईडी = "क्लाउड"> स्ट्रीमिंग ऑडियो फ़ाइलें जोड़ना किसी वेब साइट के लिए मूल टैग सर्वश्रेष्ठ वेब डिज़ाइन सॉफ़्टवेयर पूरी तरह से खोए जाने के लिए एक वेब पेज बनाना रंग प्रतीकवाद

इसके बजाय, मैं अनुशंसा करता हूं कि आप एक अनॉर्डर्ड सूची का उपयोग करके अपना टैग क्लाउड बनाएं। यह एचटीएमएल और सीएसएस कोड की कुछ और पंक्तियां हैं, लेकिन यह सुनिश्चित करता है कि सामग्री पठनीय होगी चाहे कोई भी इसे देखने के लिए न आए। एचटीएमएल इस तरह दिखेगा:

• स्ट्रीमिंग ऑडियो फ़ाइलें जोड़ना
• किसी वेब साइट के लिए मूल टैग
• बेस्ट वेब डिज़ाइन सॉफ़्टवेयर
• पूरी तरह से खोए जाने के लिए वेब पेज बनाना
• रंग प्रतीकवाद

  लेकिन टैग क्लाउड के लिए शैलियां कहां हैं

  अब हम मजेदार हिस्सा-सीएसएस शैलियों को प्राप्त करते हैं। जब आप टैग क्लाउड को स्टाइल करते हैं, तो आप आमतौर पर फ़ॉन्ट आकार और फ़ॉन्ट वजन बदलते हैं। आप फ़ॉन्ट या पृष्ठभूमि या किसी अन्य शैली विशेषता का रंग भी बदल सकते हैं, लेकिन आकार और वजन पारंपरिक हैं।

  आपको प्रत्येक शैली रैंक के लिए 10 स्टाइल क्लासेस की आवश्यकता है:

  #cloud a.tag1 {फ़ॉन्ट-आकार: 0.7em; फ़ॉन्ट वजन: 100; } #cloud a.tag2 {फ़ॉन्ट-आकार: 0.8em; फ़ॉन्ट वजन: 200; } #cloud a.tag3 {फ़ॉन्ट-आकार: 0.9em; फ़ॉन्ट वजन: 300; } #cloud a.tag4 {फ़ॉन्ट-आकार: 1.0em; फ़ॉन्ट वजन: 400; } #cloud a.tag5 {फ़ॉन्ट आकार: 1.2em; फ़ॉन्ट वजन: 500; } #cloud a.tag6 {फ़ॉन्ट आकार: 1.4em; फ़ॉन्ट वजन: 600; } #cloud a.tag7 {फ़ॉन्ट-आकार: 1.6em; फ़ॉन्ट वजन: 700; } #cloud a.tag8 {फ़ॉन्ट आकार: 1.8em; फ़ॉन्ट वजन: 800; } #cloud a.tag9 {फ़ॉन्ट आकार: 2.2em; फ़ॉन्ट वजन: 900; } #cloud a.tag10 {फ़ॉन्ट-आकार: 2.5em; फ़ॉन्ट वजन: 900; }

  मुझे क्लाउड के चारों ओर कुछ शैलियों को शामिल करना पसंद है: क्लाउड टेक्स्ट को सेंटर करें, एक लाइन-ऊंचाई सेट करें ताकि क्लाउड पठनीय हो सके, और सुनिश्चित करें कि एंकर टैग पर कोई पैडिंग नहीं है:

  #cloud {पैडिंग: 2 पीएक्स; रेखा-ऊंचाई: 3em; पाठ-संरेखण: केंद्र; } #cloud एक {पैडिंग: 0 पीएक्स; }

  अंत में, यदि आप अर्थपूर्ण स्टाइल विधि (यानी अनियंत्रित सूची) का उपयोग कर रहे हैं, तो आपको सीएसएस की दो और पंक्तियां जोड़नी होंगी ताकि सूची में गोलियां न हों और इंडेंट न हों:

  #cloud {मार्जिन: 0; } # क्लाउड ली {प्रदर्शन: इनलाइन; }