ब्लॉग में WhatsApp Telegram Join बटन कैसे Add करें? (जाने 3 तरीके)

ब्लॉग में WhatsApp Telegram Join बटन कैसे Add करें: Blog में WhatsApp Telegram ज्वाइन बटन कैसे जोड़े? यह सवाल अभी के समय में हर एक ब्लॉग/वेबसाइट के मालिक के दिमांग में जरूर चलता है। यदि आपके भी मन में यह सवाल चल रहा है, तो यह बहुत अच्छा क्योंकि जब आप अपने Visitors के साथ Connect रहते हैं, तो इससे आपका तथा आपके युजर्स के बीच अच्छा रिश्ता बनता है। जिसके कारण वे आपसे लम्बे समय के जुड़े रहते हैं।

अब शायद आप सोच रहे होंगे कि इस लेख में मैं आपको सिर्फ टेलीग्राम और WhatsApp की ज्वाइन बटन को Add करने के बारे में ही क्यों बता रहा हूँ, तो मैं आपको बता दूं कि अभी के समय में टेलीग्राम और WhatsApp का इस्तेमाल सबसे ज्यादा किया जाता है। आप यह मान के चलिए कि इन दोनों का इस्तेमाल लगभग हर एक स्मार्टफोन युजर करता है।

WhatsApp Channel Join Now

Telegram Channel Join Now

इसलिए इन दोनों सोशल मीडिया प्लेटफॉर्म के ज्वाइन बटन आपके ब्लॉग में Add होना बहुत जरूरी है। ऐसा करने से आसानी से अपनी Audience के साथ जोड़कर उनकी समस्या का हल करके अपने Brand को Grow कर सकते हैं। इसलिए आप इस लेख को अंत तक अवश्य पढ़ें।

क्योंकि आज के इस लेख में हम आपको Blog में WhatsApp Telegram Join बटन कैसे Add करें? वो भी Plugin तथा बिना Plugin के द्वारा दो तरीकों के बारे में विस्तार से बतायेंगे।

तो चलिए ज्यादा समय ना लेते हुए सीधा चलते हैं अपने लेख पर और विस्तार से जानने की कोशिश करते हैं कि Blog में WhatsApp Telegram Join बटन कैसे Add करें?।

Table of Contents

ब्लॉग में WhatsApp Telegram Join बटन कैसे Add करें?

इस लेख में हम आपको ब्लॉग में WhatsApp Telegram Join बटन जोड़ने के 2 से 3 तरीकों के बारे में बतायेंगे। जिसमें आप प्लगइन तथा बिना प्लगइन के Add करना सीखेंगे। इसके अलावा आप GeneratePress Theme तथा Other Theme पर कैसे Add करें। इसके बारे में भी सीखें। तो चलिए सबसे पहले जानते हैं कि GeneratePress Theme में WhatsApp Telegram Join बटन कैसे Add करें?

ब्लॉग में WhatsApp Telegram Join बटन कैसे Add करें? (GeneratePress Theme Users)

अभी के समय में GeneratePress Theme बहुत ही Lightweight और Fastest थीम है। जिसका इस्तेमाल अधिकतर ब्लॉगर करते हैं। जिससे की ब्लॉगर्स को उनके ब्लॉग पर अच्छी स्पीड मिलती है। आप GeneratePress की Child Theme को Customize करके अपने ब्लॉग को एक बेहतरीन Look दे सकते हैं। तो चलिए जानते हैं कि ब्लॉग में WhatsApp Telegram Join बटन कैसे Add करें?

GeneratePress Theme में किसी भी प्रकार कोई Custom फीचर Add करने के लिए आपको एक Hook Create करना होगा। इसके लिए आपको निम्नलिखित Steps को Follow करना होगा।

