|
YouTube कई ब्लॉगर्स के लिए एक लोकप्रिय प्राथमिक केन्द्र बन गया है, और यह एक ऐसा मंच है जिसे ब्लोग्गर्स को अनदेखा नहीं करना चाहिए। चूंकि वर्तमान पीढ़ी के अधिकांश लोग यूट्यूब पर अक्सर फ़्रीक्वेंसी आते रहते हैं, इसलिए यह एक अच्छा माध्यम है Followers को बढ़ाने के लिए और आपकी मुख्य वेबसाइट पर ट्रैफ़िक लाने के लिए एक शानदार तरीका है।
साथ ही यह आपके यूट्यूब चैनल के Subscribers को बड़ने में बहुत मददगार साबित हो सकता है क्योंकि यूट्यूब पर भी सब्सक्राइबर को बढ़ाना मुश्किल हो सकता है यदि आप नहीं जानते कि कहां से शुरू करना है, लेकिन सौभाग्य से यदि आपके पास पहले से ही ब्लॉग या वेबसाइट है, तो YouTube आपके पाठकों को आसानी से आपके चैनल की सदस्यता लेने की अनुमति देने के लिए कुछ उपकरण प्रदान करता है।
YouTube वीडियो और ब्लॉग पर विवर्स की संख्या बढ़ाने का एक आसान तरीका हैं जो आपके यूट्यूब चैनल पर सब्सक्राइबर की संख्या में वृद्धि करने में आपकी मदद कर सकता है, यदि आप एक ब्लॉगर हैं जो YouTuber भी हैं, तो YouTube पर Pop Up स्थापित करना बहुत मददगार हो सकता है क्योंकि यह Visitors की नजरों में तुरंत आएगा।
जैसा कि हम जानते हैं, YouTube चैनल को केवल Adsense द्वारा ही Monetization किया जा सकता है जब आपके Subscribers की संख्या 1,000 तक पहुँच गई है और पिछले 12 महीनों में सार्वजनिक वॉच वॉल्यूम के 4,000 घंटे पूरे हो गये हों। जिसे हासिल करने के लिए कड़ी मेहनत करने की जरूरत है, ब्लॉग पोस्ट पर YouTube Pop up सब्सक्राइब बटन जोड़ने से चैनल के साथ ब्लॉग ट्राफिक को भी थोड़ी मदद मिल सकती है।
इस पॉप अप अलर्ट के लिए सेशन स्टोरेज कुकीज़ का उपयोग किया है, इसलिए जब भी इसे close किया जायेगा तो पॉप बार-बार दिखाई नहीं देगा - जब तक कि ब्राउज़र को बंद करके दुबारा ना खोला जाये और जिससे यह हस्तक्षेप नहीं करेगा, डेमो के लिए आप ऊपर दिए गए बटन पर जाकर देख सकते हैं।
Pop Up Subscribe Animation Button Script for Blogger
इस ट्यूटोरियल को तीन चरण में विभाजित किया जाएगा, पहला चरण JQuery Script को ऐड करना होगा है और दूसरा चरण Subscribe Button Style कोड को जोड़ना होगा है, अंतिम चरण में बटन स्क्रिप्ट को ऐड करना होगा। यह ट्यूटोरियल ब्लॉगर उपयोगकर्ताओं के लिए बनाया गया है, अन्य सेवा उपयोगकर्ता इस ट्यूटोरियल को समायोजित कर सकते हैं।
Add jQuery Script on Blogger Theme
यह ध्यान दिया जाना चाहिए कि यह थोड़ा जटिल होगा सकता है, इसलिए ध्यान से देखें क्योंकि अगर थोड़ी भी त्रुटि हुई तो पॉप अप सब्सक्राइब एनीमेशन बटन काम नहीं करेगा।
सबसे पहले आपको एडिट एचटीएमएल टेम्पलेट मेन्यू में जाना होगा और अपने ब्लॉग पर <head> कोड ग्रुप में नीचे दिए गए jQuery स्क्रिप्ट कोड को जोड़ना होगा। संक्षेप में, कृपया Theme पर क्लिक करें और नीचे दिखाए गए एचटीएमएल पर क्लिक करें; संपादन त्रुटियों से बचने के लिए पहले अपने टेम्पलेट का बैकअप लेना ना भूले।
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
कभी-कभी </head> कोड कुछ टेम्पलेट्स में सर्च
करने पर नहीं मिलता है, इसके लिए आप इस तरह कोड देख सकते हैं:
</head> या
<!--<head/>--></head>
Second Step - Adding CSS code
यह सीएसएस कोड लेआउट प्रदर्शित करने का काम करता है।
/* Pop Up subscribe animation button by thewebtrick.com */
@keyframes show_Yt{0%{transform:translateX(100%)}40%{transform:translateX(-10%)}80%{transform:translateX(0%)}100%{opacity:1;pointer-events:auto;transform:translateX(-10px)}}
@keyframes hide_Yt{0%{transform:translateX(-10px)}40%{transform:translateX(0%)}80%{transform:translateX(-10%)}100%{transform:translateX(calc(100% + 100px))}}
.Ytwrap{position:fixed;z-index:9999999;right:55px;bottom:20px;animation:show_Yt 0.8s ease forwards;box-shadow:0 5px 12px rgba(0,0,0,0.2);border-radius:10px;background:#fff;padding:10px;border-left:5px solid #f09800;width:300px;align-items:center;justify-content:space-between;display:none}
.Ytwrap.hide{animation:hide_Yt 0.8s ease forwards}
.Ytcontent{display:flex;align-items:center}
.Yticon .logo{max-width:60px;border-radius:100%;transition:all 0.3s ease}
.Ytcontent .Ytdetails{margin-left:15px;text-decoration:none;outline:none}
.Ytdetails span{font-family:Noto Sans;position:relative;font-size:18px;font-weight:600;color:#000000;top:10px}
.Ytdetails p{color:#878787;font-size:12px}
.YtcloseIcon svg{position:absolute;fill:#878787;font-size:20px;cursor:pointer;height:28px;width:28px;text-align:center;right:13px;top:8px;border-radius:50%;background:#f2f2f2;transition:all 0.3s ease}
.Ytwrap:hover .Yticon img{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.YtcloseIcon:hover svg{fill: #444;}
@media screen and (max-width: 480px){.Ytwrap{right:25px}}
/* CSS Code for Darkmode or Removed this section */
.dark-mode .Ytwrap,.dark-mode .YtcloseIcon svg{background:#2d2d30}
.dark-mode .Ytwrap{border-color:#444}
.dark-mode .Ytdetails span,.dark-mode .Ytdetails p{color:#e2e2e2}
ब्लॉगर पर सीएसएस कोड को
<b:skin>...</b:skin> टैग मेें दिखाया
जाता है। यदि आपको ऊपर दिए गये सीएसएस कोड को खोजने में कठिनाई होती है, तो आप
</head>कोड की खोज कर सकते हैं और सीएसएस कोड को
</head>कोड के ठीक ऊपर एक नोट के साथ रख सकते
हैं जिसे आपको <style>...</style> कोड के
साथ उपयोग करना है। उदाहरण के तौर पर कुछ इस तरह है:
<style>
<!--[ Fill in the CSS Code above ]-->
</style>
</head>
Add Javascript Code for Subscribe Button View
यह स्क्रिप्ट ब्लॉग पर यूट्यूब सब्सक्राइब बटन दिखाने के लिए कार्य करती है, ब्लॉग पर स्क्रिप्ट जोड़ने के बाद स्वचालित रूप से फ्लोटिंग सब्सक्राइब बटन दृश्य होने लगेगा।
<div class='Ytwrap'>
<div class='Ytcontent'>
<div class='Yticon'><img alt='code' class='logo' src='XXXXXXX YOUR LOGO PNG'/></div>
<a class='Ytdetails' href='https://www.youtube.com/channel/XXXXXXXXXXXXXXXX?sub_confirmation=1' target='_blank'>
<span>Your Channel</span>
<p>Subscribe Our YouTube Channel</p>
</a>
</div>
<div class='YtcloseIcon'><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>
<script type='text/javascript'>
var time = 5000;
var welcomeSession = sessionStorage.getItem('welcomeSession');if(welcomeSession === null){$(window).bind('load',function(){setTimeout(function(){$('.Ytwrap,.flashlight').css("display","block");welcomeSession = sessionStorage.setItem('welcomeSession',true)}
,time);$('.YtcloseIcon').click(function(){$('.Ytwrap').addClass('hide')}
)})}</script>
जावास्क्रिप्ट कोड को जोड़ने का सबसे आसान तरीका यह है कि इसे
</body>टैग से पहले रखें। आमतौर पर यह टैग
टेम्पलेट में नीचे की ओर होता है। नीचे दी गई जावास्क्रिप्ट को कॉपी करके
</body>टैग के ठीक ऊपर पेस्ट करें।
इस भाग में var time = 5000 के रूप में चिह्नित; इसका अर्थ है कि पॉप अप 5 सेकंड के भीतर दिखाई देगा, कृपया इसे अपनी आवश्यकताओं के अनुसार समायोजित करे।
अपने YouTube Channel के यूआरएल के साथ ऊपर चिह्नित कोड भाग को बदलें
इस बिंदु तक, आपका YouTube Subscribe Button पूरी तरह से बनाया गया है, यदि आप सभी चरणों का सही ढंग से पालन करते हैं, तो हम गारंटी दे सकते हैं कि फ्लोटिंग सब्सक्राइब बटन ठीक से काम कर रहा है। कृपया अपने ब्लॉग पर फ्लोटिंग सब्सक्राइब बटन पर क्लिक करके इसका परीक्षण करें। यदि कोई प्रश्न हैं जिन्हें समझने में कठिनाई आ रहा है, तो कृपया दिए गए कमेन्ट कॉलम के माध्यम से प्रश्न लिखें।