اضافة Slideshow متحرك الى مدونة بلوجر | إحترافي وخفيف

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

  

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

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

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

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

اضغط هنا

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

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

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

لإضافة Slideshow الى مدونتك على بلوجر ستحتاج الى اضافة مجموعة من الأكواد والتي تتمثل في Css ثم JavaScript و في الأخير HTML وسنقوم ان شاء الله بتركيب هذه الاكواد على التوالي في قالب بلوجر.

1. نبدأ اولا بتركيب اكواد Css في قالب بلوجر وذلك من خلال وضع الاكواد التالية فوق ]]></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}



2. بعدها مباشرة نقوم بتركيب اكواد JavaScript اسفل Body وبالضبط فوق </body> .



<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.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>



3. الان وصلنا الى المرحلة الأخيرة وهي اكواد 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.  إضفاء الإحترافية على مدونة بلوجر وكسب زوار دائمين:



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



4. خاتمة



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

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا