siwane
الصفحة الرئيسية
إضافات
افكار

عرض المقالات بصور مصغرة على مدونتك باستخدام التمرير التلقائي

كيفية اضافة قطعة ويجت للعرض صورًا مصغرة للمقالات من مدونة بلوجر بشكل ديناميكي داخل حاوية قابلة للتمرير أفقيًا. يتم جلب الصور باستخدام API بلوجر،
جمال الحزازي
عرض المقالات بصور مصغرة
عرض المقالات بصور مصغرة على مدونتك باستخدام التمرير التلقائي

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

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

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

انتقل الان للمعاينة

شرح الكود

الكود الذي سنشرحه يتكون من عدة أجزاء رئيسية، وسنقوم بتوضيح كل جزء في ما يلي:

1. هيكل HTML

في البداية، الكود يحتوي على هيكل HTML بسيط يحتوي على حاويتين: واحدة لعرض الصور المصغرة للمقالات، والأخرى لاحتواء المقالات نفسها. الكود يبدو كالتالي:


<div id="thumbnails-wrapper">
    <div id="thumbnails-container" class="thumbnails-scroll">
        <!-- سيتم إضافة المقالات ديناميكيًا -->
    </div>
</div>
  1. لوحة التحكم بلوجر
    • قم بتسجيل الدخول إلى لوحة التحكم بلوجر.
    • في لوحة التحكم بلوجر اختر التخطيط
    • ثم في صفحة التخطيط، ستجد خيار إضافة أداة (Add a Gadget) في أي مكان تود إضافة المقالات فيه (مثل الشريط الجانبي أو أسفل المقالات أو في أي مكان آخر).
    • عند الضغط على إضافة أداة، ستظهر لك نافذة تحتوي على العديد من الخيارات.
    • اختر HTML/JavaScript من القائمة.
  2. إضافة الكود HTML:
    • بعد اختيار HTML/JavaScript، ستظهر لك نافذة حيث يمكنك إدخال الكود الخاص بك.
    • في مربع العنوان (Title) يمكن تركه فارغًا أو إدخال عنوان مناسب (مثل "المقالات المصغرة").
    • في مربع المحتوى (Content)، قم بإضافة الكود التالي لعرض المقالات مع الصور المصغرة:
      انسخ الكود من صندوق الاكواد اعلاه.
  3. حفظ الأداة:
    • بعد إدخال الكود في مربع المحتوى، اضغط على حفظ (Save).
    • ستتمكن الآن من رؤية الأداة في التخطيط ضمن المكان الذي اخترته.

شرح:

  • <div id="thumbnails-wrapper">: هذا هو العنصر الذي يحتوي على كل العناصر الأخرى. وظيفته هي تحديد المساحة التي ستظهر فيها الصور المصغرة.
  • overflow: hidden: سيقوم هذا السطر بإخفاء أي محتوى يتجاوز حدود الحاوية (عندما يتم التمرير).
  • width: 100%: يعين عرض الحاوية ليكون كامل عرض العنصر الأب.
  • position: relative: يحدد موقع الحاوية بالنسبة لعناصر أخرى.

و: <div id="thumbnails-container" class="thumbnails-scroll"> هي الحاوية التي ستحتوي على صور المقالات. سيتم إضافة المقالات (الصور المصغرة) هنا ديناميكيًا باستخدام JavaScript.

2. CSS لتنسيق العرض

يتم تنسيق الصور المصغرة باستخدام CSS لضبط العرض، التمرير، والتمدد عند التمرير على الصورة. تم إضافة بعض التأثيرات مثل التكبير عند المرور بالفأرة:


#thumbnails-wrapper {
    overflow: hidden; /* إخفاء أي محتوى زائد */
    width: 100%; /* عرض الحاوية الثابتة */
    position: relative;
    margin-bottom: 20px;
}

.thumbnails-scroll {
    display: flex;
    transition: transform 0.5s linear; /* حركة سلسة */
}

.thumbnails-scroll img {
    width: 33.33%; /* كل صورة تأخذ 33% من عرض الحاوية */
    height: 100px;
    object-fit: cover; /* ملائمة الصورة داخل العنصر */
    margin-right: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.thumbnails-scroll img:hover {
    transform: scale(1.1);
}
  1. إضافة كود CSS:
    - من لوحة تحكم بلوجر اختر "المظهر".
    - انقر على السهم بجانب التخصيص واختر تعديل HTML.
    - في لوحة المفاتيح انقر على Ctrl + F ابحث عن ]]</b:skin> وضع كود CSS فوقه.
    - بمجرد لصق الأكواد، احفظ التغييرات بالنقر على هذا الرمز:

