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

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

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

السلام عليكم ورحمة الله وبركات

كيفية الاستفادة ومميزات الويدجت

مقدمة

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

انقر على زر اسفله لمعاينة القطعة (القطعة مبرمجة على ان تظهر بعد 3 ثواني عند دخول للصفحة و تختفي بعد ذلك في حالة نقر المستخدم على الاشتراك سينتقل مباشرة الى قنات صوان على يوتيوب ستختفي القطعة على حسب اختيار المستخدم تجاوز الاشتراك او الاشتراك (الطلب اختياري))

معاينة في UnPlug

إمكانية الاستفادة من إحالة مشتركين للقناة من المتابعين للمدونة

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

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

ربط القناة مع المدونة

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

مميزات إشعار الاشتراك/الانضمام المنبثق

1. ✦زيادة معدل الاشتراكات: يسهل الويدجت عملية الاشتراك للمستخدمين، مما يزيد من احتمالية انضمامهم لقناتك.
2. ✦تعزيز التفاعل: يوفر الويدجت تجربة تفاعلية تجذب انتباه الزوار وتشجعهم على اتخاذ إجراء فوري.
3. ✦التكامل مع التصميم: يمكن تصميم الويدجت ليكون متناسقًا مع تصميم المدونة، مما يجعله جزءًا لا يتجزأ من تجربة المستخدم.
4. ✦سهولة الاستخدام: إعداد الويدجت وتركيبه عادةً ما يكون بسيطًا، ويمكن تخصيصه ليناسب احتياجات المدونة.
5. ✦استهداف الجمهور المناسب: يوفر الويدجت إمكانية استهداف الزوار المهتمين بمحتواك بشكل مباشر، مما يزيد من جودة الاشتراكات.

كيف يعزز الويدجت تفاعل المستخدم؟

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

سؤال: ما هو إشعار الاشتراك المنبثق؟

✦ جواب: هو ويدجت يظهر نافذة منبثقة تشجع الزوار على الاشتراك في القناة مباشرة من المدونة.

سؤال: كيف يمكن أن يساعد في زيادة الاشتراكات؟

✦ جواب: يسهل عملية الاشتراك للزوار ويشجعهم على الانضمام فورًا، مما يزيد من عدد المشتركين.

سؤال: هل يتطلب الإشعار إعدادًا معقدًا؟

✦ جواب: لا، غالبًا ما يكون إعداد الويدجت بسيطًا ويمكن تخصيصه ليتناسب مع تصميم المدونة.

سؤال: ما هي الفوائد الرئيسية لاستخدام هذا الويدجت؟

✦ جواب: يعزز التفاعل مع الزوار، يزيد من الاشتراكات، ويعزز التكامل بين المدونة والقناة.

شرح و كيفية اضافة الشفرات

تحتوي هذه القطعة على ثلاثة أكواد رئيسية. الكود الأول هو HTML، الذي يحدد الهيكل الأساسي للبوب أب، بما في ذلك الأيقونة، النصوص، ورابط الاشتراك في قناة يوتيوب. الكود الثاني هو CSS، الذي يحدد تصميم البوب أب وتنسيقه، بما في ذلك الرسوم المتحركة لتأثيرات الظهور والإخفاء، وتنسيق العناصر داخل البوب أب. الكود الثالث هو JavaScript، الذي يدير ظهور البوب أب بناءً على حالة الجلسة، بما في ذلك الانتظار لعرض البوب أب بعد تحميل الصفحة، وتخزين حالة العرض في الجلسة، ومعالجة حدث النقر لإغلاق البوب أب. كما يتضمن ايضا السكربت استدعاء مكتبة jQuery عبر الرابط التالي:

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' />

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

كيفية اضافة كود سكريبت استدعاء جيكواري

