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

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

مميزات إضافة سلايد شو إلى مدونة بلوجر

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

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

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

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

قم بإدراج الأكواد التالية في قسم <head> من قالب مدونتك، وذلك بوضعها فوق وسم ]]></b:skin> مباشرة:

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

.splide__track>.splide__list>.splide__slide{-webkit-user-select:none;user-select:none;}.splide--fade>.splide__track>.splide__list{display:block;}.splide--fade>.splide__track>.splide__list>.splide__slide{position:absolute;top:0;left:0;z-index:0;opacity:0;}.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{position:relative;z-index:1;opacity:1;}.splide--rtl{direction:rtl;}.splide--ttb>.splide__track>.splide__list{display:block;}.splide--ttb>.splide__pagination{width:auto;}.splide__arrow{position:absolute;z-index:1;top:50%;transform:translateY(-50%);width:3em;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;padding:0;opacity:.6;background:#9e9e9e;}.splide__arrow svg{width:2em;height:2em;}.splide__arrow:hover{cursor:pointer;opacity:.9;}.splide__arrow:focus{outline:none;}.splide__arrow--prev{left:1em;}.splide__arrow--prev svg{transform:scaleX(-1);}.splide__arrow--next{right:1em;}.splide__pagination{position:absolute;z-index:1;bottom:.5em;left:50%;transform:translateX(-50%);padding:0;}.splide__pagination__page{display:inline-block;width:8px;height:8px;background:#ccc;border-radius:50%;margin:3px;padding:0;transition:transform .2s linear;border:none;opacity:.7;}.splide__pagination__page.is-active{transform:scale(1.4);background:#fff;}.splide__pagination__page:hover{cursor:pointer;opacity:.9;}.splide__pagination__page:focus{outline:none;}.splide__progress__bar{width:0;height:3px;background:#ccc;}.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;}.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border-color:#000;}.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none;}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{right:12px;left:auto;}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1);}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:12px;right:auto;}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1);}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%);}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em;}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg);}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{top:auto;bottom:1em;}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg);}.splide--ttb>.splide__pagination{display:flex;flex-direction:column;bottom:50%;left:auto;right:.5em;transform:translateY(50%);}
.YIMIBI{display:flex;flex-direction:row;text-align:right;direction:rtl;justify-content:center;border:solid 1px #ddd;margin:10px 5px;padding:10px;overflow:hidden;border-radius:5px;background-color:#fff;color:#000}
.ymb-post{display:flex;flex-direction:column;margin:0 4px!important;width:250px}
.ymb-post h2{display:block;line-height:0;padding:0;margin:0}
.ymb-post h2 a{color:#000;font-size:14px;text-decoration:none;line-height:1.4;transition:200ms}
.ymb-post h2 a:hover{color:#0000aa}
.ymbthumb{overflow:hidden;border-radius:5px;box-shadow:0 0 2px #000;transition:200ms}
.ymbthumb img{object-fit:cover;width:100%;height:auto}
.ymbthumb:hover{filter:contrast(1.2)}
.hauthor,.htime{font-size:12px;color:#555;font-weight:bold;vertical-align:middle;padding:0 5px}
.hauthor::before{content:"";display:inline-block;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='blue' class='bi bi-person-circle' viewBox='0 0 16 16'%3E%3Cpath d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z'/%3E%3C/svg%3E");width:12px;height:12px;margin:0 0 0 5px;vertical-align:middle}
.htime::before{content:"";display:inline-block;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='blue' class='bi bi-calendar-check' viewBox='0 0 16 16'%3E%3Cpath d='M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z'/%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");width:12px;height:12px;margin:0 0 0 5px;vertical-align:middle}  >

2. إضافة أكواد JavaScript

أضف الأكواد التالية قبل وسم </body> في قالب مدونتك:

قم بأضافة هذا الحرف > مع الكود التالي قبله في نفس السطر.

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

</script>
<script type='text/javascript'>
//<![CDATA[
function WANOGO(e, t) {
    var l;
    l = "recent" == t ? "/feeds/posts/summary?alt=json-in-script&max-results=" + e : "/feeds/posts/summary/-/" + t + "?alt=json-in-script&max-results=" + e, $.ajax({
        type: "get",
        url: l,
        data: "data",
        dataType: "jsonp",
        success: function(e) {
            var t = e.feed.entry.length;
            for (let l = 0; l < t; l++) hol = e.feed.entry[l].link.length - 1, htitle = e.feed.entry[l].link[hol].title, hlink = e.feed.entry[l].link[hol].href, hthumb = e.feed.entry[l].media$thumbnail.url.replace("s72-c", "w250-h180-c"), hauthor = e.feed.entry[l].author[0].name.$t, htime = e.feed.entry[0].published.$t.substring(0, 10).replaceAll("-", "/"), $(".splide__list").eq(0).append('<li class="ymb-post splide__slide"><a target="_blank" class="ymbthumb" href="' + hlink + '"><img src="' + hthumb + '" alt="' + htitle + '"></a><h2><a target="_blank" href="' + hlink + '">' + htitle + '</a></h2><div><span class="hauthor">' + hauthor + '</span> - <span class="htime">' + htime + "</span></div></li>"), l == t - 1 && new Splide(".splide", {type: "loop",autoWidth: !0,autoplay: !0,direction: "rtl",focus: "center",pagination: !1}).mount()
        }
    })
}
function ZOTAYO() {
    hele = $(".YIMIBI").eq(0).html().replaceAll("\n", ""), helelist = hele.split("/"), $(".YIMIBI").eq(0).html(""), WANOGO(helelist[0], helelist[1]), $(".YIMIBI").html('<div class="splide__track"><ul class="splide__list"></ul></div>')
}
ZOTAYO();
//]]>
</script>  >

3. إضافة كود HTML للسلايد شو

ضع الكود التالي في الموضع الذي ترغب في عرض السلايد شو فيه داخل مدونتك:

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

يمكنك تخصيص الكود لعرض المواضيع حسب تصنيف معين أو عدد محدد من المقالات. على سبيل المثال، لتحديد عدد المواضيع المعروضة، عدّل القيمة في الكود بما يتناسب مع احتياجاتك.

قد يهمك: أفضل سلايد شو متجاوب ومتوافق مع جميع المدونات 2025

تأثير السلايد شو على مدونتك

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

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

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

اخر اخبار

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

مميزات إضافة سلايد شو إلى مدونة بلوجر

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

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

2. إضافة أكواد JavaScript

3. إضافة كود HTML للسلايد شو

تأثير السلايد شو على مدونتك

omar

إرسال تعليق

0 تعليقات

التسميات

DeepSeek: الثورة الجديدة في عالم البحث الذكي وتحليلات البيانات

تنزيل نغمات إسلامية بصوت عالٍ جداً: طريقة لتخصيص هاتفك بروحانية