اضافة سلايد شو Slideshow متحرك الى مدونة بلوجر

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

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

طريقة تركيب السلايد شو على مدونة بلوجر

يتميز سلايد شو الذي سوف اقدمه لك بمجموعة من من المميزات والخواص من بينها :

امكانية عرض المواضيع حسب اخر المشاركات.
امكانية عرض المشاركات حسب تصنيف معين تختاره.
امكانية تحديد عدد المشاركات التي تريد عرضها في Slideshow.
السلايد شو تدعم ازرار التنقل واحد على اليمين وآخر على اليسار.
يدعم السلايد شو خاصية التحرك التلقائي.
يدعم Slides Show خاصية التمرير بالموس لتنقل السريع بين المواضيع المعروضة.
تمتاز سلايد شوا بكونها متجاوبة مع جميع احجام الشاشات ويمكنك اضافته في اي مكان تقريبا.

اكواد اضافة سلايد شو Slideshow متحرك الى مدونة بلوجر

لإضافة Slideshow الى مدونتك على بلوجر ستحتاج الى اضافة مجموعة من الأكواد

اولا :

ابحث عن

]]></b:skin>

ثم ضع الكود التالي فوقه

@keyframes splide-loading{0%{transform:rotate(0);}to{transform:rotate(1turn);}}.splide__container{position:relative;box-sizing:border-box;}.splide__list{margin:0!important;padding:0!important;width:-webkit-max-content;width:max-content;will-change:transform;}.splide.is-active .splide__list{display:flex;}.splide__pagination{display:inline-flex;align-items:center;width:95%;flex-wrap:wrap;justify-content:center;margin:0;}.splide__pagination li{list-style-type:none;display:inline-block;line-height:1;margin:0;}.splide{visibility:hidden;}.splide,.splide__slide{position:relative;outline:none;}.splide__slide{box-sizing:border-box;list-style-type:none!important;margin:0;flex-shrink:0;}.splide__slide img{vertical-align:bottom;}.splide__slider{position:relative;}.splide__spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #999;border-left-color:transparent;animation:splide-loading 1s linear infinite;}.splide__track{position:relative;z-index:0;overflow:hidden;}.splide--draggable>.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}

ثم ابحث عن

</body>

ثم ضع الكود التالي فوقه

<script src="https://raw.githack.com/hamianemohssine/7amian/main/splide.js"></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>

المرحلة الأخيرة وهي اكواد HTML و التي يجب وضعها في المكان الذي تريد ان تظهر فيه السلايد شو

<div class="YIMIBI splide">10/recent</div>
الرقم 10 الموجودة في الأداة تدل على عدد المواضيع التي سوف تعرض لذلك فيمكنك التعديل عليها كما تريد.
عبارة recent الموجودة في الكود تدل على ان المواضيع سوف تعرض حسب آخر المشاركات لذلك اذا اردت ان تظهر المقالات حسب تصنيف معين قم بإستبدال كلمة recent بالتصنيف الذي تريد.
في حالة لم تجد المكان المناسب لوضع اكواد HTML من خلال التنسيق وتريد اضافتها من خلال قالب بلوجر سوف اقدم لك في هذه الحالة مجموعة من الأكواد التي سوف تفيدك جدا في هذه الحالة.

إذا كنت تريد ان تظهر السلايد شو في الصفحة الرئيسية فقط فقم بوضع اكواد HTML التي قدمتها لك داخل الأكواد التالية :

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<!-- كل ما تضعه هنا سيظهر في الصفحة الرئيسية فقط -->
</b:if>

إذا كنت تريد وضع السلايد شو في عرض محدد مع إضافتها وسط الصفحة يمكنك ذلك من خلال وضع اكواد HTML داخل الأكواد اسفله .

<div style="display: flex;width: 100%;height: auto;justify-content: center;">
    <div style="width: 1100px;height: auto;">
         <!-- من اجل ان تظهر السلايد شو بالعرض الذي تريد وفي الوسط -->
    </div>
</div>

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

1.زيادة التفاعل داخل موقعك و الحفاظ على الزائر اطول مدة ممكنة:

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

2.جلب الإنتباه نحو المحتوى الرئيسي لموقعك:

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

3.إضفاء الإحترافية على مدونة بلوجر وكسب زوار دائمين:

لا شك ان هم كل مدون هو الحصول على زوار دائمين يستمرون بزيارة موقعه كل يوم ليروا جديد ما يقدمه، وكما نعلم ان العين البشرية اعتادت على الحركة فحركة السلايد شو تشعر الزائر بكون هذا الموقع احترافي و ممتع وغير ممل من ناحية زيارته وبالتالي مظهر موقعك له دور اساسي في جعل الزوار متعليقين به بشكل دائم

مستر بلوجر | mr blogger

اضافة سلايد شو Slideshow متحرك الى مدونة بلوجر