اذا كنت تستخم الهاتف انصحك بتنزيل نسخة للقالب و كرر النسخ لنسختين بعدها افتح محرر النصوص انصحك بتطبيق [Quick Editor+] واضف التعديلات اما اذا كنت تريد تطبيق التعديلات مباشرة من لوحة التحكم انصحك بتنزيل تطبيق [Hacker's Keyboard] نظرا لوجود جميع الاختصارات الموجودة في لوحة مفاتيح الحاسوب كاختصار البث و النسخ و اللصق و التحديد...

1. إضافة كود HTML:
   - تسجيل الدخول إلى حساب بلوجر:
   قم بتسجيل الدخول إلى لوحة التحكم بلوجر.
   - انتقل إلى لوحة تحكم بلوجر واختر "المظهر".
   - انقر على السهم بجانب التخصيص اختر تعديل HTML
   - ابحث عن </head> وضع الكود javascript استدعاء مكتبة جيكواري فوقه.

لابد من اضافة سكريبت الاستدعاء جكواري فوق علامة <head> لتعمل القطعة بشكل مثالي حركة و باقي الخصائص الضرورية.

شرح شيفرة HTML

<div class='si1YTwrap'>
   <div class='si1YTcontent'>
     <div class='si1YTicon'><img alt='si1xyz' class='si1logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqU1e0O8d_-IZu9zAvYcvY7hr8LQHY3GaQiSvkEae-Y31Pbe-qK1Y8CtXWfmSDZDGZETSu7jampoX83WsjT2CdxJsTVjBZ20Zy9iyQtiQS4KQ1F5XjLXEyqC_KMmAxQfYwfF8KQzRDJx_60ZJ148IH4iLQf0pmYHt7EVeI6DuN3mGPAJKImFGXqHv-DEn2/s2828/siwanelogo.webp'/></div>
        <a class='si1YTdetails' href='https://www.youtube.com/channel/UCNjOUgZesxy6Bg3SpNzRC0w?sub_confirmation=1' target='_blank'>
         <span>صِوان محور XYZ</span>
        <p>إشترك في قناة صِوان على يوتيوب</p>
       </a>
     </div>
   <div class='si1YtcloseIcon'><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>

• - <div class='si1YTwrap'>: هذا هو الحاوية الرئيسية للبوب أب. يتم تحديد موقعه في أسفل اليمين ويحتوي على كل شيء في البوب أب.
• - <div class='si1YTcontent'>: يحتوي على محتوى البوب أب بما في ذلك الأيقونة والتفاصيل.
• - <div class='si1YTicon'>: يحتوي على صورة الأيقونة. في هذه الحالة، هو شعار يمكن النقر عليه.
• - <a class='si1YTdetails' href='...' target='_blank'>: رابط إلى قناة يوتيوب مع دعوة للمستخدمين للاشتراك. يظهر نصوصًا تشجيعية للزيارة.
• - <div class='si1YtcloseIcon'>: يحتوي على أيقونة الإغلاق (رمز X) التي تتيح للمستخدم إغلاق البوب أب.

شرح كيفيى اضافة شيفرة HTML

1. إضافة كود HTML:
   - ابقى في نفس صفحة محرر القالب.
   - ابحث عن <data:post.body/> وضع الكود HTML فوقه.

اذا واجهتك اي صعوبة في ايجاد علامة <data:post.body/> يمكنك اضافة كود html مع كود javascript فوق علامة </body>.

شرح شيفرة CSS

  /* pop up subscribe youtube channel */
@keyframes show_si1YT{0%{transform:translateX(-100%)}40%{transform:translateX(10%)}80%{transform:translateX(0%)}100%{opacity:1;pointer-events:auto;transform:translateX(10px)}}@keyframes hide_si1YT{0%{transform:translateX(10px)}40%{transform:translateX(0%)}80%{transform:translateX(10%)}100%{transform:translateX(calc(-100% - 100px))}}.si1YTwrap{position:fixed;z-index:9999999;left:55px;bottom:125px;animation:show_si1YT 0.8s ease forwards;box-shadow:0 5px 12px rgba(0,0,0,0.2);border-radius:10px;background:#fff;padding:10px;border-right:5px solid var(--linkC);width:300px;align-items:center;justify-content:space-between;display:none}.si1YTwrap.hide{animation:hide_si1YT 0.8s ease forwards}.si1YTcontent{display:flex;align-items:center}.si1YTicon .si1logo{max-width:60px;border-radius:100%;transition:all 0.3s ease}.si1YTcontent .si1YTdetails{margin-right:15px;text-decoration:none;outline:none}.si1YTdetails span{font-family:Noto Sans;position:relative;font-size:18px;font-weight:600;color:#000000;top:10px}.si1YTdetails p{color:#878787;font-size:12px}.si1YtcloseIcon svg{position:absolute;fill:#878787;font-size:20px;cursor:pointer;height:28px;width:28px;text-align:center;left:13px;top:8px;border-radius:50%;background:#f2f2f2;transition:all 0.3s ease}.si1YTwrap:hover .si1YTicon img{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.si1YtcloseIcon:hover svg{fill:#444}@media screen and (max-width:480px){.si1YTwrap{left:25px}}.drK .si1YTwrap,.drK .si1YtcloseIcon svg{background:#2d2d30}.drK .si1YTwrap{border-color:#444}.drK .si1YTdetails span,.drK .si1YTdetails p{color:#e2e2e2}

• - @keyframes show_si1YT و @keyframes hide_si1YT: هذه الرسوم المتحركة تحدد كيفية ظهور وإخفاء البوب أب. يظهر البوب أب بشكل تدريجي من اليسار إلى اليمين عند ظهوره، ويتحرك بشكل عكسي عند الإخفاء.
• - .si1YTwrap: التنسيق الأساسي للبوب أب. يظهر كنافذة ثابتة في أسفل الصفحة، ولها تأثيرات وخصائص مثل الظل، التدوير، والألوان.
• - .si1YTwrap.hide: يعرض تأثير الإخفاء عند إضافة الصفة .hide إلى البوب أب.
• - .si1YTcontent: تنسيق المحتوى داخل البوب أب، يضمن أن العناصر تتراص بشكل أفقي.
• - .si1YTicon .si1logo: تنسيق صورة الأيقونة داخل البوب أب، مع تأثير التدوير عند التمرير فوقه.
• - .si1YTdetails: تنسيق رابط تفاصيل القناة، مع إضافة تباعد وتنسيق للنصوص.
• - .si1YtcloseIcon svg: تنسيق أيقونة الإغلاق، مع تأثير تغيير اللون عند التمرير فوقها.
• - @media screen and (max-width: 480px): تعديلات خاصة بالشاشات الصغيرة، مثل تغيير موقع البوب أب.
• - .drK .si1YTwrap و .drK .si1YtcloseIcon svg: تعديلات للألوان في وضعية "الوضع الداكن" (dark mode).

يمكنك استبدال اسم المعلمة المستخدمو لتفعيل الوضع الداكن حسب القالب الذي تستخدمه. على سبيل المثال، يستخدم قالب "سيو بلاس" المعلمة dark-mode، بينما يستخدم قالب "سكويز" المعلمة dm.

شرح كيفية اضافة شيفرة css

1. إضافة كود CSS:
   - ابقى في نفس صفحة محرر القالب.
   - ابحث عن ]]</b:skin> وضع الكود CSS فوقه.