सबसे पहले आप अपने WordPress Dashboard को Log In करें।
इसके बाद Appearance >> Elements पर क्लिक करें।
इतना करने के बाद आपके सामने वो सारे Elements आ जायेंगे। जिन्हे आपने पहले बनाया था। इस पेज में सबसे ऊपर Add New Element पर आपको Click करना है।
इसके बाद आपके सामने एक छोटी सी Window Open होगी। जिसमें आपको Hook को Select करके Create पर क्लिक करना है।
अब आपके सामने Hook Create करने के लिए एक Page Open हो जायेगा। जिसमें Add Title में आपको उस Hook का कोई नाम दे देना है।
इसके बाद Content Aria में आपको नीचे दिए Html Code को Copy करके Paste कर देना है।

<div class="A2ZHindiMe-ContentCard A2ZHindiMe-GreenHighlight">
    <span style="display: flex; align-items: center;"><i class="fab fa-whatsapp" style="font-size:24px;color:#25d366;"></i>
        <span style="font-weight: bold; margin-left: 10px; font-size: 0.9rem !important;">WhatsApp Channel</span>
    </span>
    <a class="A2ZHindiMe-ActionButton" href="../index.html" rel="nofollow noopener noreferrer" target="_blank">
        Join Now
    </a>
</div>

<div class="A2ZHindiMe-ContentCard A2ZHindiMe-BlueHighlight">
    <span style="display: flex; align-items: center;"><i class="fab fa-telegram" style="font-size:24px;color:#0086ce;"></i>
        <span style="font-weight: bold; margin-left: 10px; font-size: 0.9rem !important;">Telegram Channel</span>
    </span>
    <a class="A2ZHindiMe-ActionButton" href="../index.html" rel="nofollow noopener noreferrer" target="_blank">
        Join Now
    </a>
</div>

इतना करने बाद अब आपको सेटिंग करनी होगी कि आप WhatsApp और Telegram Join बटन को किस स्थान पर Show करना चाहते हैं। इसके लिए आप Hook वाले ऑप्शन में उस सेटिंग को सेलेक्ट कर सकते हैं।
इसके बाद Display Rules में आपको Location में Posts और All Posts को Select करना है।
इतना करने के बाद आपको अंत में Hook को Publish कर देना है।

इसके बाद यदि आप अपने ब्लॉग पोस्ट को रिफ्रेश करके देखेंगे, तो आपको WhatsApp और Telegram Join बटन दिखने लगे होंगे लेकिन अभी यह दिखने में सुंदर नहीं लग रहे होंगे। इन्हे सुंदर दिखने के लिए आप नीचे बताई गई प्रोसेस को फॉलो करें।

WhatsApp और Telegram Join बटन को Customize करने के लिए सबसे पहले आपको Appearance >> Customize पर क्लिक करना होगा।
इसके बाद आपको Right Side Menu में सबसे नीचे Additional CSS पर क्लिक करना है।
अब आपको नीचे दिए गये CSS Code को Copy करके Additional CSS में Paste करके Publish पर क्लिक कर देना है। लो गया।

.A2ZHindiMe-ContentCard {
        margin-bottom: 20px;
        position: relative;
        border: 2px solid transparent;
        border-radius: 5px;
        background: #f0f8fff2;
        display: flex;
        align-items: center;
        padding: 7px;
        justify-content: space-between;
        overflow: hidden;
    }

.A2ZHindiMe-BlueHighlight .A2ZHindiMe-ActionButton{
	text-decoration: none !important;
}

    .A2ZHindiMe-GreenHighlight {
        animation: A2ZHindiMe-GreenBorderAnimation 1s infinite;
    }

    .A2ZHindiMe-BlueHighlight {
        animation: A2ZHindiMe-BlueBorderAnimation 1s infinite;
    }

    @keyframes A2ZHindiMe-GreenBorderAnimation {
        0% {
            border-color: transparent;
        }

        50% {
            border-color: #25d366;
        }

        100% {
            border-color: transparent;
        }
    }

    @keyframes A2ZHindiMe-BlueBorderAnimation {
        0% {
            border-color: transparent;
        }

        50% {
            border-color: #0086ce;
        }

        100% {
            border-color: transparent;
        }
    }

    .A2ZHindiMe-ActionButton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: bold;
        padding: 5px 20px;
        border-radius: 3px;
        flex-shrink: 0;
        transition: all 0.3s ease-in-out;
        color: white !important;
    }

    .A2ZHindiMe-GreenHighlight .A2ZHindiMe-ActionButton {
        background: #25d366;
    }

    .A2ZHindiMe-BlueHighlight .A2ZHindiMe-ActionButton {
        background: #0086ce;
    }

    .A2ZHindiMe-ActionButton:hover {
        transform: scale(1.05);
    }

