طريقة أضافة زر اشتراك منبثق في قناة اليوتيوب إلى بالوجر YouTube

هل تريد زيادة عدد المشاهدات لمقاطع الفيديو الخاصة بك على قناتك اليوتيوب YouTube  وتنمية جمهورك، فستساعدك هذه التدوينة، سوف تتعلم كيفية إضافة زر اشتراك منبثقة إلى موقع بالوجر الخاص بك.

طريقة أضافة زر اشتراك منبثق في قناة اليوتيوب إلى بالوجر YouTube

كيفية يعمل الزر منبثقة، ولماذا يجب عليك استخدام هذا النوع من الازرار المنبثقة في موقع بالوجر الخاص بك.

حيث تطلب من الزوار الاشتراك في قناتك، أو الاشتراك في رسائل البريد الإلكتروني. أو إعادة التوجيه إلى صفحة المنتج أو الخدمة، وا إلى ذلك. حيث ستظهر نافذة منبثقة أسفل الويب تطلب الاشتراك في قناة اليوتيوب YouTube.

لذا، عندما ينقر المستخدم على زر الاشتراك، سيتم إعادة توجيهه إلى قناة اليوتيوب YouTube.  وبهذه الطريقة، يمكنك إعادة وتجيه المستخدمين من موقعك إلى قناتك على اليوتيوب YouTube. وهذا يساعدك على زيادة عدد المشتريكن وقاعدة المستخدمين على YouTube. لذا، عدنا نتحقق من كيفية إضافته إلى موقع بالوجر Blogger الخاص بك.

كيفية إضافة زر الاشتراك المنبثة في بالوجر؟

إضافة زر الاشتراك العائم Blogger، اتبع الخطوات التالية.

الخطوة 1: انتقل إلى حسابك الخاص في بلوجر ثم لوحة معلوماتBlogger وحدد علامة التبويب ثم " المظهر"

الخطوة 2 : قم بعمل نسخة احتياطية قبل الانتقال إلى الخطوة التالية.

الخطوة 3 : الان انقل إلى تحرير HTML وابحث عن علامة /body>.