شرح شيفرة JavaScript

<script type='text/javascript'>
//pop up subscribe youtube channel
var time = 5000;
var welcomeSession = sessionStorage.getItem('welcomeSession');if(welcomeSession === null){$(window).bind('load',function(){setTimeout(function(){$('.si1YTwrap').css("display","block");welcomeSession = sessionStorage.setItem('welcomeSession',true)}
,time);$('.si1YtcloseIcon').click(function(){$('.si1YTwrap').addClass('hide')}
)})}</script>

• var time = 5000;
  - يُحدد هذا السطر متغيرًا يسمى time ويعطيه قيمة 5000 ميللي ثانية (5 ثوانٍ). هذه هي مدة الانتظار قبل ظهور البوب أب بعد تحميل الصفحة.
• var welcomeSession = sessionStorage.getItem('welcomeSession');
  - يتم استرجاع قيمة welcomeSession من sessionStorage (مساحة تخزين مؤقتة للبيانات في المتصفح). إذا لم تكن القيمة موجودة، سيتم إرجاع null.
• if (welcomeSession === null) { ... }
  - يتحقق هذا الشرط مما إذا كانت قيمة welcomeSession تساوي null، مما يعني أن البوب أب لم يُعرض بعد خلال الجلسة الحالية.
• $(window).bind('load', function () { ... });
  - يستخدم هذا السطر مكتبة jQuery للانتظار حتى يتم تحميل جميع محتويات الصفحة. بعد ذلك، ينفذ الكود داخل الدالة.
• setTimeout(function () { ... }, time);
  - يُستخدم setTimeout لتأخير تنفيذ الكود داخل الدالة المجهولة لمدة معينة، وهي 5 ثوانٍ في هذه الحالة.
• $('.si1YTwrap').css("display", "block");
  - بعد انقضاء فترة التأخير، يتم تغيير خاصية CSS للبوب أب (.si1YTwrap) لعرضه باستخدام display: block;.
• sessionStorage.setItem('welcomeSession', true);
  - يتم تخزين قيمة true في sessionStorage تحت المفتاح 'welcomeSession'. هذا يمنع ظهور البوب أب في الجلسات المستقبلية (طالما أن الجلسة نفسها مفتوحة).
• $('.si1YtcloseIcon').click(function () { ... });
  - يضيف هذا السطر حدث نقر إلى أيقونة الإغلاق (.si1YtcloseIcon). عندما ينقر المستخدم على أيقونة الإغلاق، سيتم إضافة الصفة hide إلى البوب أب.
• $('.si1YTwrap').addClass('hide');
  - عندما يتم النقر على أيقونة الإغلاق، يضيف هذا السطر الصفة hide إلى البوب أب. هذا سيؤدي إلى تشغيل تأثير الرسوم المتحركة الخاص بالإخفاء والذي يتم تعريفه في CSS.

شرح كيفية اضافة شيفرة css

1. إضافة كود JavaScript:
   - ابقى في نفس صفحة محرر القالب.
   - ابحث عن </body> وضع الكود JavaScript فوقه.
   - بمجرد لصق الاكواد، احفظ التغييرات بالنقر فوق هذا الرمز

خاتمة

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

منشورات ذات صلة

شكرًا لمساعدة ChatGPT في إعداد هذا المقال

المصادر:
SiwaneXYZ©
https://www.siwane.xyz/2024/08/pop-up-subscribe-youtube-channel.html