New Floating Youtube Subscribe Button - HTML,CSS,JS | How To Install Floating Youtube Subscribe Button On Blogger

byAdmin December 24, 2021

हैलो, दोस्तों स्वागत है आपका आज की खास पोस्ट में , इस पोस्ट में मैं आपको बताऊंगा की कैसे आप अपने ब्लॉग पर फ्लोटिंग Youtube सब्सक्राइब बटन लगा सकते है । अपने सोशल मीडिया फॉलोअर्स को बढ़ाने के सबसे आसान तरीकों में से एक है अपने ब्लॉग पर Youtube सब्सक्राइब बटन लगाना। यदि आपके पास एक अच्छा ट्रैफिक ब्लॉग है, तो विभिन्न सोशल नेटवर्किंग साइटों के लिए यूट्यूब सब्सक्राइब बटन अवश्य ऐड करें, इससे आपके विजिटर को आपकी यूट्यूब वीडियो से सहायता मिलेगी और आपके ब्लॉग के साथ-साथ यूट्यूब पर भी चैनल Grow होगा और आप अपने विजिटरस के साथ कनेक्ट हो जाएंगे ।

New Floating Youtube Subscribe Button - HTML,CSS,JS | How To Install Floating Youtube Subscribe Button On Blogger
New Floating Youtube Subscribe Button - HTML,CSS,JS | How To Install Floating Youtube Subscribe Button On Blogger

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

CSS

  1. सबसे पहले अपने ब्लॉगर खाते में लॉग इन करें।
  2. फिर Theme Section में Edit Html पर जाएं।
  3. Ctrl+F प्रेस कर </head> टैग को सर्च करे ।
  4. सर्च करने के बाद </head> टैग हाइलाइट हो जाएगा ।
  5. हाइलाइट हो जाने के बाद नीचे दिए गए कोड़ को </head> टैग के ऊपर Paste करे ।
  6. फिर Theme को Save करें । 


<style>

/* Subscribe button by Technical Success Official */

.TS-sub { position:fixed; left: 55px;visibility:hidden; 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: 338px; min-width: 280px; color: #000000; overflow: hidden; z-index: 50;transition: 0.5s ease;} .TS-sub .TS-sub-close { position: absolute; top: 4px; right: 8px; } .TS-sub .TS-sub-close svg { width: 22px; height: 22px; fill: #000; } .TS-sub .TS-sub-img { width: 70px; height: 50px; } .TS-sub .TS-sub-img img { display: flex; align-items: center; justify-content: center; width: 50px; } .TS-sub .TS-sub-content { width: calc(100% - 70px); padding-left: 1px; } .TS-sub .TS-sub-content a { display: block; color: inherit; } .at-btn{font-weight: 700; font-size: 11px; display:flex;justify-content: center; width: 94px; height: 25px;background-color: #e4393c; border-radius: 4px; color: #fff; margin-top: 12px; bottom: 0; right: 0; } .TS-sub .TS-sub-content .title { display: block; font-weight: 700; font-size: 13px; text-align: left; padding-left: 12px } .TS-sub .TS-sub-content .desc { display: block; font-size: 10px;color: #000; text-align: left;padding-left: 12px }.TS-sub.show-btn{ visibility: visible; transform: translate(20px, 18px) transition: 0.5s ease; } .TS-sub.hide-btn{ opacity: 0; transform: translate(50px, 18px); transition: 0.5s ease; }.bt-text{padding-top: 7px; display: flex;}.at-btn a{color:inherit}

</style>

HTML

  1. सबसे पहले अपने ब्लॉगर खाते में लॉग इन करें।
  2. फिर Theme Section में Edit Html पर जाएं।
  3. Ctrl+F प्रेस कर <body> टैग को सर्च करे ।
  4. सर्च करने के बाद <body> टैग हाइलाइट हो जाएगा ।
  5. हाइलाइट हो जाने के बाद नीचे दिए गए कोड़ को <body> टैग के नीचे Paste करे ।
  6. फिर Theme को Save करें । 

 <div class='TS-sub show-btn'>

<div class='TS-sub-close'><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='TS-sub-img'><img alt='Technicalsuccessofficial' src='https://blogger.googleusercontent.com/img/a/AVvXsEgdyM71G-qyTfrSfK7qWzy0-BvPJ8QIHIgNid3vlPBaEMhaxoLdZZin9trMqKvDpb0kQwcrJszSSZq1dMT2H7ev6fjDdvvmNCplrGqEREYMq8Fl2sdRYfu3A7hlljAbjo1OAsuumOXq7lU39pnCkUeuJzxT7ZwmPOqoRBE-XiQaLBW6VTvrCSrHV56P=s3264'/>

</div>

<div class='TS-sub-content'>

<span class='title'>Technical Success Official</span>

<span class='desc'>Subscribe our Youtube Channel</span>

</div>

  <div class='at-btn'>

  <a href='https://youtube.com/channel/UCIf2dNpxcZTfTEAQHud1V-w' target='_blank'>

  <span class='bt-text'>Subscribe</span></a>

</div></div>

Js

  1. सबसे पहले अपने ब्लॉगर खाते में लॉग इन करें।
  2. फिर Theme Section में Edit Html पर जाएं।
  3. Ctrl+F प्रेस कर </body> टैग को सर्च करे ।
  4. सर्च करने के बाद </body> टैग हाइलाइट हो जाएगा ।
  5. हाइलाइट हो जाने के बाद नीचे दिए गए कोड़ को </body> टैग के ऊपर Paste करे ।
  6. फिर Theme को Save करें । 

<script>//<![CDATA[ const subContainer = document.querySelector(".TS-sub"); const closeBtn = subContainer.querySelector(".TS-sub-close"); closeBtn.addEventListener("click", () => { document.cookie = "WebsiteName01=anutrickz01; max-age=" + 24*60*60; subContainer.classList.add("hide-btn"); setTimeout(()=>{ subContainer.classList.add("hide"); }, 2000); }); const siteCookie01 = document.cookie.indexOf("WebsiteName01="); if(siteCookie01 != -1){ subContainer.classList.remove("show-btn"); } else{ subContainer.classList.add("show-btn");}       //]]> </script>


तो उपरोक्त Steps को Follow करने के बाद मुझे आशा है कि आपने अपने ब्लॉग में फ्लॉटिंग Youtube सब्सक्राइब बटन की Scripts को सफलतापूर्वक स्थापित कर लिया है । अगर आपको कोई समस्या आ रही है तो आप नीचे Comment कर सकते है आपको Reply देकर सहायता अवश्य की जाएगी ।

Conclusion


आज हमने इस बारे में चर्चा की है कि New Floating Youtube Subscribe Button - HTML , CSS | How To Install Floating Youtube Subscribe Button On Blogger । मुझे आशा है कि आपको यह आर्टिकल बहुत उपयोगी लगा होगा। इस तरह की और पोस्ट के लिए रोजाना हमारे ब्लॉग को लाइक और फॉलो करें।
Tags

Post a Comment

0 Comments