How to create social share button in GeneratePress without plugin in hindi? आज के इस लेख में हम आपको बताने वाले हैं कि आप किस तरह से generatepress theme में बिना plugin का इस्तेमाल किए social share button कैसे लगा सकते हैं।
अब आप यह सोच रहे होंगे कि सोशल शेयर बटन लगाने के लिए हम प्लगइन का इस्तेमाल भी तो कर सकते हैं लेकिन जब भी आप किसी प्लगइन का इस्तेमाल करते हैं तो आपकी वेबसाइट की स्पीड धीमी हो जाती है जिस कारण visitor आपकी वेबसाइट पर आना पसंद नहीं करता क्योंकि वेबसाइट खोलने में बहुत अधिक समय लेती है।
आज हम आपको बताएंगे कि आप किस तरह से कुछ codes का इस्तेमाल करके आसानी से generatepress premium theme में social share icons लगा सकते हैं यह आइकन आपकी वेबसाइट के सभी पोस्ट में दिखाई देंगे यह Floating Social Share Icons और After Post Social Sharing Icons होंगे जो आपकी साइट पर एक साइड में और पोस्ट के नीचे भी दिखाई देंगे।
इन आइकन का इस्तेमाल करके आप की वेबसाइट पर आने वाला विजिटर आपकी वेबसाइट को अपने सोशल शेयर नेटवर्क पर शेयर कर पाएगा जिससे आपकी वेबसाइट पर अधिक ट्रैफिक आएगी।
जो हम आपको कोड बताने वाले हैं यह codes आप केवल GP premium theme में ही इस्तेमाल कर पाएंगे अगर आपके पास generatepress free वर्जन है तो आप उसके लिए सोशल शेयर प्लगइन का इस्तेमाल कर सकते हैं जो कि free generate press theme के लिए एक बहुत बढ़िया विकल्प है।
Floating Social Sharing Button को GeneratePress premium theme में कैसे लगाएं?
Floating Social Share Icons आपकी वेबसाइट के सभी पोस्ट पर वेबसाइट के एक साइड में दिखाई देते हैं जिनका इस्तेमाल करके कोई भी visitor आपके पोस्ट को या वेबसाइट को अपने सोशल मीडिया अकाउंट पर शेयर कर सकता है।
अब हम आपको बताने वाले हैं कि आप इन Floating Social Share Icons को अपनी वेबसाइट पर बिना किसी प्लगइन का इस्तेमाल किए कोडिंग के द्वारा कैसे लगा सकते हैं।
Also Read:-
- GeneratePress theme में comment form से url कैसे remove करें?
- GeneratePress के permalink मे आने वाले #more को कैसे हटाए?
Floating Social Sharing Button लगाने के लिए GeneratePress theme में Php Code कैसे डालें?
- सबसे पहले आपको वेबसाइट के वर्डप्रेस एडमिन पैनल में लॉगिन कर लेना है।
- अब appearance पर क्लिक करने के बाद generapepress पर क्लिक कर देना है।
- नीचे Elements का ऑप्शन दिखाई देगा उसे इनेबल कर लेना है।
- अब ऊपर की साइड पर Elements का ऑप्शन इनेबल होकर आ जाएगा उस पर क्लिक करें।
- Add new Elements पर क्लिक करें और hook को सिलेक्ट करने के बाद create पर क्लिक कर दें।
- अब आपको टाइटल में Floating Social Share Icons लिख देना है और नीचे वाले बॉक्स में नीचे दिए गए कोड को कॉपी करके paste कर देना है।
अगर किसी कारण से code कॉपी ना हो पाए तो यहां पर क्लिक करके डाउनलोड करें।
<?php
$inhindiblogURL = urlencode(get_the_permalink());
$inhindiblogTitle = urlencode(get_the_title());
$inhindiblogImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="inhindiblog-float-social-wrapper hide-on-mobile hide-on-tablet">
<a class="inhindiblog-float-social-sharing inhindiblog-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $inhindiblogURL; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg></a>
<a class="inhindiblog-float-social-sharing inhindiblog-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $inhindiblogTitle;?>&url=<?php echo $inhindiblogURL;?>&via=inhindiblog" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a>
<a class="inhindiblog-float-social-sharing inhindiblog-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $inhindiblogURL; ?>&media=<?php echo $inhindiblogImage; ?>&description=<?php echo $inhindiblogTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg></a>
<a class="inhindiblog-float-social-sharing inhindiblog-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $inhindiblogURL; ?>&title=<?php echo $inhindiblogTitle; ?>&mini=true" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg></a>
<a class="inhindiblog-float-social-sharing inhindiblog-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $inhindiblogTitle; echo " "; echo $inhindiblogURL;?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg></a>
<a class="inhindiblog-float-social-sharing inhindiblog-social-reddit" href="https://reddit.com/submit?url=<?php echo $inhindiblogURL;?>&title=<?php echo $inhindiblogTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg></a>
</div>PHP Codes for Floating social share button in GeneratePress
- अब थोड़ा नीचे कॉल करना है और सेटिंग के ऑप्शन में Hook मे generate_after_entire_content को सेलेक्ट कर लेना है।
- नीचे Execute PHP के सामने बने बॉक्स पर टिक कर देना है।
- अब Display rule के ऑप्शन पर क्लिक करना है और location के ऑप्शन में post और all post को सेलेक्ट करने के बाद पब्लिक पर क्लिक कर देना है।
अब हमें Floating Social Share Icons को डिजाइन देने के लिए कुछ CSS Codes को Additional CSS में ऐड करना होगा।
CSS Codes को Additional CSS में कैसे ऐड करें?
- Appearance पर क्लिक करने के बाद Customize पर क्लिक कर देना है।
- अब सबसे नीचे Additional CSS का ऑप्शन दिखाई देगा उस पर क्लिक करें।
- अब नीचे दिए कोड को कॉपी करके Additional CSS बॉक्स में पेस्ट कर देना है और पब्लिश पर क्लिक कर देना है।
अगर किसी कारण से code कॉपी ना हो पाए तो यहां पर क्लिक करके डाउनलोड करें।
CSS Codes for Floating Social Share button in GeneratePress
/* Entire Site Social Share Design by inhindiblog*/
.inhindiblog-float-social-wrapper {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9999;
}
.inhindiblog-float-social-sharing {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-start;
min-height: 30px;
font-size: 12px;
padding: 14px 10px;
}
.inhindiblog-float-social-sharing:first-of-type {
border-top-right-radius: 10px;
}
.inhindiblog-float-social-sharing:last-of-type {
border-bottom-right-radius: 10px;
}
.inhindiblog-social-facebook {
fill: #fff;
background-color: rgba(59, 89, 152, 1);
}
.inhindiblog-social-facebook:hover {
background-color: rgba(59, 89, 152, .8);
}
.inhindiblog-social-twitter {
fill: #fff;
background-color: rgba(29, 161, 242, 1);
}
.inhindiblog-social-twitter:hover {
background-color: rgba(29, 161, 242, .8);
}
.inhindiblog-social-pinterest {
fill: #fff;
background-color: rgba(189, 8, 28, 1);
}
.inhindiblog-social-pinterest:hover {
background-color: rgba(189, 8, 28, .8);
}
.inhindiblog-social-linkedin {
fill: #fff;
background-color: rgba(0, 119, 181, 1);
}
.inhindiblog-social-linkedin:hover {
background-color: rgba(0, 119, 181, .8);
}
.inhindiblog-social-whatsapp {
fill: #fff;
background-color: rgba(37, 211, 102, 1);
}
.inhindiblog-social-whatsapp:hover {
background-color: rgba(37, 211, 102, .8);
}
.inhindiblog-social-reddit {
fill: #fff;
background-color: rgba(255, 87, 0, 1);
}
.inhindiblog-social-reddit:hover {
background-color: rgba(255, 87, 0, .8);
}
अब Floating Social Share Icons आपकी वेबसाइट पर दिखाई देने शुरू हो गए होंगे अगर आप चाहे तो आप css codes को कस्टमाइज करके आइकन के डिजाइन को बदल सकते हैं।
After Post Social Sharing Button को GeneratePress premium theme में कैसे लगाएं?
After Post Social Sharing Icons से आप समझ ही गए होंगे कि यह आइकन कहां पर लगाए जाते हैं वैसे हम आपको बता देते हैं कि यह है कि आपकी पोस्ट के सबसे नीचे दिखाई देंगे जिनका इस्तेमाल करके आपकी वेबसाइट पर विजिट करने वाला विजिटर आपके पोस्ट को अपने सोशल मीडिया अकाउंट पर शेयर कर पाएगा।
After Post Social Sharing Button लगाने के लिए GeneratePress theme में Php Code कैसे डालें?
- Appearance पर क्लिक करने के बाद Element पर क्लिक करें और add new element पर क्लिक कर दें।
- यहां पर आपको hook को सेलेक्ट करने के बाद create पर क्लिक कर देना है।
- अब टाइटल में Footer डालने के बाद नीचे दिए गए codes को कॉपी करके टाइटल के नीचे बने बॉक्स में पेस्ट कर देना है।
अगर किसी कारण से code कॉपी ना हो पाए तो यहां पर क्लिक करके डाउनलोड करें।
PHP Codes for After Post Social Sharing button in GeneratePress
<?php
$inhindiblogURL = urlencode(get_the_permalink());
$inhindiblogTitle = urlencode(get_the_title());
$inhindiblogImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="inhindiblog-social-wrapper"> <span class="hide-on-mobile">Share:</span> <a class="inhindiblog-social-sharing inhindiblog-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $inhindiblogURL; ?>" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/>
</svg>
</a>
<a class="inhindiblog-social-sharing inhindiblog-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $inhindiblogTitle; echo " "; echo $inhindiblogURL;?>" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/>
</svg>
</a>
<a class="inhindiblog-social-sharing inhindiblog-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $inhindiblogTitle;?>&url=<?php echo $inhindiblogURL;?>&via=inhindiblog" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a> <a class="inhindiblog-social-sharing inhindiblog-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $inhindiblogURL; ?>&media=<?php echo $inhindiblogImage; ?>&description=<?php echo $inhindiblogTitle; ?>" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/>
</svg>
</a> <a class="inhindiblog-social-sharing inhindiblog-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $inhindiblogURL; ?>&title=<?php echo $inhindiblogTitle; ?>&mini=true" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/>
</svg>
</a> <a class="inhindiblog-social-sharing inhindiblog-social-reddit" href="https://reddit.com/submit?url=<?php echo $inhindiblogURL;?>&title=<?php echo $inhindiblogTitle; ?>" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/>
</svg>
</a> </div>- अब नीचे सेटिंग के ऑप्शन में Hook के सामने wp_footer को सेलेक्ट कर लेना है और Execute PHP के सामने बने बॉक्स पर टिक कर देना है।
- अब Display Rules के ऊपर क्लिक करना है और location के सामने entire site को सेलेक्ट करने के बाद पब्लिश पर क्लिक कर देना है।
अब आपका पीएचपी कोड ऐड हो चुका है अब हमें After Post Social Sharing Icons की सेटिंग करने के लिए कुछ CSS codes को Additional CSS में डालना होगा ताकि हमारे सोशल शेर आइकन लैपटॉप और मोबाइल की स्क्रीन के साथ अर्जेस्ट हो सके।
After Post Social Sharing Button की सेटिंग के लिए CSS Codes को Additional CSS में कैसे ऐड करें?
- Appearance पर क्लिक करने के बाद Customize पर क्लिक कर देना है।
- अब सबसे नीचे Additional CSS का ऑप्शन दिखाई देगा उस पर क्लिक करें।
- अब नीचे दिए कोड को कॉपी करके Additional CSS बॉक्स में पेस्ट कर देना है और पब्लिश पर क्लिक कर देना है।
अगर किसी कारण से code कॉपी ना हो पाए तो यहां पर क्लिक करके डाउनलोड करें।
CSS Codes for After Post Social Sharing button in GeneratePress
/* After Post Social Share Design by inhindiblog*/
.inhindiblog-social-wrapper {
margin: 30px 0;
font-size: 0;
}
.inhindiblog-social-wrapper span {
font-weight: bold;
padding-right: 10px;
font-size: 16px;
}
.inhindiblog-social-sharing {
font-size: 17px;
padding: 7px 20px;
}
@media only screen and (max-width: 600px) {
.inhindiblog-social-sharing {
font-size: 17px;
padding: 6px 17px;
display: inline-block;
}
.inhindiblog-social-wrapper {
margin: 30px 0px;
font-size: 0;
}
}
.inhindiblog-social-sharing svg {
position: relative;
top: 0.15em;
display: inline-block;
}
.inhindiblog-social-sharing:first-of-type {
border-radius: 100px 0 0 100px;
}
.inhindiblog-social-sharing:last-of-type {
border-radius: 0 100px 100px 0;
}
.inhindiblog-social-facebook {
fill: #fff;
background-color: rgba(59, 89, 152, 1);
}
.inhindiblog-social-facebook:hover {
background-color: rgba(59, 89, 152, .8);
}
.inhindiblog-social-twitter {
fill: #fff;
background-color: rgba(29, 161, 242, 1);
}
.inhindiblog-social-twitter:hover {
background-color: rgba(29, 161, 242, .8);
}
.inhindiblog-social-pinterest {
fill: #fff;
background-color: rgba(189, 8, 28, 1);
}
.inhindiblog-social-pinterest:hover {
background-color: rgba(189, 8, 28, .8);
}
.inhindiblog-social-linkedin {
fill: #fff;
background-color: rgba(0, 119, 181, 1);
}
.inhindiblog-social-linkedin:hover {
background-color: rgba(0, 119, 181, .8);
}
.inhindiblog-social-whatsapp {
fill: #fff;
background-color: rgba(37, 211, 102, 1);
}
.inhindiblog-social-whatsapp:hover {
background-color: rgba(37, 211, 102, .8);
}
.inhindiblog-social-reddit {
fill: #fff;
background-color: rgba(255, 87, 0, 1);
}
.inhindiblog-social-reddit:hover {
background-color: rgba(255, 87, 0, .8);
}अब आप की वेबसाइट के सभी पोस्ट के नीचे सोशल शेर आइकन दिखाई देने लग गए होंगे।
क्या Social Sharing Icons का इस्तेमाल करने के बाद हमारी वेबसाइट की स्पीड कम होगी?
जी नहीं, क्योंकि यह Social Sharing Icons हम वेबसाइट में लगाने के लिए कोडिंग का इस्तेमाल कर रहे हैं इसलिए आपकी वेबसाइट की स्पीड पर किसी तरह का कोई भी असर नहीं पड़ेगा लेकिन अगर आप सोशल शेयर आइकन लगाने के लिए किसी प्लगइन का इस्तेमाल करते हैं तो आपकी वेबसाइट की स्पीड जरूर कम हो जाएगी।
क्या सोशल shares आइकॉन को हम अपने हिसाब से कस्टमाइज कर सकते हैं?
जी हां, बिल्कुल अगर आप कोडिंग में एक्सपर्ट है तो आप दी गई कोडिंग में कुछ चेंज करके सोशल शेयर आइकन को कस्टमाइज कर सकते हैं लेकिन अगर आपको कोडिंग की नॉलेज नहीं है तो आप इसमें कुछ भी चेंज ना करें क्योंकि इससे आपकी वेबसाइट में प्रॉब्लम आ सकती है।
हमने इस आर्टिकल में क्या सीखा?
हमने आपको इस लेख में बताया है कि आप किस तरह से बिना किसी प्लगइन का इस्तेमाल की है generate प्रेस प्रीमियम थीम में सोशल शेयर आइकन लगा सकते हैं।
अगर आपको यह लेख पसंद आया हो और इस लेख से कुछ सीखने को मिला हो तो आप नीचे दिए गए सोशल शेर आइकन के बटन पर क्लिक करके इस जानकारी को अपने दोस्तों के साथ शेयर करें ताकि वह भी जान पाए की वेबसाइट में बिना प्लगइन के सोशल शेयर आइकन कैसे लगाते हैं।
Related Posts:
