كيفية إضافة زر اشتراك يوتيوب عائم على بلوجر

بشكل إحترافي ومميز تعلم كيفية إضافة زر اشتراك يوتيوب عائم على بلوجر .
جدول المحتويات

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

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

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


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

اقرأ أيضا : إضافة تحويل اكواد ادسنس و محول اكواد بلوجر 2022

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

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

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

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

كيفية إضافة زر اشتراك يوتيوب عائم على بلوجر

  • لإضافة زر الاشتراك العائم في Blogger ، اتبع الخطوات التالية.
  • انتقل إلى لوحة تحكم على بلوجر الخاصة بك وانقر فوق قسم المظهر.
  • الآن قم بعمل نسخة احتياطية قبل المتابعة إلى الخطوة التالية.
  • انقر الآن على تعديل HTML وابحث عن وسم </body>.
  • الآن أضف كود 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-right: 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: 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/user/syrianli2012?sub_confirmation=true' target='_blank'>
    <span class='YT-btn-text'>إشترك</span></a>
  </div></div>


الآن قم بتغيير الروابط الخاصة بالصورة واسم قناتك على اليوتيوب ورابط الإشتراك بالقناة.


كيفية إضافة زر اشتراك يوتيوب
كيفية إضافة زر اشتراك يوتيوب عائم على بلوجر

الآن احفظ التغييرات وسيضاف زر الاشتراك إلى مدونتك وسيظهر بالأسفل منبثقا , وسيتمكن الزائر من إغلاق الزر متى ما اراد ذلك.



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


كيفية إضافة زر اشتراك يوتيوب عائم على بلوجر


إقرا أيضاً :