إضافة سلايدر شو (SliderShow) الى موقعك هي واحدة من الطرق الأكثر شيوعًا وجاذبية لجذب انتباه القراء وزوار موقع الويب الخاص بك. وتعتبر هذه الأداة من أهم وسائل تحسين تجربة المستخدم وزيادة تفاعلهم مع المحتوى الخاص بك. ومن خلال هذا المقال، سنتعرف على كيفية إضافة سلايدر شو إلى قالب بلوجر بطريقة سهلة وبسيطة.
قبل البدء في إضافة سلايدر شو إلى قالب بلوجر، يجب أن نتأكد من فهم المفهوم بشكل صحيح. السلايدر شو هو عبارة عن عرض تقديمي لصور أو محتوى متعدد الوسائط يتم تمريره تلقائيًا بين عدة صفحات أو شرائح بشكل متواصل أو يدويًا عن طريق الضغط على الأزرار الموجودة. وتعتبر هذه الأداة مثالية لعرض آخر المشاركات، أو لعرض منتجاتك، أو حتى لعرض صورك بشكل مبهر.
مميزات اضافة سلايد شو الى بلوجر
1-تحسين تجربة المستخدم: يساهم السلايد شو في توجيه اهتمام الزوار نحو محتوى معين بشكل جذاب ومباشر، مما يزيد من فرص انتباههم وبقائهم في الموقع لمدة أطول.
2-إظهار المحتوى بشكل احترافي: يمكنك اختيار صور عالية الجودة وتنسيقها بطريقة مبتكرة داخل السلايد شو، مما يعطي مظهرًا احترافيًا لموقعك.
3-زيادة معدل التفاعل: تعتبر السلايدات البصرية والمتحركة واحدة من أفضل الطرق لجذب انتباه الزائرين وتشجيعهم على التفاعل مع المحتوى المعروض.
4-تحسين تجربة التصفح عبر الهواتف الذكية: مع زيادة استخدام الهواتف الذكية في تصفح المواقع، يعتبر السلايد شو خيارًا مناسبًا لعرض المحتوى بشكل مرن وسهل الوصول.
5-امكانية الإدارة والتحديث السهلة: يمكنك بسهولة إضافة وإزالة الصور والنصوص داخل السلايد شو، مما يتيح لك تحديث المحتوى بانتظام ومواكبة أحدث التطورات.
اضافة سلايد شو لمدونة بلوجر
بعد تحديد الغرض والمميزات من إضافة السلايدر شو إلى موقعك الإلكتروني، يمكنك اتباع الخطوات التالية لإضافته إلى قالب بلوجر بكل سهولة:
تركيب اكواد 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>
تركيب اكواد Css لسلايد شو بلوجر
قم بنسخ الكود التالى وهو كود CSS الخاص بلسلايدر وضعه فوق وسم ]]></b:skin> مباشر لتجنب أي أخطاء
@font-face{font-family:'slidefont';src:url("https://cdn.jsdelivr.net/gh/hamianemohssine/sami-al-small@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}}
تركيب اكواد HTML لسلايد شو بلوجر
قم نسخ أكواد HTML السلايد شو وضعها في مكان مناسب على قالب بلوجر أو أضافة اداة جديدة فى تخطيط المدون ووضع الكود فيها وسوف يعمل السلايد بشكل جميل وجذاب على المدونة
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond="data:view.isHomepage">
<div class='hm-container'>
<div class="hm-slide" style="max-width: 1100px;" data-label="recent" data-results="5">
</div>
</div>
</b:if>
</b:if>