إذا كنت صاحب مدونة بلوجر فبنسبة كبيرة ستحتاج إلى إضافة سلايد شو متحرك على منصة بلوجر الخاصة بك.
كيف يمكن إضافة سلايد شو احترافي لمدونات بلوجر slideshow ؟
الفكرة كلها تكمن في إضافة بعض الأكواد الخاصة بافضل اضافات بلوجر، المجانية الحصرية.
هذه الأكواد تضاف إلى: Css و JavaScript و في الأخير HTML وهذه الأكواد تضاف في قوالب بلوجر.
كيفية اضافة سلايد شو تلقائي و احترافي لمدونات بلوجر:
يمكنك اضافة سلايد شو تلقائي متحرك، من خلال اتباع الخطوات التالية:
أولًا: إضافة الأكواد الخاصة بـ: 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 تشير إلى أن آخر الموضوعات في مدونتك هي التي ستظهر في السلايد شو.
قم بالضغط على حفظ القالب.
اذهب للصفحة الرئيسية لمدونتك وعندها ستجد أنه تم إضافة سلايد شو متحرك على منصة بلوجر الخاصة بك.
أخيرًا: السلايد شو المتحرك الذي بين يديك، سريع وبسيط ومناسب لشتى أنواع قوالب المدونات.
إقرأ أيضاً
نصائح هامة للوصول إلي إختيار أفضل إسم للمدونة
ما هو بروتوكول وشهادة ال SSL ؟
العمل علي الانترنت والربح منه كمستقل
كيف أختار نوع السيرفر المناسب لموقعي ؟!
3 تعليقات
معلومات قيمه
السلايد شو جميل جدا ومفرح، ويفتح نافذة لتضع فيها فيس أو يوتوب أو انستا أو فيديو وهو جميل جدا، شكرا لك.
🌸 #ẓᾄђἷʀᾄ 🌸
يشير الرقم عشرة إلى عدد السمات التي سيتم عرضها في شريط التمرير ، والتي يمكنك تغييرها حسب الحاجة.
يشير المصطلح “حديث” إلى أن عرض الشرائح سيتضمن أحدث العناصر من مدونتك.
احفظ النموذج بالنقر فوق الزر “حفظ”.
عندما تنتقل إلى الصفحة الرئيسية لمدونتك ، سترى أنه تم تقديم عرض شرائح متحرك إلى منصة Blogger.
أخيرًا ، لديك عرض شرائح ديناميكي في متناول يدك ، وهو سريع وسهل وقابل للتكيف مع مجموعة متنوعة من سمات المدونة.احسنت