बधाई हो! इतना करते ही आपके ब्लॉग में WhatsApp और Telegram Join बटन Add हो जाता है।

WhatsApp Telegram Join बटन Plugin की मदद से Add करें

बिना प्लगइन के WhatsApp Telegram Join बटन Add करने के बाद अब हम जानते हैं कि Plugin की मदद से WhatsApp और Telegram Join बटन कैसे Add करें?

सबसे पहले आपको Ad Inserter नाम की एक प्लइगन को Install करके Active कर लेना है। मैं आपको इस प्लगइन के बारे में इसलिए बता रहा हूँ क्योंकि आप इसकी मदद से अपने ब्लॉग पर बड़ी आसानी से AdSense Code को जिस स्थान पर चाहें उस स्थान पर Add कर सकते हैं।
Ad Inserter की फ्री प्लगइन में आपको Ad तथा कुछ भी Add करने के लिए 16 Block मिलते हैं। आप किसी भी Block पर क्लिक करके नीचे दिए गये कोड़ को कॉपी करके उसमें Paste कर देना है।

<link data-minify="1" rel="stylesheet" href="../wp-content/cache/min/1/ajax/libs/font-awesome/6.0.0-beta3/css/all.min14ee.css?ver=1710778192">
   <style>
        .A2ZHindiMe-card {
            margin-bottom: 5px;
            position: relative;
            border: 2px solid transparent;
            border-radius: 5px;
            background: #f0f8ff;
            display: flex;
            align-items: center;
            padding: 7px;
            justify-content: space-between;
            overflow: hidden;
        }

        .whatsapp-card {
            animation: whatsapp-border-animation 1s infinite;
        }

        .telegram-card {
            animation: telegram-border-animation 1s infinite;
        }

        .facebook-card {
            animation: facebook-border-animation 1s infinite;
        }

        @keyframes whatsapp-border-animation {
            0% {
                border-color: transparent;
            }

            50% {
                border-color: #25d366;
            }

            100% {
                border-color: transparent;
            }
        }

        @keyframes telegram-border-animation {
            0% {
                border-color: transparent;
            }

            50% {
                border-color: #004F7A;
            }

            100% {
                border-color: transparent;
            }
        }

        @keyframes facebook-border-animation {
            0% {
                border-color: transparent;
            }

            50% {
                border-color: #004F7A;
            }

            100% {
                border-color: transparent;
            }
        }

        .A2ZHindiMe-nofollow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: bold;
            text-decoration: none;
            padding: 5px 20px;
            border-radius: 2px;
            flex-shrink: 0;
            transition: all 0.3s ease-in-out;
            color: white !important;
        }

        .A2ZHindiMe-nofollow i {
            margin-right: 5px;
        }

        .whatsapp-card .A2ZHindiMe-nofollow {
            background: #25d366;
        }

        .telegram-card .A2ZHindiMe-nofollow {
            background: #004F7A;
        }

        .facebook-card .A2ZHindiMe-nofollow {
            background: #004F7A;
        }

        .A2ZHindiMe-nofollow:hover {
            transform: scale(1.05);
        }
    </style>


    <div class="A2ZHindiMe-card telegram-card">
        <span style="display: flex; align-items: center;"><i class="fab fa-telegram"
                style="font-size:24px;font-color:#fff;color:#004F7A;"></i>
            <span style="font-weight: bold; margin-left: 10px; font-size: 0.9rem !important;">Telegram A2ZHindiMe</span>
        </span>
        <a class="A2ZHindiMe-nofollow" href="https://t.me/a2zhindimejankari" rel="nofollow noopener noreferrer" target="_blank">
            <i class="fab fa-telegram"></i> Join Now
        </a>
    </div>
    
    <div class="A2ZHindiMe-card whatsapp-card">
        <span style="display: flex; align-items: center;"><i class="fab fa-whatsapp"
                style="font-size:24px;color:#25d366;"></i>
            <span style="font-weight: bold; margin-left: 10px; font-size: 0.9rem !important;">WhatsApp A2ZHindiMe</span>
        </span>
        <a class="A2ZHindiMe-nofollow" href="https://whatsapp.com/channel/0029Va9tJS3Ae5VmSOn6GN0R" rel="nofollow noopener noreferrer" target="_blank">
            <i class="fab fa-whatsapp"></i> Join Now
        </a>
    </div>

  <div class="A2ZHindiMe-card facebook-card">
        <span style="display: flex; align-items: center;"><i class="fab fa-facebook"
                style="font-size:24px;color:#004F7A;"></i>
            <span style="font-weight: bold; margin-left: 10px; font-size: 0.9rem !important;">Facebook A2ZHindiMe</span>
        </span>
        <a class="A2ZHindiMe-nofollow" href="https://www.facebook.com/a2zhindimejankari" rel="nofollow noopener noreferrer" target="_blank">
            <i class="fab fa-facebook"></i> Join Now
        </a>
    </div>