شرح:

  • #thumbnails-wrapper:
    • overflow: hidden: يخفي المحتوى الذي يتجاوز حجم الحاوية.
    • width: 100%: يجعل الحاوية تأخذ عرض كامل العنصر الأب.
    • position: relative: يسمح بتحديد موقع الحاوية بالنسبة للمحتوى داخلها.
  • .thumbnails-scroll:
    • display: flex: يقوم بعرض الصور في سطر أفقي بشكل متتالي.
    • transition: transform 0.5s linear: يجعل حركة التمرير تكون سلسة.
  • .thumbnails-scroll img:
    • width: 33.33%: تعيين عرض كل صورة ليكون ثلث عرض الحاوية.
    • height: 100px: تعيين ارتفاع الصور.
    • object-fit: cover: تأكد من أن الصورة تغطي الحاوية بالكامل دون تشويه.
    • margin-right: 10px: إضافة مسافة بين الصور.
    • border-radius: 8px: إضافة حواف مستديرة للصور.
    • cursor: pointer: يغير المؤشر إلى يد عند المرور فوق الصورة.
    • transition: transform 0.3s ease: يجعل التكبير عند التمرير على الصورة سلسًا.
  • .thumbnails-scroll img:hover:
    • transform: scale(1.1): عند التمرير على الصورة، يتم تكبيرها بنسبة 10%.

3. JavaScript لجلب المقالات

استخدمنا JavaScript لجلب المقالات من المدونة باستخدام API الخاص بـ Blogger. نضيف كل صورة مصغرة للمقال إلى الحاوية، ونقوم أيضًا بإضافة نسخة من الصور لتحقيق التمرير الدائري:


<script>
// دالة جلب المقالات والصور
async function fetchThumbnails(blogId, apiKey, enableAutoScroll) {
  const apiUrl = `https://www.googleapis.com/blogger/v3/blogs/${blogId}/posts?key=${apiKey}&fields=items(title,content,url)`;
  const thumbnailsContainer = document.getElementById('thumbnails-container');

  try {
    const response = await fetch(apiUrl);
    const data = await response.json();

    if (data.items && data.items.length > 0) {
      const articles = [];

      // استخراج المقالات وصور المقالات
      data.items.forEach(post => {
        const content = post.content;
        const regex = /<img[^>]*src="([^"]+)"/i; // استخراج الصورة الأولى
        const match = regex.exec(content);

        if (match) {
          const imgUrl = match[1];
          const articleElement = document.createElement('img');
          articleElement.src = imgUrl;
          articleElement.alt = post.title;

          // عند النقر على الصورة، افتح الرابط
          articleElement.addEventListener('click', () => {
            window.location.href = post.url;
          });

          articles.push(articleElement);
        }
      });

      // إضافة الصور إلى الحاوية
      articles.forEach(article => thumbnailsContainer.appendChild(article));

      // إضافة نسخ من الصور لتحقيق التمرير الدائري
      articles.forEach(article => thumbnailsContainer.appendChild(article.cloneNode(true)));

      // بدء التمرير التلقائي إذا كانت الخاصية مفعلة
      if (enableAutoScroll) {
        startAutoScroll(thumbnailsContainer);
      }
    } else {
      thumbnailsContainer.innerHTML = '<p>لا توجد مقالات لعرضها.</p>';
    }
  } catch (error) {
    console.error('حدث خطأ أثناء جلب البيانات:', error);
  }
}

// دالة التمرير التلقائي
function startAutoScroll(container) {
  const totalWidth = container.scrollWidth / 2; // عرض النسخة المضافة
  let scrollAmount = 0;
  let scrollDirection = 1; // اتجاه التمرير (1 للتمرير إلى اليمين، -1 للتمرير إلى اليسار)
  const scrollStep = 1; // مقدار التمرير في كل خطوة

  function autoScroll() {
    scrollAmount += scrollStep * scrollDirection;

    // تغيير الاتجاه عند الوصول إلى نهاية النسخة
    if (scrollAmount >= totalWidth || scrollAmount <= 0) {
      scrollDirection *= -1; // عكس الاتجاه
    }

    container.style.transform = `translateX(${scrollAmount}px)`; // تحريك الحاوية وفقًا للاتجاه
  }

  setInterval(autoScroll, 10); // التمرير كل 10 مللي ثانية
}

// إعدادات سكربت التمرير التلقائي
const config = {
  blogId: "1234567890", // معرّف المدونة
  apiKey: "YOUR_API_KEY", // مفتاح API  
  enableFeature: true, // تفعيل الخاصية المطلوبة
  enableAutoScroll: true, // تمكين التمرير التلقائي للصور
};

// إذا كانت الخاصية مفعلة، قم بتشغيل جلب المقالات
if (config.enableFeature) {
  fetchThumbnails(config.blogId, config.apiKey, config.enableAutoScroll); // تمرير إعداد التمرير التلقائي
}
</script>
  1. إضافة كود JavaScript:
    - ابقَ في نفس صفحة محرر القالب.
    - في لوحة المفاتيح انقر على Ctrl + F ابحث عن </body> وضع كود JavaScript فوقه:
    - بمجرد لصق الأكواد، احفظ التغييرات بالنقر على هذا الرمز:

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

مزايا عرض المقالات بهذه الطريقة

استخدام هذه الطريقة في عرض المقالات له العديد من المزايا:

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

شرح:

3. JavaScript لجلب المقالات والصور:

