जेनरेटप्रेस में सोशल शेयरिंग बटन कैसे बनाएं?

इस ट्यूटोरियल में, हम देखेंगे जेनरेटप्रेस में सोशल शेयरिंग बटन कैसे बनाएं?

यह निस्संदेह आपके ब्लॉग पोस्ट के क्रॉस-चैनल प्रचार को बढ़ाने में आपकी मदद करेगा। इसके परिणामस्वरूप आपकी वेब उपस्थिति बढ़ेगी।

मैं आपको यह दिखाने जा रहा हूं कि आपके ब्लॉग प्रविष्टियों के सामने के छोर पर तैरने वाले चिपचिपे सामाजिक साझाकरण बटन कैसे बनाएं। मतलब, वे आपके दर्शकों को हमेशा दिखाई देंगे।

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

इस पाठ के लिए आपके पास जेनरेटप्रेस प्रीमियम होना आवश्यक है, क्योंकि हम एलिमेंट्स मॉड्यूल का उपयोग करने जा रहे हैं।

बिना प्लगइन के जेनरेटप्रेस में सोशल शेयरिंग बटन बनाएं

प्लगइन्स के बिना जेनरेटप्रेस थीम में सोशल शेयरिंग बटन बनाने से आपको एसवीजी आइकन के बारे में जानने की आवश्यकता होती है।

एसवीजी स्केलेबल वेक्टर ग्राफिक्स हैं। वे W3C (वर्ल्ड वाइड वेब कंसोर्टियम) (वर्ल्ड वाइड वेब कंसोर्टियम) द्वारा विकसित खुले मानक दृश्य (मुख्य रूप से आइकन के रूप में उपयोग किए जाते हैं) हैं।

एसवीजी का उपयोग करने के लाभ

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

हम Iconmonstr से SVG का उपयोग करेंगे। मतलब, न केवल आइकन बल्कि उसके XML कोड वाला आइकन भी।

चरण 1: जनरेटप्रेस एलिमेंट्स हुक में सोशल शेयरिंग बटन कोड जोड़ें

इसे पूरा करने के लिए, आपको सबसे पहले जेनरेटप्रेस में एक नया तत्व बनाना होगा। अपने वर्डप्रेस डैशबोर्ड पर जाएं, उपस्थिति के अंतर्गत, एलिमेंट्स पर क्लिक करें। इससे एलिमेंट्स पेज खुल जाएगा, ऐड न्यू एलिमेंट पर क्लिक करें।

जैसे ही आपने Add New Element पर क्लिक किया, GeneratePress एक संवाद विंडो दिखाएगा. हुक पर क्लिक करें. यह सटीक है, इस क्रिया के लिए आपको जेनरेटप्रेस कस्टम हुक की आवश्यकता है।

नए तत्व को एक नाम दें और कोड जोड़ें।

हेडर के बाद जेनरेट के रूप में हुक का चयन करें, PHP निष्पादित करें, और डिस्प्ले नियमों को पोस्ट - सभी पोस्ट पर सेट करें।

चूँकि हमें अपने स्क्रीन व्यूपोर्ट पर तैरने के लिए सोशल शेयरिंग आइकन की आवश्यकता होती है। जेनरेट आफ्टर हैडर हुक का चयन करना सबसे अच्छा है।

हमने प्रदर्शन सेटिंग्स को सभी पोस्ट के रूप में इसलिए चुना है क्योंकि आप चाहते हैं कि आपके उपयोगकर्ता आपकी सामग्री को उनकी सोशल साइटों पर साझा करें।

प्रकाशित करें बटन दबाना न भूलें.

इसे अपनी वेबसाइट पर लागू करने के लिए निम्नलिखित कोड को कॉपी करें।

चरण 2: सामाजिक साझाकरण आइकनों के लिए सीएसएस स्टाइलिंग करें

ऐसा करने के लिए, वर्डप्रेस डैशबोर्ड पर जाएं, उपस्थिति के अंतर्गत, कस्टमाइज़ पर क्लिक करें।

इससे जेनरेटप्रेस थीम कस्टमाइज़र खुल जाएगा। यहां पूरी तरह नीचे जाएं और एडिशनल सीएसएस पर क्लिक करें।

तुलनीय स्टाइल के लिए निम्नलिखित सीएसएस कोड चिपकाएँ। आपको अपनी आवश्यकताओं के अनुसार सीएसएस को समायोजित करने की अनुमति है।

चरण 3: जेनरेटप्रेस में सोशल शेयरिंग बटन का अंतिम परिणाम

अंत में, यहां बताया गया है कि कैसे सामाजिक साझाकरण आइकन आपकी वेबसाइट की तरह दिखने चाहिए. याद रखें कि हमने उन्हें स्क्रीन व्यूपोर्ट के 70% हिस्से पर ऊपर से तैरते हुए बनाया है।

जेनरेटप्रेस में सोशल शेयरिंग बटन के लाभ (प्लगइन के बिना) (प्लगइन के बिना)

Iconmonstr से SVG का उपयोग आपके आइकन को बहुत हल्का बनाता है
इसमें किसी भी प्रकार का जावास्क्रिप्ट कोड शामिल नहीं है।

इस रणनीति का उपयोग करके, आप कोई भी तृतीय पक्ष प्लगइन इंस्टॉल नहीं करते हैं
यह प्रतिक्रियाशील है.

साझा करने के उद्देश्य से सभी बटन अविश्वसनीय रूप से तेजी से काम करेंगे।

निष्कर्ष: जेनरेटप्रेस में सोशल शेयरिंग बटन कैसे बनाएं?

अब आपने जान लिया है कि कोड और प्लगइन्स का उपयोग करके जेनरेटप्रेस में सोशल शेयरिंग बटन कैसे बनाएं।

उस विकल्प का उपयोग करें जो आपके लिए आसान हो और जो आपकी आवश्यकता को पूरा करता हो। कृपया बेझिझक लेख से PHP और/या CSS कोड संपादित करें।