फ्लोटिंग सोशल आईकॉन अपने वेबसाइट पर कैसे लगाएं ???
"फ्लोटिंग सोशल आईकॉन" या बटन से आपके ब्लॉग पोस्ट को या वेबसाइट के पेज को आप आसानी से कहीं भी शेयर कर सकते हैं, सोशल आईकॉन बटन को आप अपने पोस्ट में 2 प्रकार में दिखा सकते हैं ।
1. वर्टिकल फ्लोटिंग बटन
2. होरिजेंटल फ्लोटिंग बटन
कई बार आपके पेज पर या वेबसाइट पर आने वाले यूजर आपके पोस्ट के कंटेंट अच्छे लगने के कारण या आपके वेब पेज पर महत्वपूर्ण इंफॉर्मेशन होने के कारण वह पोस्ट कोई दूसरे जगह सेंड करने के लिए इन सोशल आइकॉन का यूज करते हैं।
1. वर्टिकल शेयरिंग फ्लोटिंग बटन (Vertical Sharing Button):
यह एक ऐसा टाइप है, जिसमें आप आपके कंटेंस के साइड में, फिक्स सोशल आईकॉन बटन लगा सकते हैं, और इसमें आप फेसबुक, टि्वटर, व्हाट्सएप, टेलीग्राम, इस तरह के सोशल आइकॉन का यूज कर सकते हैं, जैसे मैंने ऊपर दिए गए स्क्रीनशॉट में दिखाया है।
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_pinterest"></a>
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div><script async src="https://static.addtoany.com/menu/page.js"></script> स्टेप -1
इसलिए सबसे पहले ऊपर दिए गए "html" कोड को कॉपी करना पड़ेगा, उसके बाद आपको वेबसाइट थीम के "html" में आकर "Ctl+F" सर्च करने से एक सर्च बॉक्स खुलेगा जिसमें आपको </html> लिखना है और उसके बाद उस थीम में </html> सर्च करना है.
स्टेप -2
ऊपर कॉपी किया हुआ कोड एग्जैक्ट </html> के ऊपर पेस्ट करें, जैसे मैंने नीचे दिखाया है. उसके बाद थीम को "save" करें, और वेबसाइट के मेन पेज पर आकर मेन पेज रिफ्रेश करोगे तो वहां आपको वर्टिकल सोशल आईकॉन का बटन "शो" करने लगेगा.
नीचे दिया गया कोड यह एक फिक्स वर्टिकल सोशल आइकॉन के लिए यूज किया जाता है , यह कोड सोशल आईकॉन को ऊपर से "150 pixels "और साइड से "150 pixels " प्लेस किया गया है, आप अपने थीम के अनुसार, इसे राइट या लेफ्ट , टॉप या बॉटम से कम ज्यादा कर सकते हैं.
<div class="example_parent_element" style="margin:0 auto; width:900px;">
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="margin-left:-100px; top:150px;">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_pinterest"></a>
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>चाहे तो आप इस कोड का यूज करके दोनों साइड को सोशल आईकॉन को लगा सकते हैं, इसलिए सबसे पहले, दिए हुए कोड में style="margin-left:-100px; top:150px; इसमें चेंजर्स करने पड़ते हैं, यह आप left:-100px; की जगह right:-100px; कर दे.
दोनों में चेंज किए कोड एक साथ कॉपी कर ले, और जैसे ऊपर बताया गया है, स्टेप- 1 और स्टेप -2 में </html> के ऊपर पेस्ट करके थीम को सेव कर दे, और वेबसाइट का पेज रिफ्रेश करने के बाद आपके पोस्ट के दोनों साइड में सोशल आईकॉन "शो" होने लगेंगे
2. होरिजेंटल शेयरिंग बटन (Horizontal Sharing Button )
इस प्रकार के सोशल शेयरिंग "आइकॉन" पोस्ट कंटेंट के नीचे लगाए जाते हैं, जैसे नीचे दिए गए स्क्रीनशॉट में आपको दिखाई दे रहा होगा की यहां आप कई तरह के, सोशल आईकॉन को इसमें दिखा सकते हैं, इसमें भी आपको कोड लगाने के लिए ऊपर दिए गए 2 स्टेप फॉलो करने पडते हैं.
स्टेप-1
आपके " theme " में ऐसा वाला होरिजेंटल सोशल आइकंस लगाना चाहते हो तो, आप नीचे दिए गए कोड को कॉपी करें, और "theme" के "html" आकर </html> सर्च कर ले, जैसे मैंने ऊपर बताया था उन्हीं स्टेप्स को फॉलो करें.
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" style="bottom:0px; right:0px;">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_pinterest"></a>
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div><script async src="https://static.addtoany.com/menu/page.js"></script>
स्टेप-2
</html> सर्च करने के बाद </html> के ऊपर उस कोड को पेस्ट कर दे और अपना वेबसाइट पेज रिफ्रेश करके देख ले तो आपको आपके पोस्ट के ऊपर होरिजेंटल साइड में बटन दिखना शुरू होगा, सोशल आइकंस को आप अपने थीम्स पोस्ट के अनुसार "एडजेस्ट" कर सकते हैं.
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" style="bottom:0px; left:50%; transform:translateX(-50%);">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_pinterest"></a>
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div><script async src="https://static.addtoany.com/menu/page.js"></script>3. रेस्पॉन्सिव फ्लोटिंग शेयरिंग बटन (Responsive Flowting Sharing Button )
हमने "वर्टिकल" और "होरिजेंटल" सोशल आईकॉन को अपनी वेबसाइट पर लगाना ऊपर दिए गए "कोड" से सीखा है, पर इन बटन को हम "रेस्पॉन्सिव" कैसे बनाते हैं, इसके बारे में थोड़ा समझ लेते हैं, नीचे दिए गए "css code" से हम "मोबाइल" और "टेबलेट" जैसे स्मॉल स्क्रीन डिवाइस में वर्टिकल सोशल आईकॉन को "Hide" कर सकते हैं.
<style>
/* Hide AddToAny vertical share bar when screen is less than 980 pixels wide */
@media screen and (max-width: 980px) {
.a2a_floating_style.a2a_vertical_style { display: none; }
}</style> इसलिए ऊपर दिए गए "css code" को कॉपी कर ले, और "थिम" सेक्शन के "CSS" में जाकर उस कोड को पेस्ट कर दे, इससे स्मॉल स्क्रीन डिवाइस जैसे "मोबाइल" हो या "टेबलेट" हो इसमें आप इन सोशलआईकॉन को बड़ी ही आसानी से "hide" कर सकते हैं.
( टिप : मोबाइल पर सोशल आईकॉन बटन "hide" नहीं हो रहा हो तो ऊपर दिए गए "css" कोड में से <style> निकाल दे और दोबारा से ऐड कर दे, अब मोबाइल पर सोशल आईकॉन बटन "hide" होने शुरू होगा.)
4. हाइड एंड "शो"ऑन स्क्रोल (Hide and show on scroll):
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" data-a2a-scroll-show="100" style="left:0px; top:150px;"> ऊपर दिए गए "css" कोड का यूज करके आप पोस्ट के पेसिफिक पार्ट तक फ्लोटिंग सोशल आइकॉन को "hide" कर सकते हैं . यहां तक कि आप अपने थीम के "Header" सेक्शन के ऊपर का पार्ट भी इस कोड से हाइड कर सकते हैं.
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" data-a2a-scroll-show="0,60" style="bottom:0px; right:0px;">आप ऊपर दिए गए कोड से "footer" के नीचे का सभी पार्ट "hide" कर सकते हैं,चाहे तो आप इसमें आपके"theme" के पोस्ट के अनुसार style="bottom:0px; right:0px; में "changes" करके "कस्टमाइजेशन" कर सकते हैं. .