الخطوة 4 : أضف كود HTML و CSS الموجود أسفله.

  <style>
  /* Popup Subscribe Button Designed By Key2blogging */
  .YT-subscribe {position: fixed;right: 35px;bottom: 20px;background-color: #ececec;padding: 12px 12px 12px 12px;border-radius: 10px 10px 0px 0px;display: flex;align-items: center;max-width: 320px;
  min-width: 280px;height: auto;color: #000000;overflow: hidden;z-index: 100;border-bottom: 4px solid #ff3b00;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
  .YT-subscribe .YT-subscribe-close { position: absolute; top: 4px; left: 8px; } 
  .YT-subscribe .YT-subscribe-close svg { width: 22px; height: 22px; fill: #000; } 
  .YT-subscribe .YT-subscribe-img { width: 70px; height: 50px; } 
  .YT-subscribe .YT-subscribe-img img { display: flex; align-items: center; justify-content: center; width: 50px; } 
  .YT-subscribe .YT-subscribe-content { width: calc(100% - 70px); padding-left: 1px; } 
  .YT-subscribe .YT-subscribe-content a { display: block; color: inherit; } 
  .Subscribe_btn {font-weight: 600;font-size: 12px;display: flex;align-items: center;justify-content: center;width: 120px;height: 30px;padding: 5px 6px;background-color: #e4393c;border-radius: 4px;
   color: #fff;margin-top: 12px;bottom: 0;left: 0;flex-wrap: wrap;flex-direction: row;align-content: center;}
  .YT-subscribe .YT-subscribe-content .YT-title { display: block; font-weight: 700; font-size: 13px; text-align: right; padding-right: 12px }
  .YT-subscribe .Subscribe_btn a { display: block; color: inherit; color:#fff; } 
  .YT-subscribe .YT-subscribe-content .YT-desc { display: block; font-size: 10px; margin-top: 5px; color: #000; text-align: right;padding-right: 12px; line-height: normal; font-weight: 500; }
  .YT-btn-text{margin-left:9px}
  </style>
  
  <div class='YT-subscribe' id='YT-btn'>
  <div class='YT-subscribe-close' onclick='document.getElementById(&quot;YT-btn&quot;).style.display=&quot;none&quot;'><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='YT-subscribe-img'><img alt='Youtube Channel Image' src='https://www.pngarts.com/files/9/Vector-YouTube-Logo-PNG-Free-Download.png'/>
  </div>
  <div class='YT-subscribe-content'>
  <span class='YT-title'>قناة رؤيا للتقنيات</span>
  <span class='YT-desc'>اشترك لمشاهدة المزيد من دروس التدوين</span>
  </div>
    <div class='Subscribe_btn'>
    <a href='https://www.youtube.com/@rooya.2/videos' target='_blank'>
    <span class='YT-btn-text'>اشترك الآن</span></a>
  </div></div>

الخطوة 5 : قم بتعديل عنوان URL للصورة، واسم قناة اليوتيوب YouTube، ورابط القناة.

الخطوة 6: قم الان بحفظ الكود وسيتم إضافة زر الاشتراك المنبثقة إلى موقع الويب الخاص بك. 

 من خلال تعديل كود CSS، يمكنك تغيير اللون وحجم الخط إذا كانت لديك أي أسئلة أثناء هذا الإجراء، فيرجي تركها في منطقة التعليقات،

إذا كنت تريد عدم ظهور هذه النافذة المنبثقة مرة اخرى بعد النقر فوق زرو الإعلاق، فيمكنك استخدام الكود النصي أدناه مع الكود أعلاه.

<script>
// get the popup element
const popup = document.getElementById("YT-btn");

// get the close button element
const closeBtn = document.querySelector(".YT-subscribe-close");

// get the subscribe button element
const subscribeBtn = document.querySelector(".Subscribe_btn a");

// set the cookie name and expiration time
const cookieName = "YT_popup_closed";
const expirationDays = 30;

// function to set the cookie with the specified name and expiration time
function setCookie(cookieName, expirationDays) {
  const date = new Date();
  date.setTime(date.getTime() + (expirationDays * 24 * 60 * 60 * 1000));
  const expires = "expires=" + date.toUTCString();
  document.cookie = cookieName + "=true;" + expires + ";path=/";
}

// function to check if the cookie with the specified name exists
function checkCookie(cookieName) {
  const cookies = document.cookie.split(";");
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.indexOf(cookieName) === 0) {
      return true;
    }
  }
  return false;
}

// check if the cookie exists, and hide the popup if it does
if (checkCookie(cookieName)) {
  popup.style.display = "none";
} else {
  popup.style.display = "flex";
}

// add event listeners to the close and subscribe buttons
closeBtn.addEventListener("click", function() {
  popup.style.display = "none";
  setCookie(cookieName, expirationDays);
});

subscribeBtn.addEventListener("click", function() {
  popup.style.display = "none";
  setCookie(cookieName, expirationDays);
});
</script>

عندما تضغط على زر الإغلاق فإن كود Javascript هذا سيمنع ظهور النافذة المنبثقة مرارًا وتكرارًا.

إذا لم تقم بمسح ملفات تعريف الارتباط الخاص بالمتصفح الخاص بك أو فتح في وضع التصفح المتخفي، فلن يظهر الموقع خلال الثلاثين يوماً التالية.

أمل أن يوضح لك هذا التدوينة كيفية إضافة والتعديل على زر الاشتراك المنبثقة في قناة يوتيوب إلى موقعك الخاص على بلوجر بسهولة.

للحصول على اخر التحديثات قم بالاشتراك في قناة اليوتيوب الخاصة بنا لاتنسى مراسلتنا على مواقع التواصل الاجتماعي فيسبوك ومتابعة المدونة للمزيد من البرامج التقنية والتعليمية والاضافة المفيدة.