इसके बाद नीचे सेटिंग में आपको Posts को सेलेक्ट करना है।
Insertion में आपको उस स्थान को सेलेक्ट कर जिस स्थान पर आप WhatsApp और Telegram Join बटन को Add करना चाहते हैं।
Alignment में आपको Center को सेलेक्ट करके Save Settings पर क्लिक कर देना है।

बधाई हो! Ad Inserter प्लगइन की मदद से आपके WhatsApp और Telegram Join बटन आसानी से Add हो चुके हैं।

महत्वपूर्ण सूचना:- आपने WhatsApp और Telegram Join बटन को Add करने के लिए जो भी Html Code को Paste है। उसमें आपको “Add Your WhatsApp Channel Link” के स्थान पर अपने WhatsApp Channel का Link Add करना है और इसी तरह “Add Your Telegram Channel Link” के स्थान पर अपने Telegram Channel का लिंक Add करना है।

Any Theme Users WhatsApp और Telegram Join बटन कैसे Add करें?

यदि आप अपने ब्लॉग में किसी अन्य थीम का इस्तेमाल करते हैं, तो आप बड़ी आसानी से बिना प्लगइन WhatsApp और Telegram Join बटन को जोड़ सकते हैं । हम आपको यह पर आपको 3 लोकेशन पर इन बटन को Add करने के बारे में बतायेंगे। हाँ! ऐसा करने के लिए आपके ब्लॉग पर उस थीम का Child वर्जन Active होना चाहिए।

तरीका #1 – Before the Content

यदि आप अपने ब्लॉग पोस्ट में कंटेंट से पहले इन बटन को Add करना चाहते है, तो निम्नलिखित स्टेप्स को फॉलो करें।

इसके लिए सबसे पहले आपको Appearance > Theme File Editor में जाना होगा।
इसके बाद आपके सामने आपकी थीम की फाइल खुल जायेगी। जिसमें आपको Left Side में Functions.php पर क्लिक करना है।
अब आपको नीचे दिए कोड़ को कॉपी करके Functions.php में Paste कर देना है।

अभी आपने जो कोड Functions.php में Paste किया है। उसमें आपको <div>Your social buttons HTML</div> के स्थान पर सबसे ऊपर वाले Html Code (जो इस लेख में सबसे पहले दिया था) को Paste कर देना है।
इसके बाद मैंने ऊपर जो CSS Code ऊपर दिया था। उसे कॉपी करके Theme File Editor के Style.css में Paste करके Save पर क्लिक कर दें। (आप इस CSS Code को Customize >> Additional CSS में भी Add कर सकते हैं)

