اضافة شريط اخر الاخبار في مدونة بلوجر

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

(1) الهيكل العام

• HTML: يحتوي على عنصر <div> رئيسي (#cnmunewasbar) يمثل الشريط المتحرك، وعنصر <span> لعنوان الشريط (آخر الأخبار)، وعنصر <div> آخر (#newsContainer) لعرض الأخبار.
• CSS: يتم استخدامه لتنسيق الشريط المتحرك وعناصره.
• JavaScript: يتم استخدامه لجلب بيانات المنشورات من المدونة وعرضها في الشريط المتحرك.

(2) أنماط CSS

#cnmunewasbar

• الخلفية والظل: خلفية بيضاء (#fff) مع ظل خفيف (box-shadow).
• الأبعاد: ارتفاع ثابت (30px) وعرض كامل (100%).
• التخطيط: استخدام flex لمحاذاة العناصر داخليًا.

.cnmunbtile

• الخلفية واللون: خلفية زرقاء (#008EFA) ونص أبيض.
• الخط: خط عريض (bold) بحجم 14px.
• الموقع: يتم وضعه على الجانب الأيمن من الشريط.

.cnmu-newsb-srp

• الخط: خط بحجم 14px.
• التمرير: يتم استخدام animation لإنشاء تأثير التمرير (scrollNews).
• الموقع: يتم وضعه على الجانب الأيمن من الشريط بمسافة 110px من الحافة.

@keyframes scrollNews

• الحركة: يتحرك النص من اليمين إلى اليسار باستخدام transform: translateX.

.cnmu-newsb-srp a

• الروابط: لون أزرق (#008EFA) بدون تزيين (text-decoration: none).
• التفاعل: يتغير اللون إلى أحمر (#CD0317) عند التمرير فوق الرابط.

.cnmubulletbimg

• الصور: يتم محاذاة الصور عموديًا مع النص (vertical-align: middle).

(3) JavaScript

المتغيرات العامة

• cnmuWidth: عرض الشريط المتحرك.
• cnmuDirection: اتجاه التمرير (right لليمين).
• cnmutargetlink: إذا كان yes، ستفتح الروابط في نافذة جديدة.
• cnmunumPosts: عدد المنشورات التي سيتم عرضها.
• cnmuBulletchar: الرمز المستخدم كعلامة قبل كل رابط (مثل >>>).
• cnmuimagebullet: إذا كان yes، سيتم استخدام صورة كعلامة بدلاً من النص.
• cnmuimgurl: رابط الصورة المستخدمة كعلامة.
• cnmufontsize: حجم الخط للنصوص.
• cnmubgcolor: لون خلفية الشريط.
• cnmulinkcolor: لون الروابط.
• cnmulinkhovercolor: لون الروابط عند التمرير فوقها.

دالة cnmuAdvRecentPostsScrollerv3

• الغرض: جلب بيانات المنشورات من المدونة وعرضها في الشريط المتحرك.
• الخطوات:
  1. جلب البيانات: يتم جلب بيانات المنشورات من رابط الـ JSON

     
     (https://www.aweywashk.xyz/feeds/posts/default?alt=json-in-script&callback=cnmuAdvRecentPostsScrollerv3&max-results=50)
         

  2. معالجة البيانات: يتم استخراج عناوين المنشورات وروابطها.
  3. إنشاء HTML: يتم إنشاء عناصر HTML لعرض المنشورات مع العلامات (نصية أو صورية).
  4. عرض البيانات: يتم إضافة HTML إلى عنصر #newsContainer.

تحميل البيانات

• يتم إنشاء عنصر <script> ديناميكيًا لتحميل بيانات المنشورات من المدونة.

أهمية هذا الكود في المدونة

• تحسين تجربة المستخدم (UX): يعرض آخر المنشورات بشكل ديناميكي، مما يجذب انتباه الزوار ويجعل المدونة أكثر تفاعلية.
• عرض المحتوى الجديد: يسمح للزوار برؤية أحدث المنشورات بسرعة دون الحاجة إلى التصفح يدويًا.
• توفير المساحة: يعرض عناوين المنشورات في مساحة صغيرة، مما يجعله مثاليًا للواجهات المحدودة المساحة.
• تحسين التفاعل: الروابط القابلة للنقر تجعل من السهل على الزوار الوصول إلى المنشورات مباشرة.
• تخصيص سهل: يمكن تعديل الإعدادات بسهولة لتغيير المظهر والسلوك (مثل عدد المنشورات، الألوان، السرعة، إلخ).

كيفية استخدام هذا الكود في المدونة

1. إضافة الكود إلى القالب: انسخ الكود وألصقه في قالب المدونة (مثل HTML/JavaScript widget).
2. تعديل الإعدادات: قم بتعديل المتغيرات العامة لتخصيص الشريط حسب احتياجاتك.
3. اختبار الشريط: تأكد من أن الشريط يعرض البيانات بشكل صحيح وأن الروابط تعمل.

مثال على استخدام الشريط

<div id="cnmunewasbar">
  <span class="cnmunbtile">آخر الأخبار</span>
  <div class="cnmu-newsb-srp" id="newsContainer"></div>
</div>

الخلاصة

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

طريقة اضافة شريط اخر الاخبار في مدونة بلوجر

افتح لوحة تحكم بلوجر

اختر تخطيط 

اختر اضافة اداة جديدة 

ثم اداة HTML / javascrript

و اضف الكود التالي :

<style>
    /* أنماط الشريط */
    #cnmunewasbar {
      background: #fff;
      box-shadow: 0 0 1px #777;
      height: 30px;
      width: 100%;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
    }

 .cnmunbtile {
    background: #008EFA;
    color: #fff;
    font: bold 14px / 30px serif !important;
    text-align: center;
    width: 110px;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 2;
}

    .cnmu-newsb-srp {
      font: 14px/28px Tahoma !important;
      white-space: nowrap !important;
      position: absolute !important;
      right: 110px !important;
      animation: scrollNews 50s linear infinite !important;
    }

    @keyframes scrollNews {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
    }

    .cnmu-newsb-srp a {
      color: #008EFA !important;
      text-decoration: none !important;
      margin: 0 10px !important;
    }

    .cnmu-newsb-srp a:hover {
      color: #CD0317 !important;
    }

  .cnmubulletbimg {
    vertical-align: middle !important;
    border: none !important;
    margin-right: 5px !important;
    display: inline-block;
}
  </style>

  <div id="cnmunewasbar">
    <span class="cnmunbtile">آخر الأخبار</span>
    <div class="cnmu-newsb-srp" id="newsContainer"></div>
  </div>

  <script>
    // إعدادات الشريط
    const cnmuWidth = 100;
    const cnmuDirection = "right";
    const cnmutargetlink = "yes";
    const cnmunumPosts = 10;
    const cnmuBulletchar = ">>>";
    const cnmuimagebullet = "yes";
    const cnmuimgurl = "https://lh6.googleusercontent.com/-YHYwSfOe3XY/VEIv0ZeiOZI/AAAAAAAAE40/3ZHADkTW5Io/s35/jaded.gif";
    const cnmufontsize = 16;
    const cnmubgcolor = "transparent";
    const cnmulinkcolor = "008EFA";
    const cnmulinkhovercolor = "CD0317";

    // دالة لتحميل وعرض الأخبار
    function cnmuAdvRecentPostsScrollerv3(data) {
      console.log("Data received:", data); // تصحيح البيانات
      const newsContainer = document.getElementById("newsContainer");
      let newsHTML = "";

      // استخراج البيانات وعرضها
      data.feed.entry.slice(0, cnmunumPosts).forEach((entry) => {
        const title = entry.title.$t;
        const link = entry.link.find((link) => link.rel === "alternate").href;

        let bullet = cnmuBulletchar;
        if (cnmuimagebullet === "yes") {
          bullet = `<img class="cnmubulletbimg" src="${cnmuimgurl}" alt="bullet" />`;
        }

        const target = cnmutargetlink === "yes" ? 'target="_blank"' : "";
        newsHTML += `${bullet} <a href="${link}" ${target}>${title}</a> `;
      });

      // إضافة الأخبار إلى الشريط
      newsContainer.innerHTML = newsHTML;
    }

    // تحميل البيانات من الـ JSON
    const script = document.createElement("script");
    script.src = "https://www.aweywashk.xyz/feeds/posts/default?alt=json-in-script&callback=cnmuAdvRecentPostsScrollerv3&max-results=50";
    document.head.appendChild(script);
  </script>
    

لاتنسي ان تقوم بتغيير رابط الموقع برابط الموقع الخاص بك

   // تحميل البيانات من الـ JSON
    const script = document.createElement("script");
    script.src = "https://www.aweywashk.xyz/feeds/posts/default?alt=json-in-script&callback=cnmuAdvRecentPostsScrollerv3&max-results=50";
    document.head.appendChild(script);

اضغط حفظ وشاهد شريط الاخبار