تركيب أضافة عرض المواضيع بشكل شبكة

 اداة عرض مواضيع مدونة بلوجرالرئيسية مع ميزة زر شاهد المزيد 

فائدة تركيب إضافة عرض المواضيع بشكل شبكة (Grid Layout)

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

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

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

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

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

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

شرح تركيب الأداة بالفيديو

نذهب الى اكواد القالب و نبحث عن  </head>  و نلصق الاكواد التالية اعلاها

<style>   

.tit7 a{color:var(--headC)}

.tit7 a:hover{color:#0070ff}

.drK .tit7 a:hover{color:var(--darkU)}

.drK .tit7 a{color:var(--darkT)}

.drK #CustomWidgetSection{background:var(--darkBa)}

.drK .posts7{background:rgba(0,0,0,.15)}

#CustomWidgetSection{max-width:100%;padding:16px 20px 30px;background:var(--contentB);box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:10px}

.posts7{border-radius: 6px;position:relative;width:100%;height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:10px;text-align:right;direction:rtl;box-sizing:border-box;padding:10px}

.post7{width:auto;height:auto;border-radius:5px;padding:10px;transition:all 0.3s ease;box-shadow:0 5px 35px rgba(0,0,0,.07);overflow:hidden;}

.thumb7{position:relative;display:block;width:100%;padding-top:56.25%;/* نسبة 16:9 */

  border-radius:5px;overflow:hidden}

.thumb7 img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:0.5s}

.thumb7:hover img{filter:brightness(50%);transform:scale(1.05)}

.thumb7 .icon-hover{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.5);padding:10px;border-radius:50%;opacity:0;transition:all 0.3s ease;pointer-events:none}

.thumb7 .icon-hover i{color:white;font-size:32px}

.thumb7:hover .icon-hover{opacity:1;transform:translate(-50%,-50%) scale(1)}

.tit7{line-height:22px;margin:8px 2px;font-size:16px;text-align: center;font-family:inherit}

