साइट के लिए "अप" बटन जैसा एक फ़ंक्शन इंटरनेट संसाधन को अपने आगंतुकों के लिए अधिक सुविधाजनक बनाता है। यह आपको पृष्ठ पर कहीं से भी आसानी से पृष्ठ के शीर्ष पर जाने में मदद करता है। यह ऑनलाइन स्टोर और बड़े लेखों वाली साइटों के लिए आवश्यक है जिन्हें नीचे स्क्रॉल करने की आवश्यकता होती है।
यह किस लिए है
फिलहाल, अधिकांश साइटों में "अप" बटन जैसा कोई कार्य नहीं है, और इसमें कुछ भी महत्वपूर्ण नहीं है। लेकिन इसका उपयोग इंटरनेट संसाधन और इसके आगंतुकों दोनों के लिए कई फायदे ला सकता है।
आगंतुकों के लिए लाभ
अक्सर ऐसा तब होता है जब किसी इंटरनेट संसाधन का पृष्ठ जानकारी से भरा होता है, जब कोई सूचनात्मक लेख बहुत अधिक स्थान लेता है और आपको माउस व्हील के साथ पृष्ठ को नीचे स्क्रॉल करना पड़ता है। इसके अलावा, लेख के अंत में इस पर कई टिप्पणियाँ हो सकती हैं।
जब कोई आगंतुक लेख पढ़ता है, तो पृष्ठ को नीचे स्क्रॉल करने में कुछ भी थकाऊ नहीं होता है, लेकिन जब पाठ समाप्त हो जाता है और आपको ऊपर जाना होता है, तो यह थोड़ा थकाऊ होने लगता है। अधिकांश लोग बस लंबे समय तक स्क्रॉल करने के लिए बहुत आलसी होंगे, और वे साइट को इसके विस्तार के आसपास एक और चक्कर लगाने के बजाय बस बंद कर देंगे।
बटन का उपयोग करनातुरंत पृष्ठ के शीर्ष पर जाने से साइट पर समय बिताना अधिक सुविधाजनक हो जाता है।
इंटरनेट संसाधन के लिए लाभ
संसाधन के लिए सकारात्मक पहलू स्वयं पिछले कारकों से आते हैं, क्योंकि आसान साइट नेविगेशन व्यवहार संबंधी कारकों में सुधार करता है क्योंकि सभी आगंतुक अपने कार्यों में अधिक सक्रिय होंगे और अन्य पृष्ठों पर चले जाएंगे।
इस प्रकार, ये व्यवहार संबंधी कारक साइट पर सभी खोज इंजनों के रवैये को प्रभावित करते हैं और खोज परिणामों में स्थिति में सुधार लाते हैं।
साइट पर खुद "अप" बटन कैसे बनाएं
आगे की डील। आप केवल कुछ अत्यंत सरल चरणों का पालन करके स्वयं किसी भी सीएमएस पर किसी साइट के लिए स्क्रॉल अप बटन बना सकते हैं:
- छवि निर्माण;
- एक स्क्रिप्ट बनाना;
- बटन शैली बनाएं;
- साइट में जोड़ना।
बटन इमेज
साइट पर "अप" बटन जोड़ने के लिए, पहले आपको आइकन खुद बनाना होगा, जब क्लिक किया जाएगा, तो उपयोगकर्ता पृष्ठ के शीर्ष पर चला जाएगा। ऐसा करने के लिए, आप तैयार विकल्पों का उपयोग कर सकते हैं, जिनमें से आप हमेशा सबसे उपयुक्त विकल्प चुन सकते हैं।
बटन की उपस्थिति में सुधार करने के लिए, हमें कुछ सुधार करने की आवश्यकता है, अर्थात्, एक स्प्राइट बनाने के लिए जो हमें सीएसएस पर आधारित पृष्ठभूमि छवियों को संयोजित करने की अनुमति देता है, जिससे उनमें से एक एनीमेशन बनता है।
ग्राफिक कार्यों के लिए आप किसी भी संपादक का उपयोग कर सकते हैं। लेकिन सबसे सुविधाजनक विकल्प ऑनलाइन सेवा होगी।PIXLR, चूंकि यहां डाउनलोड करने के लिए कुछ भी नहीं है और आप इसे सीधे अपने ब्राउज़र में उपयोग कर सकते हैं।
आरंभ करने के लिए, दिखाई देने वाली संपादक विंडो में, "कंप्यूटर से छवि अपलोड करें" फ़ील्ड चुनें। आइए एक उदाहरण के रूप में एक रॉकेट की छवि लेते हैं।
यदि चयनित आइकन के आयाम बहुत बड़े हैं, तो आपको छोटे आकार का समायोजन करने की आवश्यकता होगी। ऐसा करने के लिए, शीर्ष मेनू पर जाएं और "संपादित करें" फ़ील्ड चुनें, और "फ्री ट्रांसफ़ॉर्म …" के बाद
अगला, चित्र के बगल में विशेष मार्कर दिखाई देते हैं, जिन्हें घुमाकर आप छवि का आकार बदल सकते हैं। अनुपात बनाए रखने के लिए, आप Shift कुंजी का उपयोग कर सकते हैं, जिसे पकड़कर आपको नीले मार्करों को स्थानांतरित करने की आवश्यकता होती है। इन चरणों के अंत में एक रॉकेट का प्रतिबिंब प्राप्त होता है।
अगला चरण परत की एक प्रति बनाना है।
अब आपको रॉकेट की तस्वीर को नई परत से थोड़ा ऊपर ले जाने की जरूरत है। ऐसा करने के लिए, मूव टूल का उपयोग करना सुविधाजनक होगा, जो बाएं मेनू के दूसरे कॉलम में और कीबोर्ड पर अप एरो में स्थित है।
अब हमें टॉप पिक्चर को ब्लैक एंड व्हाइट बनाना है। यह शीर्ष मेनू में आइटम "सुधार" - "ह्यू / संतृप्ति" का उपयोग करके किया जा सकता है। पूर्ण असंतृप्ति के लिए, संतृप्ति स्लाइडर को -100 पर सेट किया जाना चाहिए। यह क्रिया आपको एक प्रभाव बनाने की अनुमति देगी जिसमें "ऊपर" बटन पर होवर करने पर यह काले और सफेद से रंग में बदल जाएगा।
अंतिम स्पर्श दो चित्रों के आस-पास के अतिरिक्त स्थान को हटाना है। ऐसा करने के लिए, बाएं मेनू से "फसल" आइटम का चयन करें औरहम एक आयत में केवल दो रॉकेटों का चयन करते हैं। क्रॉपिंग करने के लिए, एंटर की को दबाया जाता है।
परिणाम एक ऐसी छवि है जिसमें कोई अतिरिक्त खाली स्थान नहीं है। आपको परिणामी छवि की चौड़ाई और ऊंचाई लिखनी होगी, क्योंकि ये डेटा अगले चरण में उपयोगी होंगे।
सेव करने के लिए, आपको "फाइल" - "सेव" पर क्लिक करना होगा, जहां बाएं पैराग्राफ "माई कंप्यूटर" में हम इमेज का नाम लिखते हैं (केवल अंग्रेजी लेआउट), प्रारूप का चयन करें (इसमें केस, पीएनजी) और "हां" बटन पर क्लिक करें।
"अप" बटन की स्क्रिप्ट वाली फाइल
इस मामले में आपको स्क्रिप्ट लिखने की जरूरत नहीं है। तैयार कोड में कुछ संशोधन करते हुए सार्वजनिक संस्करण का उपयोग करना संभव होगा।
ऐसा करने के लिए, आपको कोई भी कोड संपादक डाउनलोड करना होगा। सबसे लोकप्रिय और मुफ्त विकल्प भी Notepad++ है। इसे इनस्टॉल करने के बाद, आपको इस सारे कोड को कॉपी और पेस्ट करना होगा:
| $(दस्तावेज़)। तैयार (फ़ंक्शन () {$ (विंडो)। स्क्रॉल (फ़ंक्शन () {अगर ($ (यह)। स्क्रॉलटॉप () > 0) {$ (' स्क्रॉलर')। फेडइन ();} और {$ (' स्क्रॉलर')। फेडऑट ();}}); $ (' स्क्रॉलर')। क्लिक करें (फ़ंक्शन () {$ ('बॉडी, एचटीएमएल')। चेतन ({स्क्रॉलटॉप: 0}, 400); झूठी वापसी;}); }); |
अगला, शीर्ष मेनू "फ़ाइल" - "इस रूप में सहेजें …" पर क्लिक करें, जिसके बाद हम कोड को.js प्रारूप में सहेजते हैं। उसके बाद, आप इस कोड का उपयोग अपनी साइट पर स्क्रिप्ट फ़ाइलों और छवियों को FTP कनेक्शन का उपयोग करके अपलोड करके कर सकते हैं।
साइट पर स्थापित करें
साइट के लिए स्क्रॉल अप बटन सेट करने के लिए, आपको में जगह देनी होगीआवश्यक स्थान कोड। आपको इसे टैग से पहले दर्ज करना होगा।
सीएसएस के साथ एक बटन शैली बनाना
अक्सर, साइट के लिए "ऊपर" बटन नीचे ("पाद लेख") पर स्थित होता है।
निम्न कोड को साइट की style.css फ़ाइल में जोड़ा जाना चाहिए:
|
/अप बटन/ .scrollTop{ background:url('images/up.png') 0 0 नो-रिपीट;/ नेटिव इमेज पाथ/ चौड़ाई:39px;/ बटन चौड़ाई/ ऊंचाई:96पीएक्स;/50% बटन ऊंचाई/ नीचे:5पीएक्स;/निश्चित स्थिति पर नीचे पैडिंग/ बाएं:89%;/बाईं ओर शिफ्ट करें/ }.scrollTop:hover{ पृष्ठभूमि-स्थिति:0 -108px; } /बैकग्राउंड ऑफ़सेट/" |
इस मामले में, उन छवि चौड़ाई और ऊंचाई डेटा की आवश्यकता होगी। यह केवल प्राप्त डेटा को कोड में दर्ज करने के लिए बनी हुई है, और साइट के लिए "अप" बटन तैयार हो जाएगा! और क्या?
वर्डप्रेस साइट के लिए अप बटन
इस सीएमएस के लिए, "अप" बटन को प्लगइन्स का उपयोग करके और साथ ही स्वतंत्र रूप से बनाया जा सकता है।
प्लगइन्स विधि सबसे सुविधाजनक और स्थापित करने में आसान है, क्योंकि इसमें केवल आपको इंस्टॉल बटन पर क्लिक करने और प्लगइन मेनू में सभी कार्यक्षमता को कॉन्फ़िगर करने की आवश्यकता होती है।
बाद वाले का चुनाव सावधानी के साथ किया जाना चाहिए, क्योंकि इससे साइट पर वायरस प्राप्त करना आसान हो जाएगा। सबसे लोकप्रिय और सिद्ध विकल्प एक प्लगइन है जिसे स्क्रॉल बैक टू टॉप कहा जाता है। आप इसे Wordpress प्लगइन्स के लिए मानक खोज का उपयोग करके डाउनलोड कर सकते हैं।
इस एक्सटेंशन में हैएकाधिक कार्यक्षमता, और Wordpress साइट के लिए "अप" बटन को अनुकूलित करना बहुत आसान होगा। सभी मानों को बदलना बिल्कुल भी आवश्यक नहीं है, आपको केवल साइट पृष्ठ पर बटन की उपस्थिति और स्थान को कॉन्फ़िगर करने की आवश्यकता है।
जैसा कि आप देख सकते हैं, प्लगइन के साथ अप बटन को सेट करना बहुत आसान है। लेकिन एक महत्वपूर्ण बारीकियां है, जो यह है कि प्रत्येक स्थापित प्लगइन सीएमएस लोड करता है। यह इंटरनेट संसाधन की गति को प्रभावित कर सकता है। यही कारण है कि अधिकांश साइट स्वामी सीधे कोड में सभी परिवर्तन करने का प्रयास करते हैं, न कि तृतीय-पक्ष एक्सटेंशन की सहायता से। आप एक HTML साइट के लिए "अप" बटन बना सकते हैं, जो खपत किए गए संसाधनों को कम कर देगा।
सभी Wordpress सिस्टम फ़ाइलों को बदलने से पहले, आपको उनका बैकअप लेना होगा। फिर आप ऊपर वर्णित अपना खुद का बटन बनाने के लिए सभी चरणों का पालन कर सकते हैं।
जूमला के लिए बटन "ऊपर"
सीएमएस जूमला भी वर्डप्रेस जैसे प्लगइन्स की स्थापना का समर्थन करता है। जूमला 3 पर किसी साइट के लिए "अप" बटन का सबसे सफल संस्करण पृष्ठ का शीर्ष नामक एक्सटेंशन है।
इस सीएमएस में "एक्सटेंशन मैनेजर" के माध्यम से कोई भी प्लगइन इंस्टाल किया जा सकता है। इसके लिए आपको चाहिए:
- इंटरनेट पर प्लगइन डाउनलोड करें;
- एक्सटेंशन मैनेजर में "ब्राउज़ करें" बटन पर क्लिक करें;
- डाउनलोड किए गए संग्रह का चयन करें;
- "डाउनलोड" पर क्लिक करें और इंस्टॉल करें।
अब आपको इसे "प्लगइन मैनेजर" में सक्रिय करना होगा। इसके लिएआपको इस अनुभाग में जाने की जरूरत है, प्लगइन ढूंढें और इसकी स्थिति को "सक्षम" पर स्विच करें।
अगला चरण उसी अनुभाग का उपयोग करके सभी एक्सटेंशन मापदंडों को कॉन्फ़िगर करना है जहां आपको इस प्लगइन के "मूल पैरामीटर" को दाईं ओर खोजने की आवश्यकता है।
पेज के शीर्ष पर निम्नलिखित कार्यक्षमता है:
- रन इन / एडमिनिस्ट्रेटर - न केवल इंटरनेट संसाधन पर, बल्कि जूमला सीएमएस पैनल में भी विकल्प को सक्षम करना।
- बटन रिवील पोजीशन - अप बटन दिखने के लिए यूजर को कितने पिक्सल रिवाइंड करने होंगे।
- बटन टेक्स्ट को छोड़ दें - बटन पर टेक्स्ट की उपस्थिति।
- हमेशा शीर्ष पर - साइट पृष्ठ हमेशा इसके शीर्ष से प्रदर्शित होगा। पृष्ठ पर किसी विशिष्ट स्थान पर स्क्रॉल करने के लिए एंकर का उपयोग करते समय, इस विकल्प को सक्षम करने की आवश्यकता नहीं है।
- स्मूथ स्क्रॉल - पेज स्क्रॉलिंग को आसान बनाता है।
- स्क्रॉल अवधि - वह समय जिसके बाद पृष्ठ पूरी तरह से शुरुआत में चला जाएगा।
- स्क्रॉल ट्रांज़िशन - स्क्रॉलिंग में अधिक दृश्य प्रभाव जोड़ता है।
- संक्रमण आसान - पृष्ठ के शीर्ष पर आंदोलन को "कमजोर" करना।
- लिंक स्थान - आइकन का स्थान। डिफ़ॉल्ट रूप से, बटन निचले दाएं कोने में स्थित होता है।
- उपयोग शैलियाँ - व्यक्तिगत बटन शैली, जिसे नीचे के क्षेत्र में सेट किया जा सकता है। यदि एक नकारात्मक मान पर स्विच किया जाता है, तो सभी शैली सेटिंग्स साइट की सक्रिय थीम से ली जाएंगी।
- लिंक शैली - आपके बटन शैली मापदंडों को दर्ज करने के लिए एक फ़ील्ड।
"ऊपर" बटन की शैली को अनुकूलित करने के लिए, आपके पास कम से कम न्यूनतम होना चाहिएसीसीएस ज्ञान। अन्यथा, आपको अंतिम पैरामीटर के मान को "नहीं" में बदलना चाहिए।
एक और महत्वपूर्ण बारीकियां यह है कि आइकन पर सामान्य शिलालेख में अंग्रेजी पाठ होता है: शीर्ष पर लौटें। ऐसा पाठ रूसी-भाषा की साइट पर मौजूद नहीं हो सकता है, इसलिए आपको बस इसे प्लगइन पैरामीटर में अक्षम करना चाहिए या इसे रूसी में बदलना चाहिए।
इस शिलालेख को बदलने के लिए, आपको FTP या होस्टिंग में निर्मित फ़ाइल प्रबंधक का उपयोग करके साइट सर्वर पर जाना होगा। इसके बाद, निर्देशिका "/administrator/language/en-GB/" में आपको "en-GB.plg_system_topofthepage.ini" नामक फ़ाइल ढूंढनी होगी।
टेक्स्ट बदलने से पहले, आपको इस दस्तावेज़ की एन्कोडिंग को UTF-8 में बदलना चाहिए। यह रूसी अक्षरों का सामान्य प्रदर्शन करेगा।
अगला हम निम्नलिखित पंक्ति पाते हैं:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="शीर्ष पर लौटें"" |
और उद्धरण चिह्नों में वाक्यांश को रूसी में बदलें। आप "अप!", "टू द टॉप!" जैसे वाक्यांशों का उपयोग कर सकते हैं। या "ऊपर!"।
अंत में, आपको संशोधित फ़ाइल को सहेजना होगा और जूमला पर साइट के लिए "अप" बटन की जांच करनी होगी।
Ucoz के लिए अप बटन
यूकोज़ पर साइट के लिए "अप" बटन को कोड इंजेक्शन का उपयोग करके करना होगा, क्योंकि इस सीएमएस के लिए प्लगइन्स को कनेक्ट करना असंभव है। हालाँकि, इसके लिए सिस्टम फ़ाइलों के लंबे अध्ययन और आवश्यक पंक्तियों की खोज की आवश्यकता नहीं है, आपको बस एक छोटा कोड सही जगह पर चिपकाने की आवश्यकता है।
हमें स्थापित करने के लिएआवश्यक:
- "कंट्रोल पैनल -> डिज़ाइन -> डिज़ाइन प्रबंधन (टेम्पलेट्स) -> साइट के निचले भाग पर जाएं;
- स्क्रिप्ट डालें (परियोजना की आधिकारिक वेबसाइट और तीसरे पक्ष के संसाधनों पर पाया जा सकता है)।
निष्कर्ष
उसके बाद, निचले दाएं कोने में एक आइकन दिखाई देगा, जो उपयोगकर्ता को पृष्ठ के शीर्ष पर ले जाएगा।
जैसा कि आप देख सकते हैं, किसी भी सीएमएस के लिए बैक बटन सेट करना विशेष रूप से कठिन नहीं था। आप एक स्वचालित स्थापना विधि (प्लगइन्स) और एक मैनुअल दोनों का उपयोग कर सकते हैं। हालांकि, बाद वाला विकल्प सबसे उपयुक्त रहता है, क्योंकि यह साइट के प्रदर्शन पर प्रतिकूल प्रभाव नहीं डालता है।
आप साइट संसाधनों की खपत को कम करने के लिए HTML साइट के लिए "बैक टू टॉप" बटन का उपयोग कर सकते हैं, क्योंकि बड़ी संख्या में एक्सटेंशन संसाधन के प्रदर्शन पर नकारात्मक प्रभाव डाल सकते हैं। एक "अप" बटन प्लगइन साइट पृष्ठों के लोडिंग समय को बहुत प्रभावित नहीं कर पाएगा, लेकिन ज्यादातर मामलों में उपयोगकर्ता के पास सीएमएस पर कम से कम एक दर्जन प्लगइन्स स्थापित हैं। इस मामले में, कोई भी प्लगइन साइट के पृष्ठों के प्रदर्शन पर प्रतिकूल प्रभाव डाल सकता है।
