How to Show a Floating Subscribe Button on Blogger

हैलो दोस्तों, आपका स्वागत है Thewebtrick.com आज की पोस्ट में हम ब्लॉगर में सब्सक्राइब बटन लगाना सीखेंगे। जैसा कि हम सब जानते हैं वर्डप्रेस यूजर के पास हमेशा एक बोनस प्वाइंट रहता है ब्लॉगर यूजर की तुलना में, उनके पास अपने ब्लॉग के लिए बहुत सारे प्लगइन्स, थीम और एक SEO ऑप्टिमाइजेशन टूलस होते है। जिनकी मदद से अपने ब्लॉग को चुटकियों में अपडेट कर लेते हैं लेकिन जहां ब्लॉगर यूज़र के पास ऐसी कोई सुविधा नहीं होती है। यहां तक की उन्हें एसईओ के लिए अपने ब्लॉग को अपने दम पर ऑप्टिमाइज़ करना होता है और न ही ब्लॉगर में आपको कोई प्लगइन्स की सुविधा मिलती हैं जैसे कि वर्डप्रेस यूजर उठा सकते हैं।

फ्लोटिंग सब्सक्राइब बटन स्क्रिप्ट आपको नए सब्सक्राइबर्स और फॉलोअर्स प्राप्त करने का सबसे अच्छा तरीका है। अपने देखा होगा बहुत से ब्लॉगर्स इसका उपयोग करते हैं क्योंकि इसके द्वारा वे अपने सब्सक्राइबर्स को बढ़ा सकते हैं। यदि आप भी इंटरनेट या सोशल मीडिया हैंडल पर अपने सब्सक्राइबर या फॉलोअर्स बढ़ाना चाहते हैं तो इस तरीके को अपना सकते है। यदि आप इस विजेट का उपयोग नहीं कर रहे हैं तो आपको इसका उपयोग करना चाहिए। अब बात आती है कि हम इसे ब्लॉगर में कैसे लगाएं। विजेट लगाने से हम इसके कुछ विशेषताओं के बारे में जान ले।

Features of Blogger Floating Subscribe Button

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

1. Fully responsible widget.
2. Floating in the left side of mobile and windows
3. Automatic pops up on every single page.
4. Direct subscribe button
5. Traditional youtube subscribe button design
6. Customize postion, colour etc.

Make floating Subscribe Button on Blogger?

1. Adding CSS Code

सबसे पहले आपको Edit HTML टेम्पलेट मेनू पर जाना होगा और नीचे दिए गए CSS कोड को अपने ब्लॉग टेम्पलेट में </head> के ऊपर जोड़ना होगा। अगर आप बटन कि पोजीशन को बदलना चाहते हैं, मार्क किए भाग को बदलिए।

<style>
/* Subscribe Button by Twt */
.twt-sub { position: fixed; left: 55px; bottom: 20px; background-color: #f2f2f2; padding: 12px 15px 12px 12px; border-radius: 15px; box-shadow: 0 4px 12px 0 rgba(9,32,76,.05); display: flex; align-items: center; max-width: 300px; min-width: 280px; color: #000000; overflow: hidden; z-index: 50;} .twt-sub .twt-sub-close { position: absolute; top: 4px; right: 8px; } .twt-sub .twt-sub-close svg { width: 22px; height: 22px; fill: #000; } .twt-sub .twt-sub-img { width: 70px; height: 50px; } .twt-sub .twt-sub-img img { display: flex; align-items: center; justify-content: center; width: 50px; } .twt-sub .twt-sub-content { width: calc(100% - 70px); padding-left: 1px; } .twt-sub .twt-sub-content a { display: block; color: inherit; } .twt-btn{font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: flex-end; width: 73px; height: 25px; padding-right: 12px; background-color: #e4393c; border-radius: 4px; color: #fff; margin-top: 12px; bottom: 0; right: 0; } .twt-sub .twt-sub-content .title { display: block; font-weight: 700; font-size: 13px; text-align: left; padding-left: 12px }.twt-sub .twt-btn a { display: block; color: inherit; color:#fff; } .twt-sub .twt-sub-content .desc { display: block; font-size: 10px; margin-top: 5px; color: #000; text-align: left;padding-left: 12px }.bt-text{margin-left:9px}
</style>

2. Writing HTML code

इस HTML कोड को जोड़ने के लिए दो विकल्प हैं, पहला सबसे आसान तरीका है, ब्लॉगर लेआउट मेनू पर जाकर साइडबार में एक नया HTML विजेट जोड़ें और नीचे दिए गए सभी HTML कोड पेस्ट करें। दूसरा Edit HTML टेम्पलेट मेनू पर जाकर </body> टैग से पहले नीचे दिए गए सभी HTML कोड को पेस्ट करना है, दोनों विकल्प समान है, यह आप पर निर्भर करता है कि आप कौन से तरीके को चुनते हैं।

<div class='twt-sub jhfdiuh0' id='twt746427'>
<div class='twt-sub-close' onclick='document.getElementById("twt746427").style.display="none"'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>
<div class='twt-sub-img'><img alt='Twt'  src='#'/>
</div>
<div class='twt-sub-content'>
<span class='title'>YOUR NAME</span>
<span class='desc'>Subscribe our Youtube Channel</span>
</div>
  <div class='twt-btn'>
  <a href='https://youtube.com/c/channelname?sub_confirmation=true' target='_blank'>
  <span class='bt-text'>Subscribe</span></a>
</div></div>

3. अपने टेम्पलेट में सेव थीम पर क्लिक करें।

Make these changes before saving the widget

जानकारी Information

• [#]: आपके यूट्यूब लॉगो इमेज यह एड करे;
• [Your Name]: आपके यूट्यूब चैनल का शीर्षक
• [Subscribe our Youtube Channel]: आपके यूट्यूब का डिस्क्रिप्शन, टैगलाइन या फिर आपका कोई पर्सनल मेसेज जो आप लिखना चाहते है।
• [Channel name or id]: आपके यूट्यूब चैनल की आईडी या चैनल का नाम लिखे।

आपका Floating Subscribe Button विजेट पूरी तरह बन के तैयार है, यदि आप सभी चरणों (स्टेप्स) का सही ढंग से पालन किया हैं, तो हम आपको गारंटी दे सकते है आपका सब्सक्राइब बटन ठीक से काम करेगा। यदि आपके मन में कोई प्रश्न या सलाह हैं जो आपके समझे नहीं आया हो, तो कृपया नीचे दिए गए कमेंट बॉक्स के माध्यम से प्रश्न पूछ सकते है।

You May Like These Posts:

Go to Link