.items7{border:solid 1px #eee;border-right:transparent;border-left:transparent;line-height:0;padding:8px 0;margin:5px 0;font-size:12px;color:#888}

.items7 svg{width:12px;display:inline-block;line-height:0;margin:0 1px 0 5px;color:#888;vertical-align:middle}

.loader7{position:absolute;width:50px;height:50px;margin:10px auto;border:solid 5px #0000aa;border-right-color:transparent;border-top-color:transparent;border-left-color:transparent;border-radius:100%;animation:spin 1s linear infinite}

.conloader{justify-content:center;align-items:center;display:flex;width:100%;height:100px}

.readm7{display:inline-block;padding:10px 40px;background:#007eff;color:white!important;text-decoration:none!important;border-radius:25px;font-weight:bold;margin:15px 0;transition:all 0.3s ease;box-shadow:0 3px 10px rgba(0,0,0,0.1);border:none;cursor:pointer;font-size:14px}

.cat7{position:absolute;top:8px;right:8px;background:rgba(255,255,255,0.9);color:#333;font-size:12px;padding:2px 6px;border-radius:3px;z-index:2}

@media(max-width:650px){.posts7{grid-template-columns:1fr 1fr}.thumb7 .icon-hover i{font-size: 22px;}}

@media(max-width:400px){.posts7{grid-template-columns:1fr}.thumb7{padding-top:60%;/* نسبة ارتفاع أكبر قليلا&#1611;*/}}

#CustomWidgetSection {width: 1280px;margin: 0 auto;}

  </style>

ثم نبحث عن </body>  و نلصق الكود التالي أعلاه ستجده في أسفل أكواد القالب

<script type='text/javascript'>

//<![CDATA[

function generator7(label, index, count) {

  const cacheKey = `posts7_cache_${label}`;

  const cacheTimeKey = `${cacheKey}_time`;

  const cacheTTL = 1000 * 60 * 30; // 30 دقيقة

  const now = Date.now();

  const cachedData = localStorage.getItem(cacheKey);

  const cachedTime = localStorage.getItem(cacheTimeKey);

  if (cachedData && cachedTime && (now - cachedTime < cacheTTL)) {

    const data = JSON.parse(cachedData);

    renderPosts7(data, label, index, count);

  } else {

    const feedUrl = label === "recent" 

      ? "/feeds/posts/default?alt=json-in-script&max-results=" + count + "&orderby=published"

      : "/feeds/posts/default?alt=json-in-script&max-results=100&orderby=updated";

    fetch(feedUrl)

      .then(response => response.text())

      .then(text => {

        const json = JSON.parse(text.replace(/^.*?\(/, '').replace(/\);?$/, ''));

        const posts = json.feed.entry || [];

        const dataToStore = { posts: posts };

        localStorage.setItem(cacheKey, JSON.stringify(dataToStore));

        localStorage.setItem(cacheTimeKey, now.toString());

        renderPosts7(dataToStore, label, index, count);

      });

  }

}

function renderPosts7(dataObj, label, index, count) {

  const allPosts = dataObj.posts || [];

  let posts = allPosts;

  if (label === "random") {

    posts = allPosts.sort(() => 0.5 - Math.random()).slice(0, count);

  } else {

    posts = allPosts.slice(0, count);

  }

  const postsContainer = document.getElementsByClassName("posts7")[index];

  const mainContainer = document.getElementsByClassName("hal55")[index];

  const loader = mainContainer.querySelector(".conloader");

  if (loader) loader.remove();

  postsContainer.innerHTML = "";

  posts.forEach(entry => {

    const title = entry.title.$t;

    const shortTitle = title.length > 200 ? title.substring(0, 200) + "..." : title;

    const link = entry.link.find(l => l.rel === "alternate").href;

    const thumb = entry.media$thumbnail ? entry.media$thumbnail.url.replace("s72-c","s300") : "https://via.placeholder.com/300?text=No+Image";

    const category = entry.category ? entry.category[0].term : "";

    const postDiv = document.createElement("div");

    postDiv.className = "post7";

    postDiv.innerHTML = `

<a class="thumb7" href="${link}" title="${title}">

  ${category ? `<div class="cat7">${category}</div>` : ''}

  <img src="${thumb}" alt="${title}" loading="lazy" style="width:100%; border-radius:5px;" />

  <div class="icon-hover">

    <i class="bi bi-file-earmark-text"></i>

  </div>

</a>

<h3 class="tit7" style="margin-top: 14px;">

  <a href="${link}" title="${title}" style="text-decoration:none;">${shortTitle}</a>

</h3>

    `;

    postsContainer.appendChild(postDiv);

  });

  const moreLink = label === "recent" ? "/search" : "/search?max-results=500";

  const readMore = `<div style="text-align:center"><a class="readm7" href="${moreLink}">عرض المزيد</a></div>`;

  mainContainer.insertAdjacentHTML('beforeend', readMore);

}

window.addEventListener("load", function() {

  const containers = document.getElementsByClassName("posts7");

  for (let i = 0; i < containers.length; i++) {

    const container = containers[i];

    const label = container.getAttribute("data-label") || "random";

    const count = parseInt(container.getAttribute("data-count")) || 8;

    const loader = document.createElement("div");

    loader.className = "conloader";

    loader.innerHTML = '<div class="loader7"></div>';

    document.getElementsByClassName("hal55")[i].appendChild(loader);

    generator7(label, i, count);

  }

});

//]]>

</script>

نذهب الى التنسيق و نضيف اداة في المكان اللذي نريده انا افضل فوق الفوتر اذا لم تجد اداة فارغة يجب اضافة مكان للاداة بداخل اكواد القالب شاهد الفيديو لمعرفة الطريقة

اذا لم تجد يمكن اضافة هذا الكود فوق الفوتر بالقالب  الخاص بك

  <b:section id='CustomWidgetSection' class='custom-widget-section' showaddelement='yes'/>

و بعد تركيب الأداة ستظهر اداة جديدة بالتنسيق

ضع الكود التالي بداخلها

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

  <div class='hal55'>

    <div class='posts7' data-count='8' data-label='random'></div>

  </div>

</b:if>

تنبيه

يمكن التبديل بين جلب مواضيع عشوائية random و جلب أخر الموضوعات recent عن طريق التبديل بينهما 

ملاحظة مهمة

الاداة بها ايقونة متحركة الايقونة من مكتبة bootstrap اذا لديك هذه المكتبة بالقالب لاداعي لاضافة الكود التالي

اما اذا لا يوجد بالقالب هذه المكتبة يمكنك اضافتها اسفل <head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet"/>

او يمكنك استبدال الايقونة لاي مكتبة اخرى 

و في الختام تقبلوا تحياتي

تحرير المقال