أفضل سليد شو لعرض صور في الموقع التقني بتصميم شبكي جذاب 2025

كيفية عرض مواضيع بلوجر بتصميم شبكي جذاب

يُعتبر تصميم المدونات من العناصر المهمة لجذب انتباه الزائرين وتحسين تجربة المستخدم. ومن بين الأساليب الحديثة في عرض المواضيع هو التصميم الشبكي (Grid View) الذي يجعل المحتوى أكثر تنظيمًا وجاذبية. في هذا المقال، سنتعرف على كيفية تطبيق تخطيط شبكي لعرض المواضيع في بلوجر باستخدام كود CSS وHTML بسيط.

ما هو التخطيط الشبكي (Grid View)؟

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

مميزات التخطيط الشبكي في بلوجر

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

قد يهمك: رابط تحميل قالب Naar: أفضل قالب تقني احترافي لمدونات بلوجر 2025

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

1. إضافة أكواد CSS

قم بإضافة الكود التالي إلى قالب بلوجر قبل وسم ]]></b:skin> لتحسين تنسيق عرض المشاركات:

عرض ونسخ الأكواد

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}}
 >

2. إضافة كود HTML لعرض المواضيع

بعد إضافة أكواد CSS، قم بإدراج الكود التالي داخل القالب في المكان المناسب لعرض المواضيع على الصفحة الرئيسية:

عرض ونسخ الأكواد

//<![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> >

3. أضافة هذا الكود في JavaScript/HTML

عرض ونسخ الأكواد

كيفية تخصيص عدد المشاركات المعروضة؟

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

قد يهمك: قم بالتحميل الآن قالب سيو بلس(SEO PLUS) 2025

خاتمة

يعد استخدام التخطيط الشبكي (Grid View) في بلوجر طريقة رائعة لجعل المدونة أكثر احترافية وتنظيمًا. باستخدام أكواد CSS وHTML المذكورة، يمكنك بسهولة تطبيق هذا التصميم على مدونتك وتحسين تجربة المستخدم بشكل كبير.

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

اخر اخبار

أفضل سليد شو لعرض صور في الموقع التقني بتصميم شبكي جذاب 2025