اضافة سلايدر شو ديناميكي عرض مواضيع حسب التسمية -owl coursal
غنية عن التعريف ان مطور ستعرف ما دور هذه المكتبة , ان كنت لاتعرف عنها سأحاول أن أختصر تعريفها لك .
السلام عليكم من جديد في هذا المقال أو قد أسميه درس بحيث سأقدم لكم اضافة سلايدر شو اعتمادا بمكتبة owl coursal والتي هي مكتبة غنية عن التعريف ان مطور ستعرف ما دور هذه المكتبة , ان كنت لاتعرف عنها سأحاول أن أختصر تعريفها لك .
مكتبة owl coursal هي مكتبة كـ : Bootstrap و materializecss ...الخ , تقدم لك سلايدر شو بأشكال و بخصائص مختلفة والتي قد
تسهل عليك في بنائها دون عنا ماعليك سوى تخصيص لكن المشكلة التي قد تواجهك وهي أن السلايدر شو اتجاهه ltr ليس rlt => والتي من اليمين الى اليسار لكن قمت بتعديل السلايدر وجعلته من ltr الى rtl وقد قمت بتطوير سلايدر شو ديناميكي بمعنى استخدمت json feeds api , لكي لا نطيل الشرح سأقدم لكم طريقة تركيب السلايدر في مدونتك .
شرح طريقة التركيب :
أولا ستذهب الى بلوجر ثم المظهر ثم ابحث عن /b:skin و الصق الكود التالي فوقه مباشرة :
:root{
--color-owl-slider:#3d5afe;/*--[ لون أزرار السلايدر ]--*/
}
#DaynamicSlider {
position: relative;
overflow: hidden;
margin:0 auto;
padding: 0.1em;
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#DaynamicSlider .customNavigation {
padding: 1rem;
display: block;
margin: 0 auto;
width: 100%;
}
#DaynamicSlider .customNavigation a.btn {
text-align: center;
display: inline-block;
background: #fff;
padding: 1px 7px;
width: 37px;
padding-top: 3px;
-webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 29%);
box-shadow: 0 0 5px 0 rgb(0 0 0 / 29%);
border-radius: 4px;
}
#DaynamicSlider .customNavigation a.btn svg {
fill: var(--color-owl-slider);
width: 20px;
height: 20px;
}
.post-summery {
width: auto;
background: #f8f8f8;
padding: 0;height: 270px;
margin:5px;-webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 29%);box-shadow: 0 0 5px 0 rgb(0 0 0 / 29%);
}
.post-summery .post-img {
width: auto;
overflow: hidden;
display: block;
}
.post-summery .post-img img {
vertical-align: middle;
-o-object-fit: cover;
object-fit: cover;
display: block;-webkit-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;
background-size: cover;
width: auto;
height: auto!important;
}
.post-summery .post-infoo {
padding:5px 1rem;
width: 100%;
overflow: hidden;
}
.post-summery .post-infoo svg {
fill: #48525c;
width: 15px;vertical-align: sub;
height: 15px;margin: 0 5px;
}
.post-summery .post-img img:hover {
-webkit-transform: rotate(2deg) scale(1.2);
-ms-transform: rotate(2deg) scale(1.2);
transform: rotate(2deg) scale(1.2);
}
.post-summery .post-infoo span.titlee {
text-align: center;
display: block;
margin: 4px auto;
font-size: 14px;margin-bottom: 10px;
color: var(--color-owl-slider);line-height: 20px;
}
.post-summery .post-infoo .data,.post-summery .post-infoo .auther {
display: inline-block;
width: auto;
margin: auto 5px;
background: #eee;
padding: 5px 11px;
border: 1px dashed #48525c;
border-radius: 30px;
font-size: 12px;
height: auto;
}
/*=====================================
= OwlCarousel css [dir=rtl]
=====================================*/
/*-----owl buttons------*/
.owl-carousel .owl-controls{margin-top:0;text-align:center;}
.owl-controls{-webkit-tap-highlight-color:rgba(0,0,0,0);}
.owl-page,.owl-controls .owl-buttons div{cursor:pointer;}
.owl-carousel .owl-controls .owl-buttons{position:static;margin:0;padding:0;height:0;width:100%;z-index:9;}
.owl-carousel .owl-controls .owl-buttons div.owl-prev{right:0;}
.owl-carousel .owl-controls .owl-buttons div.owl-next{left:0;}
.owl-carousel .owl-controls .owl-buttons div{position:absolute;margin:0;padding:0;top:50%;z-index:9;display:inline-block;font-size:17px;overflow:hidden;}
.owl-carousel .owl-controls .owl-buttons div .fa{position:relative;width:38px;height:38px;line-height:38px;border:0;background-color:var(--color-owl-slider);color:#FFF;font-size:17px;text-align:center;}
/*----owl pagination-----*/
.owl-carousel .owl-controls .owl-pagination {pointer-events: none;margin: 10px;right: 50%;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;display: -webkit-inline-flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;bottom: 10px;z-index: 20;padding: 2px 15px;}
.owl-carousel .owl-controls .owl-pagination .owl-page{pointer-events:auto;position:relative;display:inline-block;}
.owl-carousel .owl-controls .owl-pagination .owl-page span{border-radius: 20px;pointer-events:auto;background:#ddd;opacity:1;width:10px;height:10px;margin:3px;display:inline-block;float:right;}
.owl-carousel .owl-controls .owl-pagination .owl-page.active span{background-color:var(--color-owl-slider);}
/*-----shah content------*/
.owl-carousel .owl-controls{margin-top:0;}
.owl-carousel{display:none;}
.owl-carousel,.owl-carousel .owl-wrapper,.owl-carousel .owl-wrapper-outer{position:relative;overflow:hidden;width:100%;}
.owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.owl-carousel .owl-item{float:right;}
/*----stat [ opacity ] 0.8----*/
.owl-carousel .owl-controls .owl-buttons div .fa:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.8)";filter:alpha(opacity=0.8);opacity:0.8;}لون الأزرار والسلايدر .لتغييره غير #3d5afe بأي لون تريده .
بعد تطبيقك للخطوة القبلية ننتقل للخطوة التالية وهي اضافة مكتبة owl-coursal المعدلة من طرفي للاتجاه rtl المكتبة مرفوعة في github للحصول على السكريبت من هنا . الأن سنقوم باضافة المكتبة للمدونة اذهب لمدونتك ثم المظهر ثم تعديل HTML ثم ابحث عن الوسم /body وألص الكود التالي فوقه مباشرة :
<script>
//<![CDATA[
$(()=>{
var target = $("#target-posts").text().split("|"),
resault= target[0],
tpresualt = target[1],
url =`${window.location.origin}/feeds/posts/default/-/${tpresualt}?alt=json-in-script&max-results=${resault}`;
if ("recent" === tpresualt){url =`${window.location.origin}/feeds/posts/default?alt=json-in-script&max-results=${resault}`}
$.ajax({
type:"GET",
url:url,
dataType:"jsonp",
success:function(e){
/*القسم خاص بجلب المواضيع*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1e(F l="",i=0;i<1f;i++){F g=e.1g.1h,b$o=g[i].o.$t,b$v=g[i].v[4].z,b$q=g[i].1i$1j.1k.1l("1m-c","1n"),b$g=g[i].1o.$t.1p(0,10),b$G=g[i].1q[0].1r.$t;l+=`<h n="1s"><h n="b-1t"><h n="b-q"><a z="${b$v}"o="${b$o}"><q 1u="${b$q}"1v="${b$o}"1w=" 1x: 1y!H; 1z: 1A%!H; "/></a></h><h n="b-1B"><a z="${b$v}"o="${b$o}"><I n="1C">${b$o}</I></a><h n="g"><r J-K="L"n="u M-u"g-u="1D"g-N="O"P="Q"R="q"S="0 0 A A"T="U://V.W.X/Y/r"><w d="1E 1F 8 8 B 8 Z j j j j-13 j-1G 8 1H 1I 1J x.7-s.1 f-f f-x.7 0-f-s.1-f-f 0-x.7 s.1-f f-f x.7 0 f s.1 f 1K-1L.9 k.1M-1N.2-1O-3.1-2.3-4.9-5.9-4.9-9.1P-6.6 5.4-12 12-1Q.6 0 12 5.4 12 1R.1S.5 1T.1U.4 3.9 6.5 11.4 2.6 16.1V-8.2 11.1W-3.9 5.3-11.4 6.5-16.8 2.1X"14="17"></w></r>${b$g}</h><h n="1Y"><r J-K="L"n="u M-u"g-N="O"P="Q"R="q"S="0 0 1Z A"T="U://V.W.X/Y/r"><w d="22 23 8 0 B 0 Z j j j j-13 j-24 8 j 29 2a.2b-y.9 26.5-2c.1 C.4-18 C.2d-2e.1-15.9-18-C.2f-y.3 28.7-p p-p 11.1 0 27.5 11.4 p 11.4 2g.6 0 2h.8-11.4 p-11.4 y.3 0 p 28.7 p 2i.2j.6-27.2k-6.8-19.4-19.3-D.1-1a.6-D.1-20.5 0-1b.4 11.4-p 11.2l.6 2m 2n 2o-1c.3 0-2p.8 y.7-1a.6 D.2q.9 2r.6 1d 2s.4 1d 2t-B.1 s.9-f f-2u s.9 f 2v m.4-21.9 2w.6-2x.4 2y.2z 2A-1c.6 0-k E.4-k 2B.4 k k k k-E.4 k-k-E.4-k-k-2C 2D-1b.9 0-m-25.1-m-2E.1-m m-m m 25.1 m m-25.1 m-m 2F"14="17"></w></r>${b$G}</h></h></h></h>`}$("#2G #2H-2I ").2J(l);',62,170,'|||||||||||post||||216|data|div||248|88||56|class|title|64|img|svg|96||icon|link|path|118|35|href|512|119|42|82|39|var|auth|important|span|aria|hidden|true|small|prefix|fal|focusable|false|role|viewBox|xmlns|http|www|w3|org|2000|256s111||||111|fill|||currentColor|128|46|94|30|48|32|for|resault|feed|entry|media|thumbnail|url|replace|s72|s1600|published|substring|author|name|item|summery|src|alt|style|height|170px|width|100|infoo|titlee|clock|M256|8C119|248S393|256|8zm216|248c0|216zm|148|3l|81|59c|7V116c0|12h14c6|12v146|3l70|51|3c5|8l|3c|6z|auther|496|||M248|8C111|248S385|||||8zm128|421|6c|80|4s|92|4V416c0|36|52|64v13|6zm30|5c|4S204|320|184|320c|87|1C53|363|312|256c0|216s216|216c0|107|57|146|1zM248|120c|88s39|88zm0|144c|56s25|56z|DaynamicSlider|Daynamic|slider|html'.split('|'),0,{}))
/*قسم خاص بخصائص السلايدر*/
var owl = $("#Daynamic-slider");
owl.owlCarousel({
items : 3,/*كم يعرض من موضوع*/
itemsDesktop : [1000,1], /*كم عدد المواضيع لعرضها في أجهزة الحاسوب*/
itemsDesktopSmall : [900,1], /*كم يعرض من موضوع في أجهزة الحاسوب بمقاس 900*/
itemsTablet: [600,1],
itemsMobile : false
}).trigger('owl.play',2000);/*سرعة الانتقال بين مقال و مقال ملاحظة كل 1000 تساوي 1 ثانية */
$(".next").click(function(){owl.trigger('owl.next');}),
$(".prev").click(function(){owl.trigger('owl.prev');}),
$(".play").click(function(){owl.trigger('owl.play',2000);})
$(".stop").click(function(){owl.trigger('owl.stop');});
}
});
});
//]]>
</script>
<!--[owl-carousel]-->
<script src='https://cdn.jsdelivr.net/gh/zinothec/owl-carousel@main/owl.carousel-v1.3.3.js' type='text/javascript'/>
بعد تطبيقك لجميع الخطوات السابقة سنقوم ببعض الخصائص كـ تعديل السرعة الانتقال :
في السكريب مقسم لقسمين القسم الأول لجلب المواضيع أم القسم الثاني فهو لخصائص السلايدر كعدد عرض المواضيع و سرعة...الخ.
لقد وضعت في السكريبت comment أي تعليق بجانب كل كود وفهم مادور كل كود و كيكفية تعديل عليه .
نأتي بالخطوة الأخيرة وهي تخصيص مكان لعرض السلايدر اذهب الى التخطيط خاص بمدونتك ثم اختر مكان محدد لعرض السلايدر ثم أضف أداة ثم أختر HTML/JavaScript وألصق الكود التالي :
<b:if cond='data:view.isHomepage'>
<div id="DaynamicSlider"><center>
<div class="customNavigation">
<a class="btn prev"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right" viewbox="0 0 16 16"> <path d="M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"/> </path></svg></a>
<a class="btn play"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></path></path></svg></a>
<a class="btn stop"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></path></path></svg></a>
<a class="btn next">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-left" viewbox="0 0 16 16"> <path d="M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z"/> </path></svg>
</a>
</div></center>
<div id="Daynamic-slider" class="owl-carousel owl-theme">
<div id='target-posts'>9|recent</div>
</div>
</div>
</b:if>
قم بالتغييرات التالية :
recent : تمثل عرض أخر مواضيع ويمكنك وضع اسم القسم الذي تريد عرضه ,
9 : يمثل عدد عرض المواضيع في السلايدر يمكنك تغييره كما تريد , لايجب أن يكون الرقم أكثر من مواضيعك أو من مواضيع القسم المحدد .
الأسئلة التي قد تراودك :
زينو ثك
مسؤول
زينو مدون و مطور يسعى لتقديم محتوى ( دروس، قوالب، إضافات،دروس تعليمية...) بلوجر يحتاجه كل مدون أو مطور التي من ٱسسها أن تساهم و تدعم المدون و المطور في ترقية محتوى بلوجر (العربي) .
