كيفية إضافة بانر “فري فلسطين” المتحرك إلى موقعك (لارافيل، بلوجر، ووردبريس)
مقدمة
في هذا الدليل الشامل، سأوضح لك كيفية إضافة بانر “Free Palestine” المتحرك والمبهر إلى موقعك بغض النظر عن نظام إدارة المحتوى الذي تستخدمه. هذا البانر المصمم بإحتراف سيكون:
- متحركاً بتأثيرات جذابة
- متجاوباً مع جميع أحجام الشاشات
- سهل الإضافة دون الحاجة لمهارات برمجة متقدمة
الخطوة 1: فهم الكود وكيف يعمل
1. مكونات الكود:
- HTML: ينشئ البانر كرابط (
<a>) مع نص متحرك. - CSS: يضيف التصميم والتأثيرات (مثل الألوان، التدوير، والحركة).
- التفاعل: عند النقر، يفتح رابط فيديو عن فلسطين (يمكنك تغييره).
2. خصائص البانر:
- ثابت في أعلى الصفحة (Fixed Position).
- مائل بزاوية -45 درجة لجذب الانتباه.
- يتغير النص كل 3 ثواني بين:
FREE PALESTINEIt's Time You Knew — Click Here
- متجاوب مع الجوال (يتكيف مع الشاشات الصغيرة).
<a class="palestine" href="https://www.youtube.com/watch?v=f0oy-NicIgE" tabindex="1" target="_blank" title="FREE PALESTINE"> <div class="palestine-flag"> <div class="palestine-flag-line"></div> <div class="palestine-text"> <span>FREE PALESTINE </span> <span>It’s Time You Knew — Click Here</span> </div> </div> </a> <style> .palestine { position: fixed; top: 94px; left: -69px; width: 398px; height: 30px; z-index: 9999999999999; display: flex; align-items: center; justify-content: center; transform: rotate(-45deg); } .palestine .palestine-flag { position: absolute; width: 100%; height: 30px; text-decoration: none; overflow: hidden; display: flex; align-items: center; justify-content: center; } .palestine .palestine-flag::before { content: ""; position: absolute; left: 0; top: 0; z-index: 9999999999999; height: 100%; box-sizing: border-box; width: auto; transform-origin: bottom left; border: 0 solid transparent; border-top-width: 15px; border-bottom-width: 15px; border-left: 53px solid #d2212b; } .palestine .palestine-flag-line { width: 100%; height: 100%; background-color: white; } .palestine .palestine-flag-line::before { content: ""; width: 100%; display: block; position: absolute; top: 0; height: 10px; background-color: black; } .palestine .palestine-flag-line::after { content: ""; width: 100%; display: block; position: absolute; bottom: 0; height: 10px; background-color: #149954; } .palestine .palestine-flag .palestine-text { position: absolute; line-height: 11px; font-size: 11px; font-weight: 900; letter-spacing: 1.2px; padding: 0; margin: 0; color: #000000; overflow: hidden; width: 100%; height: 13px; } @media screen and (max-device-width: 720px) { .palestine { top: 66px; left: -55px; width: 303px; } .palestine .palestine-flag::before { border-left: 53px solid #e4312b; } .palestine .palestine-flag .palestine-text { font-size: 9px; } } .palestine-text span { position: absolute; left: 0; width: 100%; text-align: center; animation: fadeText 6s infinite; opacity: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif; } .palestine-text span:nth-child(1) { animation-delay: 0s; } .palestine-text span:nth-child(2) { animation-delay: 3s; } @keyframes fadeText { 0% { opacity: 0; transform: translateY(100%); } 10% { opacity: 1; transform: translateY(0); } 40% { opacity: 1; transform: translateY(0); } 50% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 0; transform: translateY(-100%); } } </style>الخطوة 2: الإضافة إلى ووردبريس
الطريقة 1: عبر المظهر (Theme)
- انتقل إلى “المظهر” > “محرر المظهر”
- اختر ملف
header.php - الصق الكود كاملاً بعد وسم
<body> - احفظ التغييرات
الطريقة 2: باستخدام
- تثبيت”Header and Footer Scripts”
- انتقل إلى “الإعدادات” > “Header and Footer Scripts”
- الصق الكود في قسم “
body“ - احفظ التغييرات
الخطوة 3: الإضافة إلى بلوجر
- انتقل إلى “لوحة التحكم” > “المظهر” > “تحرير HTML”
- ابحث عن وسم
<body> - الصق الكود كاملاً بعد هذا الوسم
- احفظ التغييرات
الخطوة 4: الإضافة إلى لارافيل
للعرض العام (Layout):
- افتح ملف
resources/views/layouts/app.blade.php - الصق الكود بع
<body> - احفظ الملف
⚠️ الجزء 3: حل المشاكل الشائعة
| المشكلة | الحل |
|---|---|
| البانر لا يظهر | تأكد من وضع الكود في المكان الصحيح (قبل </body> أو </head>). |
| التصميم مشوه | اضبط top و left في CSS ليناسب موقعك. |
| لا يعمل على الجوال | الكود يدعم الجوال، لكن قد تحتاج تعديل @media screen. |
| الرابط لا يعمل | تأكد من أن الرابط صحيح وغير محظور. |
| يتعارض مع عناصر أخرى | غيّر z-index: 9999999999999; لقيمة أقل إن كان هناك تداخل. |
🎨 تخصيص البانر (اختياري)
- تغيير الرابط: عدل
href="..."ليربط بصفحة تريدها. - تغيير الألوان: عدل ألوان العلم في
- border-left: 53px solid #e4312b;
- /* الأحمر */ background-color: black
- ; /* الأسود */ background-color: #149954
- إضافة تأثيرات أكثر: يمكنك إضافة
hoverأوanimationجديدة.
🎯 الخاتمة
الآن أصبح لديك بانر احترافي يدعم فلسطين على موقعك، سواء كان ووردبريس، بلوجر، لارافيل، أو أي منصة أخرى. الكود خفيف ولا يؤثر على سرعة الموقع، كما أنه متوافق مع السيو.
💡 نصيحة: شارك هذا الكود مع أصدقائك لنشر القضية على نطاق أوسع!
🚀 هل تحتاج مساعدة إضافية؟ اترك تعليقاً وسأجيبك!