Note: आप “Add Your WhatsApp Channel Link” और “Add Your Telegram Channel Link” के स्थान पर अपने WhatsApp और Telegram Channel का लिंक Add करें।

इतना करते ही आपके ब्लॉग में कंटेंट से पहले सोशल बटन दिखना शुरू हो जायेंगे।

तरीका #2 – After the Second Paragraph

अब यदि आप WhatsApp और Telegram Join बटन को दूसरे पैराग्राफ के नीचे Add करना चाहते हैं, तो आप निम्नलिखित प्रोसेस को फॉलो करें।

सबसे पहले आपको अपने Function.php को एडिट करना होगा। इसके लिए आपको ऊपर बताई गई प्रोसेस को फॉलो करना है।
इसके लिए सबसे पहले आपको नीचे दिए php Code को कॉपी करके Function.php में Paste करना है।

आप इस कोड में <div>Your social buttons HTML</div> के स्थान पर सबसे ऊपर दिए सोशल बटन के Html Code को Paste करें।
CSS Code को Add करने के लिए तरीका 1 के CSS कोड़ की प्रोसेस करें।
बधाई हो! इतना करते ही Second Paragraph के बाद सोशल बटन दिखना शुरू हो जायेंगी।

तरीका #3 – After the Content

Content के बाद WhatsApp Telegram Join buttons को Add करने के लिए निम्नलिखित प्रोसेस को फॉलो करें।

इसके लिए आप पिछली सेम प्रोसेस को फॉलो करें। नीचे दिए Code को Function.php में Paste करना और <div>Your social buttons HTML</div> के स्थान पर सबसे ऊपर दिए गये सोशल बटन के Html Code के स्थान पर Add करें।

function add_social_buttons_end_of_content($content) { $social_buttons_html = ‘

Your social buttons HTML

‘; return $content . $social_buttons_html; } add_filter(‘the_content’, ‘add_social_buttons_end_of_content’);

वहीं CSS Code को Add करने के लिए ऊपर बताई गई प्रोसेस को फॉलो करें।
बधाई हो! इतना करते ही आपकी ब्लॉग पोस्ट के अंत में सोशल बटन दिखना शुरू हो जायेंगी।

आपकी पोस्ट में कुछ इस तरह से सोशल ज्वाइन बटन नजर आयेगा। जैसा की नीचे दी गई ईमेज में दिख रहा है।

ये लेख भी पढ़ें:

अंतिम शब्द – ब्लॉग में WhatsApp Telegram Join बटन कैसे Add करें

आज के इस लेख ब्लॉग में WhatsApp Telegram Join बटन कैसे Add करें? में हमने आपको WhatsApp Telegram Join बटन को Add करने के बारे में विस्तार से सरल भाषा में बताया है। ताकि आप अपने ब्लॉग में आसानी से इन्हे Add कर सकें। यदि आपको किसी भी प्रकार की कोई समस्या आ रही है, तो आप मुझसे कमेंट करके पूंछ सकते हैं। हम हर संभव आपकी मदद करेंगे।

मुझे उम्मीद है कि आज का लेख ब्लॉग में WhatsApp Telegram Join बटन कैसे Add करें? आपको बेहद पसंद आया होगा। अगर ऐसा है, तो आप इस लेख को अपने मित्रों के साथ सोशल मीडिया पर अवश्य शेयर करें। ताकि वो भी अपने ब्लॉग में WhatsApp Telegram Join बटन को आसानी से Add कर सकें।

यदि आप ब्लॉगिंग सीखना चाहते हैं या फिर अन्य किसी तरीके का इस्तेमाल करके ऑनलाइन पैसे कमाना चाहते हैं, तो आप इस ब्लॉग पर लगातार आते रहें क्योंकि हम इस ब्लॉग पर ब्लॉगिंग तथा Online Earning से संबंधित आर्टिकल पब्लिश करते हैं।