اداه عرض المواضيع في الرئيسية بشكل رائع

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

أداة عرض مواضيع بلوجر بشكل مميز 

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

يحافظ الامتداد
أيضًا على نسبة أبعاد الصورة ويجبر الصورة على الظهور بالكامل داخل الإطار دون
أي اقتصاص. يمكنك تغيير نسبة العرض إلى الارتفاع للصورة عن طريق ضبط “المساحة
المتروكة لأسفل” ، والتي يوصى بها لتكون 56.25٪ لنسبة عرض إلى ارتفاع تبلغ 9:16
و 75٪ لنسبة عرض إلى ارتفاع تبلغ 4: 3.

تتيح لك أداة عرض سمة
Blogger التحكم في عدد المشاركات المعروضة في الشبكة (يفضل 9 منشورات) ، كما
تتيح لك تحديد المشاركات التي يجب عرضها حسب الفئة ، كل ذلك من خلال سمة السمات
في كود HTML.

اولا نقوم بوضع أكواد CSS الخاصة بإضافة عرض مواضيع بلوجر (ضعها فوق
]]></b:skin>

هذا كود ccs 

@font-face{font-family:'slidefont';src:url("https://cdn.jsdelivr.net/gh/hamianemohssine/7amian@master/font-icons/Five-News-Ticker.woff2")}
.hm-container,.hm-slide,.hm-slide-item{height:auto;width:100%}
.hm-container{display:flex;flex-direction:row;justify-content:center;margin:0 auto;padding:15px 10px;box-sizing:border-box}
.hm-container *{box-sizing:border-box;transition:1s}
.hm-slide-info,.hm-slide-photo{transition:.5s;display:flex;height:100%}
.hm-slide{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;text-align:right;direction:rtl;max-width:1100px}
.hm-slide-item{position:relative;padding-bottom:68%;background-color:#f9f9f9;overflow:hidden}
.hm-slide-item:first-child{grid-column:2/4;grid-row:1/3}
.hm-slide-item>a{position:absolute;top:0;right:0;width:100%;height:100%}
.hm-slide-photo{width:100%;background-size:cover;background-repeat:round;opacity:0}
.hm-slide-photo.hm-op{opacity:1}
.hm-slide-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}
.hm-slide-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}
.hm-slide-item:hover .hm-slide-info{padding-bottom:15px}
.hm-slide-date{color:#f7f7f7;text-shadow:1px 1px 3px #000;font-size:12px;display:flex}
.hm-slide-date:before{content:"f017";margin-left:4px;font-family:"slidefont"}
.hm-slide-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}
.hm-slide-item:first-child .hm-slide-title{font-size:1.3rem;line-height:2rem;max-height:4rem}
.hm-loadingPost: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:.5s linear infinite hmslideloader;border-radius:100%}
@keyframes hmslideloader{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (max-width:900px){.hm-slide{grid-template-columns:repeat(3,1fr)}.hm-slide-item:first-child{grid-column:1/3;grid-row:1/3}}
@media (max-width:600px){.hm-slide{grid-template-columns:repeat(2,1fr)}.hm-slide-item:first-child{grid-column:1/3;grid-row:1/3}.hm-slide-date,.hm-slide-label{font-size:12px}.hm-slide-title{font-size:.8rem;line-height:1.3rem;max-height:2.6rem}}
@media (max-width:350px){.hm-slide{grid-template-columns:repeat(1,1fr)}.hm-slide-item:first-child{grid-column:unset;grid-row:unset}.hm-slide-item:first-child .hm-slide-title{font-size:.8rem;line-height:1.3rem;max-height:2.6rem}}

ثانيا نقوم بوضع أكواد Javascript الخاصة بأداة عرض مشاركات بلوجر (ضعها فوق
</body>

<script type='text/javascript'>
//<![CDATA[
document.querySelectorAll(".hm-slide").forEach(e => {
	var a = e.dataset.label,
		s = e.dataset.results,
		t = "<div class='hm-slide-item hm-loadingPost'></div>";
	e.innerHTML = t.repeat(s);
	var l = ["يناير", "فبراير", "مارس", "أبريل", "ماي", "يونيو", "يوليوز", "غشت", "شتنبر", "أكتوبر", "نونبر", "دجنبر"],
		r = "/feeds/posts/summary?alt=json&start-index=1&max-results=" + s;
	function i(e) {e.querySelectorAll(".hm-slide-photo").forEach(e => {var a = e.dataset.image,s = Math.round(e.getBoundingClientRect().width) + 50,t = a.replace(/...(?<=/[swh]72).*(?=/)|...(?<==[swh]72).*$/g, "s" + s + "-rw"),l = new Image;l.onload = () => {e.style.backgroundImage = "url('" + l.src + "')", e.classList.add("hm-op")}, l.src = t})}
	function n() {let e = "#";for (let a = 0; a < 3; a++) e += ("0" + Math.floor(400 * Math.random() / 2).toString(16)).slice(-2);return e}
	"recent" !== a && (r = r.replace("summary?", "summary/-/" + a + "?")), fetch(r).then(e => e.json()).then(a => {
		var s = a.feed.entry,
			t = s.length,
			r = "";
		for (let o = 0; o < t; o++) {var d, h, m, A = "موضوع",c = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",u = s[o].link;for (let p = 0; p < u.length; p++)if ("alternate" === u[p].rel) {d = u[p].title, h = u[p].href;break} s[o].hasOwnProperty("category") && (A = s[o].category[0].term), s[o].hasOwnProperty("media$thumbnail") && (c = s[o].media$thumbnail.url);var g = s[o].published.$t.substring(0, 10).split("-");m = g[2] + " " + l[parseInt(g[1]) - 1] + " " + g[0], r += "<div class='hm-slide-item'><a href='" + h + "' title='" + d + "'><span class='hm-slide-photo' data-image='" + c + "'></span><span class='hm-slide-label' style='background-color:" + n() + "'>" + A + "</span><div class='hm-slide-info'><span class='hm-slide-date'>" + m + "</span><h3 class='hm-slide-title'>" + d + "</h3></div></a></div>"}
		e.innerHTML = r, i(e)
	})
});
//]]>
</script>

ثالثا نقوم بوضع أكواد HTML الخاصة بأداة عرض
آخر المواضيع (ضعها في المكان الذي يناسبك).

<b:if cond="data:view.isHomepage">
<div class='hm-container'>
	<div class="hm-slide"  style="max-width: 1100px;" data-label="recent" data-results="9">	
	</div>				
</div>
</b:if>

يمكنك التحكم في عدد الموضوعات المعروضة من خلال data-results ، ولكن من الأفضل الاحتفاظ بالرقم 9 ، وهو أكثر ملاءمة لهذه الأداة. يمكنك أيضًا التحكم في التصنيف من خلال data-label إذا كنت تريد الترتيب بالترتيب وفقًا إلى أحدث المشاركات ، حافظ على ثبات قيمة  data-label هو “recent“.