async function fetchThumbnails(blogId, apiKey, enableAutoScroll) { const apiUrl = `https://www.googleapis.com/blogger/v3/blogs/${blogId}/posts?key=${apiKey}&fields=items(title,content,url)`; const thumbnailsContainer = document.getElementById('thumbnails-container'); try { const response = await fetch(apiUrl); const data = await response.json(); if (data.items && data.items.length > 0) { const articles = []; // استخراج المقالات وصور المقالات data.items.forEach(post => { const content = post.content; const regex = /<img[^>]*src="([^"]+)"/i; // استخراج الصورة الأولى const match = regex.exec(content); if (match) { const imgUrl = match[1]; const articleElement = document.createElement('img'); articleElement.src = imgUrl; articleElement.alt = post.title; // عند النقر على الصورة، افتح الرابط articleElement.addEventListener('click', () => { window.location.href = post.url; }); articles.push(articleElement); } }); // إضافة الصور إلى الحاوية articles.forEach(article => thumbnailsContainer.appendChild(article)); // إضافة نسخ من الصور لتحقيق التمرير الدائري articles.forEach(article => thumbnailsContainer.appendChild(article.cloneNode(true))); // بدء التمرير التلقائي إذا كانت الخاصية مفعلة if (enableAutoScroll) { startAutoScroll(thumbnailsContainer); } } else { thumbnailsContainer.innerHTML = '<p>لا توجد مقالات لعرضها.</p>'; } } catch (error) { console.error('حدث خطأ أثناء جلب البيانات:', error); } }

4. دالة التمرير التلقائي:

function startAutoScroll(container) { const totalWidth = container.scrollWidth / 2; let scrollAmount = 0; let scrollDirection = 1; const scrollStep = 1; function autoScroll() { scrollAmount += scrollStep * scrollDirection; if (scrollAmount >= totalWidth || scrollAmount <= 0) { scrollDirection *= -1; } container.style.transform = `translateX(${scrollAmount}px)`; } setInterval(autoScroll, 10); }

5. إعدادات السكربت:

const config = { blogId: "1234567890", apiKey: "YOUR_API_KEY", enableFeature: true, enableAutoScroll: true, }; if (config.enableFeature) { fetchThumbnails(config.blogId, config.apiKey, config.enableAutoScroll); }

شرح: يحتوي على إعدادات السكربت مثل معرف المدونة (blogId) ومفتاح API.

خطوات الحصول على blogId و API Key

  1. الحصول على blogId:

    للحصول على blogId لمدونتك على بلوجر، اذهب إلى لوحة تحكم بلوجر الخاصة بك. اختر المدونة التي تريد استخدامها، ثم في شريط العناوين في المتصفح، ستجد الرابط الذي يحتوي على blogId مثل: https://www.blogger.com/blogger.g?blogID=1234567890 حيث 1234567890 هو blogId الخاص بمدونتك.

  2. الحصول على API Key:

    للحصول على API Key لاستخدام API بلوجر، اتبع الخطوات التالية:

    1. انتقل إلى Google Cloud Console وقم بتسجيل الدخول.
    2. في القائمة الجانبية، اختر "API & Services" ثم "Credentials".
    3. اضغط على "Create Credentials" ثم اختر "API Key".
    4. سيتم عرض API Key جديد. قم بنسخ هذا المفتاح لاستخدامه في الكود.

إعدادات API في الكود:

بعد حصولك على blogId و API Key، يمكنك إضافتهما إلى الكود كما موضح لك اعلاه.

  1. التأكد من تنفيذ التعديلات:
    • بعد حفظ التعديلات، قم بزيارة مدونتك وتحقق من ظهور المقالات بصور مصغرة مع التمرير التلقائي.
    • إذا لم تظهر الصور المصغرة، تأكد من أنك قد أدخلت API Key و Blog ID بشكل صحيح في الكود.

الخلاصة:

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

تنبيهات

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

اقتباس

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

كيف يمكنني جلب المقالات من مدونتي؟

يتم جلب المقالات باستخدام API الخاص بـ Blogger، حيث يتطلب الأمر إدخال معرّف المدونة ومفتاح API الخاص بك.

هل يمكنني تخصيص الكود ليتناسب مع موقعي؟

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

ما هو التمرير التلقائي؟

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

هل هذا الكود يدعم التمرير التلقائي على الهاتف المحمول؟

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

إذا كنت ترغب في إضافة الكود داخل النص HTML في بلوجر باستخدام أداة HTML/JavaScript في التخطيط، يمكنك اتباع هذه الخطوات:

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

مشاركات ذات صلة

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

المصادر:
siwaneSiwaneXYZ©
https://www.siwane.xyz/2024/12/thumbnails-scroll.html

عن المؤلف

جمال الحزازي
مرحبا انا منشئ محتوى رقمي (صِوانˣʸᶻ) مهتم بالتصميم ui/ux، مدون في مجال التقنية و العلوم تعرف على المزيد.
اشتري لي كوب قهوة ☕

إرسال تعليق

اكتب تعليقك 🤗، لكن تيقن ان كلماتك تعبر عن من انت.
"لا يقال قف لاراك بل تكلم لأعرفك"

الانضمام إلى المحادثة

الانضمام إلى المحادثة