إذا كنت صاحب مدونة بلوجر، _فغالبًا_ ستحتاج إلى إضافة سلايد شو متحرك على منصة بلوجر الخاصة بك. إليك الخطوات لذلك.
ما هو إضافة سلايد شو متحرك السلايد شو المتحرك Slide Show ؟
السلايد شو هو: وسيلة يستخدمها المدونون وغيرهم لعرض ما يريدون توصيله للقراء أو المشاهدين للمحاضرة التي يقدموها.
نتيجة لذلك، أصبحت طريقة عرض سلايد شو تلقائي للمقالات والموضوعات لمدونات بلوجر، وسيلة أساسية لإظهار أهم الموضوعات التي تهم زوار المدونة.
ما هي أهمية إضافة سلايد شو متحرك 2021 لمدونات بلوجر slideshow blogger widget ؟
1- يضمن لك التفاعل المستمر في مدونتك، وكذلك استمرار الزوار لأطول وقت ممكن:
توفر سلايد شو متحرك، يعرض مقالات جديدة في مدونة بلوجر، يثير فضول الزوار للمواضيع المقترحة من السلايد شو، وهذا يعني ارتفاع احتمالية قراءة الزائر لموضوع آخر في مدونتك.
2- لفت انتباه الزوار للمحتوى الرئيسي الذي تقدمه مدونتك:
في الأساس تكون كل مدونة لها محتوى أساسي، بالإضافة إلى المحتوى فرعي.
المحتوى الفرعي قد يجلب لك بعض الزوار، ولكن لكي تجذب الزائر نحو قراءة المحتوى الأساسي لك، فلابد في عرضه في شكل
جاذب.
هذا ما يساعدك فيه إضافة السلايد شو المتحركة، حيث أنها تدعم خاصية عرض المواضيع حسب التصنيف وهذا يؤدي لظهور المحتوى الأساسي لمدونتك بوضوح للزائر.
3- إضفاء طاابع الاحترافية على مدونتك ما يؤدي لكسب زوار دائمين:
علاوة على تقديم شيء نافع للزوار يكون الهدف الثاني لكل مدون هو وجود زوار دائمين لموقعه ليستفيدوا مما يقدمه ويفيده بنقراتهم على مدونته.
العين البشرية تفضل الأشياء المتحركة على الساكنة. لذلك فإن حركة السلايد شو تجعل الزائر نفسيًا يشعر بكون هذا الموقع احترافي .
بالتالي يكون شكل ومظهر موقعك له دور فعَّال في جعل الزوار مقبلين عليه بشكل دائم.
كل هذا يعزز من ارتباط الزائر بمدونتك لمتابعة ما تقدمه، وكذلك شراء المنتج أو الخدمة التي تعرضها من خلال منصتك.
كيف يمكن إضافة سلايد شو احترافي لمدونات بلوجر slideshow ؟
الفكرة كلها تكمن في إضافة بعض الأكواد الخاصة بافضل اضافات بلوجر، المجانية الحصرية.
هذه الأكواد تضاف إلى: Css و JavaScript و في الأخير HTML وهذه الأكواد تضاف في قوالب بلوجر.
كيفية اضافة سلايد شو تلقائي و احترافي لمدونات بلوجر 2021:
يمكنك اضافة سلايد شو تلقائي متحرك من خلال اتباع الخطوات التالية:
أولًا: إضافة الأكواد الخاصة بـ: Css
اذهب للوحة التحكم على مدونتك، ستظهر لك القائمة، بعد ذلك، قم بالضغط على “التنسيق”.
اختر بعد ذلك تعديل القالب.
بعد ذلك،اضغط ctrl+f ثم اكتب في خانة البحث الكود التالي: ]]></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} ثانيًا: إضافة أكواد JavaScript:
اضغط مرة أخرى ctrl+f واكتب في خانة البحث: </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>
ثالثًا: إضافة الاكواد الخاصة بـ: HTML:
الغرض من هذه الأكواد: تحديد المكان الذي تود أن تظهر فيه السلايد شو كالظهور في الصفحة الرئيسية أو وسط الصفحة أو غير ذلك.
توضع هذه الأكواد في قالب بلوجر كالتالي:
ادخل على تنسيق.، بعد ذلك، اختر إضافة أداة ثم اختر JavaScript\HTML.
انسخ الكود التالي، وبعد ذلك ضعه في الصندوق الظاهر أمامك في خانة المحتوي ولا تكتب شيء في “العنوان”.
<div class=”YIMIBI splide”>10/recent</div>
ملاحظات:
الرقم 10 يدل على عدد الموضوعات التي ستظهر في السلايدر شو، وبالتالي يمكنك تعديلها كما تريد.
كلمة recent تشير إلى أن آخر الموضوعات في مدونتك هي التي ستظهر في السلايد شو.