أداة مميزة لعرض مواضيع مدونة بلوجر في الرئيسية | إضافات بلوجر

أداة مميزة لعرض مواضيع بلوجر في الرئيسية

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

ماهو التخطيط الشبكي ؟

التخطيط الشبكي أو Grid Layout هو عبارة عن خاصية في لغة CSS قائمة على الشبكة، مكونة من صفوف وأعمدة، مما يتيح للمستخدم تصميم صفحات الويب بسهولة، حيث يلعب التخطيط الشبكي دور ترتيب الكائنات (Elements) للحصول على تصميم يسهل فهمه ومرضي من ناحية الجمال.

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

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

تحافظ الإضافة أيضا على نسبة العرض إلى الإرتفاع في الصور (Aspect ratio)، كما أنها تفرض على الصور الظهور داخل الإطار بشكل كامل بدون أي قص، يمكنك تغيير نسبة العرض إلى الارتفاع في الصور من خلال التعديل على "padding-bottom"، ينصح بالقيمة 56.25% بالنسبة لنسبة البعدين 16:9، وينصح بالقيمة 75% بالنسبة لنسبة البعدين 4:3.

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

معاينة أداة عرض مواضيع بلوجر

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

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

لا تنسى أنه يمكنك التحكم في عرض يكون من خلال التعديل على padding-bottom المحسوبة على العنصر ".hm-slide-item".

أكواد 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".

لا تنسى تعديل قيمة max-width بما يناسبك، قيمة هذا المتغير مهمة لأنها هي ما يحدد العرض الأقصى للأداة حسب العرض الأقصى الصالح لمدونتك.

2 تعليقات

أحدث أقدم