[प्लग-इन पूरी तरह से अप्रयुक्त] केवल HTML और CSS के साथ SNS शेयर बटन स्थापित करें [वर्डप्रेस]

2019 7 年月日 302019 8 年月日 3

सामग्री की तालिका

1. चालू कर देना
2. इस कोड के साथ शेयर बटन की विशेषताएं
3. शेयर बटन कोड और कैसे स्थापित करें
4. एचटीएमएल
5. सीएसएस
6. प्रदर्शन उदाहरण

चालू कर देना

अब तक, SNS शेयर बटन था "वर्डप्रेस शेयर बटन प्लगइन – इसे जोड़ेंमैं एक प्लग-इन कॉल पर निर्भर था

यह प्लगइन है

आप Hatena बुकमार्क के साथ-साथ प्रमुख विदेशी SNS जैसे Facebook, Twitter, Line, Pocket, और Pinterest भी जोड़ सकते हैं।
साइड में नैरो और नैरो शेयर बटन डिजाइन है।

मुझे यह उस कारण से पसंद आया, लेकिन यह काफी भारी प्लग-इन था।

यदि आप "नो प्लगइन, शेयर बटन" की खोज करते हैं, तो आपको PHP, CSS, HTML और सोशल आइकन प्लगइन्स का उपयोग करने के तरीके मिलेंगे।

इस बार, मैंने PHP और सोशल आइकॉन का उपयोग किए बिना केवल CSS और HTML का उपयोग करके SNS शेयर बटन सेट करने का प्रयास किया।

इस कोड के साथ शेयर बटन की विशेषताएं

केवल HTML और CSS के साथ बनाया गया
PHP, सामाजिक चिह्नों का उपयोग न करें
टैग में जावास्क्रिप्ट निष्पादित करें
साझा किए जाने वाले पृष्ठ का URL और पृष्ठ शीर्षक स्वचालित रूप से प्राप्त करें
प्लग-इन की तुलना में तेज़ (AddThis की तुलना में अधिकतम 10 अंक तक)
शेयरों की संख्या की गणना नहीं की जा सकती
सरल क्षैतिज डिजाइन

शेयर बटन कोड और कैसे स्थापित करें

एचटीएमएल

कहां लिखें:
"प्रकटन" → "कस्टमाइज़ करें" → "विजेट" → जहां आप साझा करें बटन रखना चाहते हैं → विजेट जोड़ें → "कस्टम HTML"

इस लेख का हिस्सा

सीएसएस

स्थान: दिखावट -> अनुकूलित करें -> अतिरिक्त सीएसएस

/*---SNS शेयर बटन---*/ /* टेक्स्ट ऑन बटन */ .fa-twitter:before, .fa-hatena:before, .fa-line:before, .fa-pocket:before { फॉन्ट - परिवार: हेल्वेटिका नीयू, हेल्वेटिका, एरियल, सेन्स-सेरिफ़; फ़ॉन्ट-वजन: बोल्ड; फ़ॉन्ट-आकार: 14px} .fa-Facebook: से पहले { सामग्री: "f"; } .fa-ट्विटर: { सामग्री: "ट्विटर से पहले ";} .fa-hatena: {सामग्री: "बी!" से पहले; फ़ॉन्ट-परिवार: वरदाना; .fa-पॉकेट: {सामग्री से पहले: "पॉकेट"; } /* बटन प्रदर्शन स्थिति समायोजन */ .बटन-क्षेत्र { टेक्स्ट-एलाइन: सेंटर; मार्जिन-टॉप: 15px; } /* टाइटल डिस्प्ले सेटिंग */ . बटन-एरिया-टाइटल { टेक्स्ट-एलाइन: सेंटर; पैडिंग: .7em; } /* बटन ब्लॉक डिज़ाइन */ .बटन-एरिया li a { पैडिंग: 2px; डिस्प्ले: ब्लॉक; टेक्स्ट-एलाइन: सेंटर; : कोई नहीं; रंग: #fff; बॉर्डर-रेडियस: 4px; } /* प्रत्येक एसएनएस के लिए पृष्ठभूमि का रंग */ .twitter a {पृष्ठभूमि-रंग: # 55acee; } .facebook a{background-color: #3b5998; a{background-color: #008fde; } .line a{background-color: #1dcd00; } .pocket a{background-color: #ea5a6c; } /* सूची हटाएं "・" */ .button-area ul {मार्जिन: 0; पैडिंग: 0; सूची-शैली: कोई नहीं; } /* बटन की चौड़ाई और मार्जिन सेटिंग्स */ .बटन-क्षेत्र ली { फ्लोट: बाएं; चौड़ाई: 19%; बटन-क्षेत्र उल: {डिस्प्ले: ब्लॉक के बाद ; स्पष्ट: दोनों; } /* बटन के होवर होने पर सेटिंग्स प्रदर्शित करें */ .button-area li a:hover { -ms-transform: translateY(-0px); -webkit-transform: translateY(-3px); बदलना: अनुवाद वाई (-2 पीएक्स);