नमस्कार पाठकों)

इस लेख में, हम आपकी जूमला वेबसाइट पर सामाजिक आइकन डालने पर विचार करेंगे।

सामाजिक चिह्नों की आवश्यकता है ताकि उपयोगकर्ता आपके लेख या साइट के लिंक को सामाजिक नेटवर्क के माध्यम से साझा कर सके।

सबसे पहले, आइए वेबसाइट share42.com/ru पर जाएं।

यह साइट आपको एक स्क्रिप्ट तैयार करने की अनुमति देती है उपस्थितिमाउस

चरण 1 - आकार का चयन करें और वांछित चिह्न चिह्नित करें:

आइकन आकार (32x32, 24x24, 16x16 पिक्सेल) चुनें। डिफ़ॉल्ट 32x32 px है.

हम उन नेटवर्कों का चयन करते हैं जिनकी हमें आवश्यकता है (बस आइकन पर क्लिक करें, आप वांछित क्रम निर्धारित करने के लिए खींच और छोड़ सकते हैं)

चरण 2 - सेटअप:

• आइकन वाले पैनल के प्रकार का चयन करें: क्षैतिज, ऊर्ध्वाधर (फ़्लोटिंग);
• दृश्यमान चिह्नों की संख्या सीमित करें (प्रकार का चयन करते समय उपलब्ध - लंबवत);
• साइट एन्कोडिंग, जूमला के लिए यह UTF-8 है;
• शेयर42 साइट आइकन जोड़ें या न जोड़ें (अपने विवेक पर);
• आरएसएस से लिंक, यदि आरएसएस आइकन पहले से चिह्नित था तो उपलब्ध;
• JQuery को सक्षम करना, प्रकाशन काउंटर के लिए सेट;
• इन चरणों के बाद, हम एक उदाहरण देख सकते हैं कि हमारा आइकन ब्लॉक कैसा दिखेगा और तैयार स्क्रिप्ट डाउनलोड कर सकते हैं।

अगले चरण आपकी वेबसाइट पर स्क्रिप्ट इंस्टॉल करना है।

स्क्रिप्ट के साथ संग्रह डाउनलोड करने के बाद, आपको साइट के रूट पर शेयर42 फ़ोल्डर को अनज़िप करना होगा।

बिंदु संख्या 4 में - "सबसे उपयुक्त प्रकार की साइट चुनें", "कोई भी साइट" चुनें।

अब कोड कॉपी करें:

साइट.नाम के बजाय, अपनी साइट का डोमेन इंगित करें। और इसे टेम्पलेट के स्रोत कोड में या "HTML" प्रकार के मॉड्यूल में डालें।

आइकन पैनल को डिज़ाइन करने के लिए, हम प्रस्तावित सीएसएस कोड का उपयोग करते हैं:

#share42 (पैडिंग: 6px 6px 0; पृष्ठभूमि: #FFF; बॉर्डर: 1px सॉलिड #E9E9E9; बॉर्डर-त्रिज्या: 4px;)

#share42:hover (पृष्ठभूमि: #F6F6F6; बॉर्डर: 1px ठोस #D4D4D4; बॉक्स-छाया: 0 0 5px #DDD;)

#share42 a (अस्पष्टता: 0.5)

#share42:hover a (अस्पष्टता: 0.7)

#share42 a:hover (अस्पष्टता: 1)

हम इसे आपकी साइट पर किसी भी सीएसएस फ़ाइल में सम्मिलित करते हैं।

कॉन्फ़िगर करने के लिए अतिरिक्त सेटिंग्स:

पैरामीटर	विवरण	उपयोग उदाहरण
	पृष्ठ शीर्षक
डेटा-विवरण	पेज के लिए विवरण
	आइकॉन्स.पीएनजी फ़ाइल वाले फ़ोल्डर का पथ
लंबवत पैनल विकल्प
	पृष्ठ की शुरुआत से पैनल तक की दूरी, पिक्सेल में
	पृष्ठ के दृश्य क्षेत्र के शीर्ष से पैनल तक की दूरी, पिक्सेल में
	पैनल का क्षैतिज ऑफसेट, पिक्सेल में (नकारात्मक मान - बाईं ओर, सकारात्मक मान - दाईं ओर)

इसे इस तरह दिखना चाहिए:

बस इतना ही, शुभकामनाएँ)

पी.एस. यदि कुछ स्पष्ट नहीं है तो टिप्पणियाँ लिखें।

यह ट्यूटोरियल आपको दिखाएगा कि जूमला में मेनू आइटम के लिए टेक्स्ट के बजाय छवियों का उपयोग कैसे करें।

