إضافة أداة عرض مقالات بلوجر في الرئيسية بشكل احترافي

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

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

معاينة الأداة

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

معاينة الأداة

مميزات الأداة

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

• تصميم مرن ومتجاوب مع كل الشاشات
• تظهر التصنيف على الصور بشكل أنيق وجذّاب
• تأثير تحميل سلس للصور (Lazy Load)
• لا تسبب تعارض مع إضافات بلوجر الأخرى
• خفيفة جدًا ولا تؤثر على سرعة الموقع

طريقة التركيب

تركيب الأداة بسيط جدًا ولا يحتاج لأي خبرة برمجية. كل ما عليك فعله هو نسخ الكود الخاص بالأداة ولصقها في الأماكن المخصصة كما نوضح لك.

الخطوة الأولى

• ادخل إلى لوحة التحكم في بلوجر
• الذهاب إلى قسم المظهر
• بجانب تخصيص اختر تعديل html
• ابحث عن وسم ]]></b:skin>
• الصق الكود التالي أعلاه مباشرة

css Code

@font-face {
  font-family: 'slidefont';
  src: url("https://cdn.jsdelivr.net/gh/hamianemohssine/7amian@master/font-icons/Five-News-Ticker.woff2");
}

.eltiqni-container,
.eltiqni-slider,
.eltiqni-item {
  height: auto;
  width: 100%;
}

.eltiqni-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
  padding: 15px 10px;
  box-sizing: border-box;
}

.eltiqni-container * {
  box-sizing: border-box;
  transition: 1s;
}

.eltiqni-info,
.eltiqni-photo {
  transition: 0.5s;
  display: flex;
  height: 100%;
}

.eltiqni-slider {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  text-align: right;
  direction: rtl;
  max-width: 1100px;
}

.eltiqni-item {
  position: relative;
  padding-bottom: 68%;
  background-color: #f9f9f9;
  overflow: hidden;
  border: 2px dotted #001f3f; /* الحواف المنقطة */
  border-radius: 8px;
}

.eltiqni-item:first-child {
  grid-column: 2/4;
  grid-row: 1/3;
}

