أخر الاخبار

كيفية اضافة زر اشتراك يوتيوب في بلوجر - Blogger

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

اضافة زر اشتراك يوتيوب في بلوجر - Blogger


اضافة زر اشتراك يوتيوب في بلوجر

في هذه المقالة، ستتعرف على كيفية إضافة زر اشتراك عائم إلى موقع Blogger على الويب.

إذن، كيف يعمل الزر العائم؟ ولماذا يجب عليك استخدام هذا النوع من الزر العائم في موقع الويب الخاص بك؟

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

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

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

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



كيفية إضافة زر الاشتراك العائم في بلوجر (Blogger)؟

كيفية إضافة زر الاشتراك العائم في بلوجر (Blogger)؟

لإضافة زر اشتراك يوتيوب منبثق في بلوجر "Blogger"، بشكل مميز.

 - اتبع الخطوات التالية لـ اضافة زر اشتراك يوتيوب في بلوجر "Blogger"👇

ملحوظة :-

نصيحة - يوصى بشدة بعمل نسخة احتياطية من القالب الحالي قبل تخصيص القالب أو إجراء تغييرات عليه لتجنب حدوث أي أخطاء، حتي يمكنك استعادة القالب الأصلي.

  #   قم بتسجيل الدخول إلى بلوجر - Blogger.

  1   التوجه للوحة تحكم مدونتك ثم المظهر وتعديل HTML 👇

اضافة زر اشتراك يوتيوب في بلوجر

  2   أضغط في الكيبورد على  Ctrl + F  ثم البحث  </body> 

  3   الآن قم  بإضافة كود HTML & CSS فوق وسم   </body>   مباشرةً كما بالصورة التالية 👇


add youtube subscribe button in blogger - اضافة زر اشتراك يوتيوب في بلوجر "Blogger"

  #   الكود 👇
<style>
  /* Popup Subscribe Button Designed By Key2blogging */
  .YT-subscribe {position: fixed;left: 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 #d25028;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
  .YT-subscribe .YT-subscribe-close { position: absolute; top: 4px; right: 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;right: 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: left; padding-left: 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: left;padding-left: 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("YT-btn").style.display="none"'><svg viewBox='0 0 512 512' xmlns='https://bit.ly/3LP3qRt/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'>Gaming Mezo</span>
  <span class='YT-desc'>اشترك في القناة لمشاهدة المزيد من مقاطع الفيديو</span>
  </div>
    <div class='Subscribe_btn'>
    <a href='https://www.youtube.com/channel/UCSfuu5UpjTYEvK938DUguZg' target='_blank'>
    <span class='YT-btn-text'>Subscribe</span></a>
  </div></div>


  4   الآن قم بتغيير عنوان URL الخاص بالصورة واسم قناة يوتيوب "YouTube" الخاص بك وقم بتغير الرابط برابط قناتك علي يوتيوب.

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


ملحوظة 

يمكنك ضبط اللون وحجم الخط عن طريق تعديل كود CSS. وإذا واجهت أي مشكلة أثناء هذه العملية، فلا تتردد بالمراسلة أو في سؤالي في قسم التعليقات، ومبروك عليك الإضافة.


الخلاصة

كان موضوع اليوم عن كيفية اضافة زر اشتراك يوتيوب في بلوجر - Blogger، يمكنك الأن إضافة زر اشتراك يوتيوب في موقعك وتحويل متابعين وزوار الموقع الي مشتركين حقيقين في قناتك علي يوتيوب. 

الكود خفيف وبسيط ويمكنك التعديل علية بكل سهولة ولا يؤثر علي سرعة المدونة او الموقع وإذا واجهت أي خطأ أو مشاكل، فقم بالتعليق أدناه وسيسعدني بكل تأكيد الإجابة عليك.

آمل أن تكون قد وجدت هذا المنشور حول كيفية اضافة زر اشتراك يوتيوب في بلوجر - Blogger مفيدًا. هذا كل شيء لهذا اليوم ، وسنعود إن شاء الله بمنشور جديد قريبًا. حتى ذلك الحين، اعتني بنفسك واستمتع بالتدوين.

دومتم في أمان الله
Ahmed Alkoptan
بواسطة : Ahmed Alkoptan
أحمد القبطان | أعمل بمجال الكمبيوتر ومصمم جرافيك ومنشئ مواقع ويب وعاشق لمجال التقنية والجرافيك



حجم الخط
+
16
-
تباعد السطور
+
2
-