मेनू में आइकन जोड़ने के कई तरीके हैं:

मेनू प्रबंधक का उपयोग करके मेनू में छवियाँ जोड़ना

मेनू के साथ काम करने के लिए मानक जूमला मॉड्यूल आपको मेनू आइटम के नाम को छवियों से बदलने की अनुमति देगा:

CSS कोड का उपयोग करके छवियाँ जोड़ना

दूसरी विधि छवि सीएसएस वर्ग को फ़ाइल में जोड़ने पर आधारित है (जहां ### आपके टेम्पलेट की संख्या है)। जूमला के लिए कुछ मेनू मॉड्यूल, जैसे कि आइसमेगामेनू मॉड्यूल, आपको व्यवस्थापक पैनल में मेनू आइटम के लिए एक छवि जोड़ने की अनुमति नहीं देंगे। आप सीएसएस कोड का उपयोग करके एक छवि जोड़ सकते हैं:

सीएसएस कोड में पृष्ठभूमि छवि का उपयोग करना:

फ़ॉन्टAwesome आइकन का उपयोग करना:

कस्टम सीएसएस क्लास खोजने के लिए डेवलपर टूल का उपयोग करके अपनी साइट का अन्वेषण करें।

टेम्प्लेट/थीम###/css/templates.css फ़ाइल में परिवर्तन करें (जहां ### आपका टेम्प्लेट नंबर है)।

आपको फ़ाइल में जो सीएसएस कोड जोड़ना होगा वह आम तौर पर इस तरह दिखता है:

#iceMenu_101 .iceMenuTitle:पहले (फ़ॉन्ट-फ़ैमिली: फ़ॉन्ट विस्मयकारी !महत्वपूर्ण; सामग्री: "###" !महत्वपूर्ण; फ़ॉन्ट-आकार: 45px !महत्वपूर्ण; शीर्ष: 20px !महत्वपूर्ण; स्थिति: सापेक्ष !महत्वपूर्ण; प्रदर्शन: इनलाइन-ब्लॉक !महत्वपूर्ण; पंक्ति-ऊंचाई: 45px !महत्वपूर्ण; ऊंचाई: 90px !महत्वपूर्ण;

जहां ### फ़ॉन्टअद्भुत आइकन वर्ग है। उपलब्ध आइकनों की सूची फ़ॉन्टऑसम वेबसाइट पर पाई जा सकती है।

परिवर्तन देखने के लिए अपनी साइट जांचें.

अब आप जानते हैं कि जूमला में मेनू आइटम में टेक्स्ट के बजाय छवियों का उपयोग कैसे करें।

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

साथ ही, यांडेक्स खोज इंजन पृष्ठ शीर्षक के आगे एक फ़ेविकॉन प्रदर्शित करता है।

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

ऑनलाइन जनरेटर का उपयोग करके फ़ेविकॉन बनाना

सबसे पहले आपको 16 गुणा 16 पिक्सेल का एक चित्र तैयार करना होगा। यह मानक आकारफ़ेविकॉन. ऐसा करने के लिए, आप साइट लोगो या अपनी पसंदीदा छवि का उपयोग कर सकते हैं। आवश्यक आकार को समायोजित करने के लिए, आप "पेंट" प्रोग्राम, या किसी अन्य तृतीय-पक्ष प्रोग्राम का उपयोग कर सकते हैं।

कृपया ध्यान दें कि छवि को 16 गुणा 16 पिक्सेल पर संपीड़ित करते समय। मूल के किनारों के आयाम समान होने चाहिए। मान लीजिए 243 गुणा 243 पिक्सेल। अन्यथा, संपीड़ित होने पर, पहले से ही छोटी तस्वीर धुंधली हो जाएगी।

आगे, हम ऑनलाइन फ़ेविकॉन जनरेटर का उपयोग करेंगे। इस लिंक का अनुसरण करके favicon.ru मुख्य पृष्ठ पर, "एक छवि से एक फ़ेविकॉन बनाएं" आइटम में। अपने कंप्यूटर पर 16 गुणा 16 पिक्सेल मापने वाला एक पूर्व-तैयार चित्र चुनें।

अगला चरण "चित्र संपादित करें" है। यहां हम "अनुपात सहेजें" और "अगला" पर क्लिक करते हैं।

अब हमारा फेविकॉन तैयार है. बस यह देखना बाकी है कि यह ब्राउज़र में कैसा दिखता है और इसे डाउनलोड करें। आप चाहें तो इमेज को एडिट भी कर सकते हैं. या इसे स्क्रैच से बनाएं.

डाउनलोड किए गए फ़ेविकॉन में आवश्यक प्रारूप (.ico) और फ़ेविकॉन नाम है। कुछ भी बदलने की जरूरत नहीं है. जो कुछ बचा है उसे साइट पर इंस्टॉल करना है।

जूमला 3 पर फ़ेविकॉन स्थापित करना

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

ऐसा करने के लिए आपको साइट के रूट पर जाना होगा। इसके बाद, "टेम्पलेट्स" फ़ोल्डर पर जाएं और डिफ़ॉल्ट टेम्पलेट वाला फ़ोल्डर ढूंढें। मेरे पास यह मूल टेम्पलेट "Beez3" है, और वहां फ़ेविकॉन को हमारे द्वारा बनाए गए टेम्पलेट से बदलें।

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

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

आप अपने ब्राउज़र में http://favicon.yandex..ru टाइप करके जांच सकते हैं कि Yandex ने आपके फ़ेविकॉन को अनुक्रमित किया है या नहीं, अपनी साइट का डोमेन नाम दर्ज करें।

गूगल के लिए: http:// www.google.com/s2/favicons?domain=site

यदि पहली इंस्टॉलेशन विधि ने मदद नहीं की और फ़ेविकॉन आपकी साइट पर दिखाई नहीं दिया, तो आप इसे Index.php फ़ाइल में आवश्यक कोड लिखकर इंस्टॉल कर सकते हैं।

जूमला 3 पर फ़ेविकॉन स्थापित करने का दूसरा तरीका

किसी चित्र को स्थापित करने के लिए, आपको हमारे द्वारा तैयार किए गए फ़ेविकॉन को साइट के मूल में रखना होगा।

इसके बाद, डिफ़ॉल्ट टेम्प्लेट वाले फ़ोल्डर पर जाएं: टेम्प्लेट / डिफॉल्ट टेम्प्लेट। नोटपैड++ का उपयोग करके Index.php फ़ाइल ढूंढें और खोलें। इस दस्तावेज़ में, शुरुआती टैग और समापन टैग के बीच, निम्नलिखित कोड दर्ज करें:

जो कुछ बचा है वह ब्राउज़र कैश को साफ़ करना और साइट को फिर से लोड करना है। जिसके बाद आपकी वेबसाइट पर फ़ेविकॉन दिखना चाहिए।

लेखक की ओर से: नमस्कार, प्रिय पाठकों। इस लेख में हम आपसे एक छोटे, लेकिन साथ ही किसी भी अच्छी वेबसाइट के उपयोगी विवरण, सीएमएस जूमला के लिए एक आइकन - फ़ेविकॉन के बारे में बात करेंगे। आप सीखेंगे कि किसी वेबसाइट पर फ़ेविकॉन कैसे जोड़ें, साथ ही मौजूदा फ़ेविकॉन को कैसे बदलें।

जो लोग नहीं जानते हैं, उनके लिए फ़ेविकॉन किसी साइट का एक छोटा आइकन (आइकन) होता है जो वेब ब्राउज़र द्वारा साइट के शीर्षक से ठीक पहले या अधिक सटीक रूप से शीर्षक टैग की सामग्री से पहले टैब में प्रदर्शित किया जाता है। यानी, कुल मिलाकर, यह आईसीओ एक्सटेंशन के साथ एक निश्चित प्रारूप और आकार की एक छवि है।

साथ ही, आप इस बात से सहमत होंगे कि सही ढंग से चयनित फ़ेविकॉन साइट को विशिष्टता और विशिष्टता प्रदान करता है, और उपयोगकर्ताओं द्वारा जल्दी याद भी किया जाता है। खोज इंजन, खोज परिणामों की सूची (खोज परिणामों की एक सूची) बनाते समय, वे साइट शीर्षक के सामने एक फ़ेविकॉन भी प्रदर्शित करते हैं।

इसका मतलब यह है कि पहली चीज़ जो उपयोगकर्ता का ध्यान आकर्षित करेगी वह आइकन है - साइट आइकन, इसलिए, इस तथ्य के बारे में बात करने लायक भी नहीं है कि यदि उपयोगकर्ता अपने बीच किसी मित्र को देखता है, तो यह उसे साइट पर जाने के लिए प्रेरित करेगा; . इसलिए, जूमला 3 में फ़ेविकॉन को कैसे बदला जाए, यह सवाल शुरुआती लोगों के बीच काफी लोकप्रिय है, और नीचे मैं एक विस्तृत उत्तर देने का प्रयास करूंगा।

क्रॉस-ब्राउज़र संगतता सुनिश्चित करने के लिए, फ़ेविकॉन बनाते समय, एक नियम के रूप में, आईसीओ छवि प्रारूप चुनें, क्योंकि यह बिल्कुल सभी ब्राउज़रों द्वारा समर्थित है। हालाँकि आधुनिक ब्राउज़र अब पीएनजी और जीआईएफ जैसे प्रारूपों का समर्थन करते हैं, मोज़िला फ़ायरफ़ॉक्स JPEG भी, साथ ही एनिमेटेड GIF भी। लेकिन, किसी न किसी तरह, ऐसे उपयोगकर्ता भी हैं जो इसका उपयोग करते हैं पुराने संस्करणवेब ब्राउज़र, इसलिए मेरी राय में, यह अभी भी आम तौर पर स्वीकृत आईसीओ का उपयोग करने लायक है।

प्रारूप पर निर्णय लेने के बाद, आइए उस छवि का आकार पता करें जिसका उपयोग साइट आइकन के रूप में किया जा सकता है। यहां सब कुछ सरल है, फ़ेविकॉन का आकार काफी "मानक" है और 16x16 पिक्सेल है, यदि आपको अधिकतम क्रॉस-ब्राउज़र संगतता सुनिश्चित करने की आवश्यकता है। एक ही समय में, अलग-अलग के लिए मोबाइल उपकरणोंऔर उनके विशिष्ट ब्राउज़रों में, आप 32x32, 96x96 और यहां तक ​​कि 192x192 पिक्सेल के आइकन आकार का उपयोग कर सकते हैं।

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

इस समय फ़ेविकॉन आइकन बनाने के लिए सबसे लोकप्रिय सेवाओं में से एक favicon.ru जनरेटर है, जिसका उपयोग हम इस लेख में करते हैं। एक बहुत अच्छा फ़ेविकॉन-जनरेटर जनरेटर (favicon-generator.org) भी है, जो एक आइकन के बजाय, एक संपूर्ण संग्रह बनाता है जिसमें विभिन्न आकारों के आइकन उत्पन्न होते हैं। तदनुसार, प्रत्येक आकार के लिए, कनेक्शन कोड भी दिया गया है।

फ़ेविकॉन बनाने के लिए, निम्न छवि का चयन करें।

वेब विकास में आधुनिक रुझान और दृष्टिकोण

वेबसाइट निर्माण में आरंभ से तीव्र वृद्धि के लिए एल्गोरिथम सीखें

अब यह एक विशेष फॉर्म का उपयोग करके चयनित छवि को अपलोड करने के लिए पर्याप्त है और, कुल मिलाकर, पीढ़ी पूरी हो जाएगी।

छवि लोड करने के बाद, रुचि के उस क्षेत्र का चयन करें जहां से आइकन बनेगा और "अगला" पर क्लिक करें।

पीढ़ी के बाद, आप ब्राउज़र में एक नया फ़ेविकॉन प्रदर्शित करने का एक उदाहरण देख सकते हैं और यदि आप लुक से संतुष्ट हैं, तो फ़ाइल डाउनलोड करने के लिए "डाउनलोड फ़ेविकॉन" बटन पर क्लिक करें। इस प्रकार, आइकन तैयार है.

जूमला में फ़ेविकॉन - सक्रिय टेम्पलेट निर्देशिका के मूल में स्थित है। उदाहरण के लिए, Beez3 टेम्पलेट के लिए, यह फ़ोल्डर templates\beez3 है। इसका मतलब यह है कि आपको बस डाउनलोड की गई फ़ाइल को निर्दिष्ट फ़ोल्डर में रखना होगा, जिससे मानक आइकन बदल जाएगा, और ब्राउज़र में जानकारी अपडेट हो जाएगी। ब्राउज़र में फ़ेविकॉन प्रदर्शित करने वाला कोड सीधे जूमला इंजन द्वारा उत्पन्न होता है, इसलिए इसे मैन्युअल रूप से लिखने की कोई आवश्यकता नहीं है। रुचि रखने वालों के लिए, मैं स्पष्ट कर दूं कि यह कोड html.php फ़ाइल में \libraries\joomla\document\html पर उत्पन्न होता है। एक आइकन प्रदर्शित करने के लिए, जूमला कोर addFavicon() नामक एक विशेष विधि प्रदान करता है, जिसे उपरोक्त फ़ाइल में कहा जाता है।

अब, आप जानते हैं कि जूमला 3 में फेविकॉन को कैसे बदला जाता है, केवल एक चीज जो मैं चाहूंगा, सामान्य विकास के लिए कहें तो, आइकन प्रदर्शित करने के लिए कोड प्रदान करना है - यदि आपको इसे मैन्युअल रूप से लिखने की आवश्यकता है तो मामले के लिए।