كيفية إنشاء إعلانات Parallax في منتصف منشور بلوجر

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

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

الإعلان الذكي لا يقطع رحلة القارئ، بل يسير معه بخطوة محسوبة.

Content Strategy Principle

ما هي إعلانات Parallax؟

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

1. يتم إدراج الإعلان داخل بنية المقال وليس خارجه.
2. يُربط الإعلان بتأثير تمرير (Scroll Effect) عبر CSS فقط.
3. يتحرك الإعلان بسلاسة عند نزول القارئ داخل الصفحة.

Info!
إعلانات Parallax لا تعتمد على JavaScript في شكلها الاحترافي داخل بلوجر، بل يمكن تنفيذها بكفاءة باستخدام CSS فقط، ما يحافظ على سرعة الموقع.

الحركة المدروسة تلفت الانتباه، أما الحركة العشوائية فتشتت القارئ.

UX Design Insight

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

ما هي مميزات إعلانات Parallax؟

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

1. زيادة معدل بقاء الزائر داخل الصفحة (Time on Page).
2. تحسين نسبة التفاعل مع الإعلان دون التأثير السلبي على المحتوى.
3. الحفاظ على تجربة قراءة سلسة وغير متقطعة.
4. إمكانية الدمج مع إعلانات AdSense أو روابط تسويقية.

Warning!
الإفراط في استخدام إعلانات Parallax داخل المقال الواحد قد يؤدي إلى نتيجة عكسية ويضعف تجربة المستخدم بدل تحسينها.

أفضل إعلان هو الذي يُرى ويُتذكر دون أن يُكره.

Digital Marketing Rule

من منظور استراتيجي، تُعد إعلانات Parallax خيارًا ذكيًا لأصحاب مواقع بلوجر الذين يسعون لتحقيق توازن حقيقي بين الربح المادي، والأداء التقني، ورضا المستخدم على المدى الطويل.

شرح تفصيلي لإنشاء إعلانات بارالاكس في منتصف منشور بلوجر

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

1. إنشاء وحدة إعلانية جديدة من Google AdSense:
   1. انتقل إلى لوحة تحكم AdSense.
   2. اختر إعلانات ثم وحدات الإعلانات.
   3. انشئ وحدة جديدة متجاوبة رأسية (Responsive Vertical).
   4. انسخ كود الإعلان الناتج.
2. وضع كود السكربت داخل القالب:

   Info!
   يجب وضع هذا السكربت عادةً أعلى وسم </body> مباشرة في القالب لضمان عمله على كافة المنشورات.

   // Modified Parallax Ads In Middle Post by modweeb
   (function() {
     let modweebAds = document.querySelector('.modweebParallax');
     if (modweebAds) {
       let modweebPosts = document.querySelectorAll('.post-body br, .post-body p');
       let modweebMiddleIndex = parseInt(modweebPosts.length / 2);
   
       if (modweebPosts[modweebMiddleIndex].nodeName == 'P') {
         modweebPosts[modweebMiddleIndex].parentNode.insertBefore(modweebAds, modweebPosts[modweebMiddleIndex]);
       }
       else {
         modweebPosts[modweebMiddleIndex].parentNode.insertBefore(modweebAds, modweebPosts[modweebMiddleIndex].nextSibling);
       }
     }
   })();

   Info!
   لاحظ أن اسم فئة نص المنشور في القالب هو عادة .post-body. تأكد من مطابقته في الكود.

3. إضافة كود CSS لتأثير Parallax:

   Info!
   ضع الكود داخل <style> في القالب فوق ]]></b:skin> أو قبل </style>.

   /* Modified Parallax Ads In Middle Post by modweeb */
   .modweebParallax {
     display: block;
     height: 600px;
     margin: 1rem auto;
     position: relative;
   }
   .modweebPrlx1 {
     clip-path: inset(0 0 0 0);
     position: absolute;
     overflow: hidden;
     margin: auto;
   }
   .modweebPrlx2 {
     align-items: flex-start;
     display: inline-flex;
     justify-content: center;
     position: fixed;
   }
   .modweebPrlx1, .modweebPrlx2 {
     bottom: 0;
     left: 0;
     right: 0;
     top: 10px;
   }
   .modweebPrlx1, .modweebParallax ins {
     height: 100%;
     width: 100%;
   }