.eltiqni-item > a {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.eltiqni-photo {
  width: 100%;
  background-size: cover;
  background-repeat: round;
  opacity: 0;
}

.eltiqni-photo.eltiqni-visible {
  opacity: 1;
}

.eltiqni-label {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #00c;
  color: #fff;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 12px;
  box-shadow: 0 1px 2px #000;
}

.eltiqni-info {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(0deg, #000, transparent, transparent);
  flex-direction: column;
  justify-content: flex-end;
  padding: 5px 10px;
  gap: 5px;
}

.eltiqni-item:hover .eltiqni-info {
  padding-bottom: 15px;
}

.eltiqni-date {
  color: #f7f7f7;
  text-shadow: 1px 1px 3px #000;
  font-size: 12px;
  display: flex;
}

.eltiqni-date:before {
  content: "\f017";
  margin-left: 4px;
  font-family: "slidefont";
}

.eltiqni-title {
  display: -webkit-box;
  color: #fff;
  text-shadow: 1px 1px 5px #000;
  margin: 0 0 5px;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3rem;
  text-overflow: ellipsis;
}

.eltiqni-item:first-child .eltiqni-title {
  font-size: 1.3rem;
  line-height: 2rem;
  max-height: 4rem;
}

.eltiqni-loading:after {
  content: "";
  position: absolute;
  top: calc(50% - 20px);
  right: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border: 4px solid #aaa;
  border-bottom-color: transparent;
  border-right-color: transparent;
  animation: 0.5s linear infinite spinLoader;
  border-radius: 100%;
}

@keyframes spinLoader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

/* استجابة الشاشات */
@media (max-width: 900px) {
  .eltiqni-slider {
    grid-template-columns: repeat(3, 1fr);
  }

  .eltiqni-item:first-child {
    grid-column: 1/3;
    grid-row: 1/3;
  }
}

@media (max-width: 600px) {
  .eltiqni-slider {
    grid-template-columns: repeat(2, 1fr);
  }

  .eltiqni-item:first-child {
    grid-column: 1/3;
    grid-row: 1/3;
  }

  .eltiqni-date,
  .eltiqni-label {
    font-size: 12px;
  }

  .eltiqni-title {
    font-size: 0.8rem;
    line-height: 1.3rem;
    max-height: 2.6rem;
  }
}

@media (max-width: 350px) {
  .eltiqni-slider {
    grid-template-columns: repeat(1, 1fr);
  }

  .eltiqni-item:first-child {
    grid-column: unset;
    grid-row: unset;
  }

  .eltiqni-item:first-child .eltiqni-title {
    font-size: 0.8rem;
    line-height: 1.3rem;
    max-height: 2.6rem;
  }
}
  

الخطوة الثانية

• من داخل محرر html للقالب
• ابحث عن الوسم </body>
• أضف الكود التالي أعلاه واضغط حفظ

js Code

  <script type='text/javascript'>
//<![CDATA[
document.querySelectorAll(".eltiqni-slider").forEach(e => {
  var label = e.dataset.label,
      count = e.dataset.results,
      loadingDiv = "<div class='eltiqni-item eltiqni-loading'></div>";
  e.innerHTML = loadingDiv.repeat(count);

  var feedUrl = "/feeds/posts/summary?alt=json&start-index=1&max-results=" + count;

  if (label !== "recent") {
    feedUrl = feedUrl.replace("summary?", "summary/-/" + label + "?");
  }

  fetch(feedUrl).then(res => res.json()).then(data => {
    var posts = data.feed.entry,
        output = "";

    for (let i = 0; i < posts.length; i++) {
      var post = posts[i],
          title = post.title.$t,
          img = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
          link = "#",
          category = "";

      for (let l of post.link) {
        if (l.rel === "alternate") {
          link = l.href;
          break;
        }
      }

      if (post.media$thumbnail) img = post.media$thumbnail.url;
      if (post.category && post.category.length > 0) category = post.category[0].term;

      function randomColor() {
        let c = "#";
        for (let i = 0; i < 3; i++) c += ("0" + Math.floor(400 * Math.random() / 2).toString(16)).slice(-2);
        return c;
      }

      output += `
      <div class='eltiqni-item'>
        <a href='${link}' title='${title}'>
          <span class='eltiqni-photo' data-image='${img}'>
            <span class='eltiqni-label' style='background-color:${randomColor()}'>${category}</span>
          </span>
          <div class='eltiqni-info'>
            <h3 class='eltiqni-title'>${title}</h3>
          </div>
        </a>
      </div>`;
    }

    e.innerHTML = output;

    e.querySelectorAll(".eltiqni-photo").forEach(p => {
      var img = p.dataset.image,
          w = Math.round(p.getBoundingClientRect().width) + 50,
          src = img.replace(/...(?<=\/[swh]72).*(?=\/)|...(?<=\=[swh]72).*$/g, "s" + w + "-rw"),
          i = new Image();
      i.onload = () => {
        p.style.backgroundImage = "url('" + i.src + "')";
        p.classList.add("eltiqni-visible");
      };
      i.src = src;
    });
  });
});
//]]>
</script>
  

الخطوة الأخيرة

• اذهب الى تبويب التخطيط
• في المكان الذي يناسبك اختر إضافه أداة
• اختر HTML/JavaScript
• انسخ الكود التالي والصقه في المربع
• اضغط حفظ الأداة

HTML Code

<b:if cond="data:view.isHomepage">
  <div class='eltiqni-container'>
    <div class="eltiqni-slider" data-label="recent" data-results="5"></div>
  </div>
</b:if>
  

يمكنك التحكم في عدد المواضيع المعروضة من خلال data-results لكن يفضل الحفاظ على الرقم 5 لأنه هو المناسب لهذه الأداة، كما يمكنك التحكم في التصنيف من خلال data-label في حالة كنت تريد عرض المواضيع حسب آخر المشاركات بالترتيب فحافظ على قيمة data-label كما هي "recent".

الخلاصة

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

المصادر:

حميان للمعلوميات

زيارة