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