4. إضافة كود HTML الإعلان أسفل محتوى المنشور:

   Info!
   ابحث عن <data:post.body/> في القالب وضع الكود التالي أسفله مع كود إعلان AdSense الخاص بك.

   <b:if cond='data:blog.isMobileRequest and data:view.isPost and !data:view.isPreview'>
     <!-- Modified Parallax Ads In Middle Post by modweeb -->
     <div class='modweebParallax'>
       <div class='modweebPrlx1'>
         <div class='modweebPrlx2'>
           <!-- ضع كود الإعلان هنا / Place ad code here -->
         </div>
       </div>
     </div>
   </b:if>

5. حفظ إعدادات القالب ومراجعة النتيجة:

   Warning!
   تأكد من اختبار الإعلان على نسخة الهاتف المحمول فقط، كما أن الإفراط في الإعلانات يمكن أن يضر بتجربة المستخدم.

الإعلان الذي يُدمج بسلاسة مع المحتوى يحقق أعلى نسبة تفاعل ويترك انطباعًا احترافيًا.

Modweeb Strategy

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

ملاحظات خاصة لمستخدمي قالب Plus UI: أماكن وضع الأكواد

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

1. إضافة كود CSS:

   Info!
   ابحث عن التعليق /*--[ Custom CSS Global (NO AMP) ]--*/ في القالب وضع كود CSS الخاص بتأثير Parallax مباشرة أسفله.

   /*--[ Custom CSS Global (NO AMP) ]--*/
   /* Modified Parallax Ads In Middle Post by modweeb */
   .modweebParallax {
     display: block;
     height: 600px;
     margin: 1rem auto;
     position: relative;
   }
   .modweebPrlx1 {
     clip-path: inset(0 0 0 0);
     position: absolute;
     overflow: hidden;
     margin: auto;
   }
   .modweebPrlx2 {
     align-items: flex-start;
     display: inline-flex;
     justify-content: center;
     position: fixed;
   }
   .modweebPrlx1, .modweebPrlx2 {
     bottom: 0;
     left: 0;
     right: 0;
     top: 10px;
   }
   .modweebPrlx1, .modweebParallax ins {
     height: 100%;
     width: 100%;
   }

2. إضافة كود JavaScript:

   Info!
   ابحث عن التعليق /*--[ Custom JS Global (placed above </body>) ]--*/ وضع كود السكربت الخاص بتحريك الإعلان أسفله مباشرة.

   /*--[ Custom JS Global (placed above </body>) ]--*/
   // Modified Parallax Ads In Middle Post by modweeb
   (function() {
     let modweebAds = document.querySelector('.modweebParallax');
     if (modweebAds) {
       let modweebPosts = document.querySelectorAll('.post-body br, .post-body p');
       let modweebMiddleIndex = parseInt(modweebPosts.length / 2);
   
       if (modweebPosts[modweebMiddleIndex].nodeName == 'P') {
         modweebPosts[modweebMiddleIndex].parentNode.insertBefore(modweebAds, modweebPosts[modweebMiddleIndex]);
       }
       else {
         modweebPosts[modweebMiddleIndex].parentNode.insertBefore(modweebAds, modweebPosts[modweebMiddleIndex].nextSibling);
       }
     }
   })();

3. إضافة كود HTML الإعلان داخل المنشور:

   Info!
   ابحث عن <data:post.body/> في القالب وضع كود HTML الخاص بالإعلان أسفله مباشرة، مع كود AdSense الخاص بك.

   <b:if cond='data:blog.isMobileRequest and data:view.isPost and !data:view.isPreview'>
     <!-- Modified Parallax Ads In Middle Post by modweeb -->
     <div class='modweebParallax'>
       <div class='modweebPrlx1'>
         <div class='modweebPrlx2'>
           <!-- ضع كود الإعلان هنا / Place ad code here -->
         </div>
       </div>
     </div>
   </b:if>

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

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

Modweeb Plus UI Tip

ملاحظة أخيرة ونصيحة حول إعلانات Parallax

إعلانات Parallax تعتبر آمنة بشكل عام، طالما تم تنفيذها بالشكل الصحيح ووفقًا لمعايير بلوجر وGoogle AdSense. الأمان هنا يشمل عدة جوانب:

1. عدم استخدام أي أكواد JavaScript ضارة أو غير موثوقة.
2. التأكد من أن وحدة الإعلان من مصدر موثوق مثل AdSense أو شبكات إعلانية موثوقة.
3. تجنب إضافة أكثر من إعلان Parallax واحد في كل منشور لتفادي مشاكل الأداء أو تجربة المستخدم.

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

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

Modweeb Advice

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

ذات صلة: