سكربت عرض الحلقات بعدة أشكال

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

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

ضع الكود التالي فوق ال </head

  <b:if cond='data:view.isPost'>
  <style type='text/css'>
/*<![CDATA[*/
.EpisodeList {
    --MainColor: #673be6; /* اللون الاساسي*/
    --textColor: #000; /* لون الخط */
    --inputBG: rgb(0 0 0 / 5%); /*  لون محرك البحث*/
    --epBG: white; /*  لون خلفيةالحلقة */
    --epBorder: #EEE; /*  لون حواف الحلقة*/
    --item-grid: 17.188rem; /*  عرض الحلقة بشكل الثاني*/
    --thumb-list: 72px; /* عرض و طول صورة الحلقة في الشكل الاول*/
    --buttonEP-w: 80px; /* عرض و طول الحلقة بشكل الثالث*/
    --btnColor: #fff; /* لون خط زر تحميل المزيد*/
    --headlineColor: #fff; /* لون خط عنوان الاضافة*/
    --errorBG: rgb(0 0 0 / 5%); /* لون خلفية رسالة الخطأ*/
    --errorColor: #000; /* لون  رسالة الخطأ*/
    --btnEpBG: #eee; /* لون خلفية الحلقة لشكل الثاني*/
}
.list-episodes{margin:1rem 0}.list-episodes ul li{position:relative;display:block;overflow:hidden;animation:.8s slideDownFadeIn}.ErrorPage{display:flex;flex-direction:column;max-width:28rem;width:100%;background-color:var(--errorBG);color:var(--errorColor);margin:1rem auto;text-align:center;align-items:center;padding:1rem;border-radius:.5rem}.ErrorPage svg{width:2rem;height:2rem;margin-bottom:1rem}.LoadIcon,.LoadMoreEp button{position:relative;margin:0 auto}.ErrorPage span{font-size:1.2rem}@keyframes animloader{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}@keyframes slideDownFadeIn{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}.list-episodes .listHeadline{display:flex;align-items:center;width:100%;margin:1rem 0;padding:.5rem 0;position:relative;border-radius:2rem}.list-episodes .listHeadline span{font-weight:700;height:100%;color:var(--headlineColor);padding:.688rem 1.25rem;background-color:var(--MainColor);border-radius:2rem;display:block;font-size:1rem;text-transform:uppercase;line-height:1.2;position:relative}.list-episodes .listHeadline i{position:relative;display:flex;margin-right:auto;background-color:var(--MainColor);width:fit-content;height:2rem;border-radius:.5rem;text-align:center;align-items:center;justify-content:center;font-style:inherit;color:var(--headlineColor);padding:0 1rem}.list-episodes .listHeadline:before{content:'';width:100%;height:0;border-bottom:2px solid var(--epBorder);position:absolute;top:50%;left:0;margin-top:-1px}.list-episodes .SearchEpisode input{font-size:1rem;font-family:inherit;color:var(--textColor);padding:1rem;display:block;width:100%;box-sizing:border-box;background:var(--inputBG);border-radius:.5rem;border:1px solid var(--inputBG)}.list-episodes .SearchEpisode input:focus{background:0 0}.list-episodes ul.buttonEp{display:flex;justify-content:center;flex-wrap:wrap;margin:1.5rem 0;gap:5px}.list-episodes ul.buttonEp a{display:flex;position:relative;background:var(--btnEpBG);width:var(--buttonEP-w);height:var(--buttonEP-w);margin:0 2px;border-radius:5px;padding-top:12px;flex-direction:column;align-items:center}.list-episodes ul.buttonEp a span{display:block;font-size:15px;color:var(--textColor)}.list-episodes ul.buttonEp a strong{display:block;font-size:30px;font-style:normal;font-weight:700;line-height:36px;color:#f1c73f}.list-episodes ul.buttonEp a[data-status]:before{content:attr(data-status);display:block;font-size:.71rem;border-radius:5px;padding:1px 10px;margin-bottom:.3rem;position:absolute;top:-13px;white-space:nowrap}.list-episodes ul.buttonEp li{overflow:initial}.list-episodes ul.listEp{margin:1rem 0;display:flex;flex-direction:column;background-color:var(--listColor);border-radius:.5rem;row-gap:.5rem}.list-episodes ul.listEp li a{display:flex;column-gap:1rem;align-items:center;background:var(--epBG);padding:.5rem;border-radius:.5rem;border:2px solid var(--epBorder)}.list-episodes ul.listEp li a:hover{background:var(--epBorder)}.list-episodes ul.listEp .thumb{position:relative;width:var(--thumb-list);height:var(--thumb-list);flex-shrink:0;border-radius:.5rem;overflow:hidden}.list-episodes .det{display:flex;flex-direction:column;font-size:.92rem;color:var(--textColor);width:100%;font-weight:600}.list-episodes .det[data-status]:before{content:attr(data-status);display:block;font-size:.78rem;border-radius:5px;padding:1px 8px;width:fit-content;margin-bottom:.3rem}.list-episodes ul.listEp .thumb img{width:100%;height:100%}.list-episodes ul.gridEp{display:grid;gap:30px;grid-template-columns:repeat(auto-fill,minmax(var(--item-grid),1fr));margin:1rem 0}.list-episodes ul.gridEp li .inner{position:relative;display:flex;flex-direction:column;border:.1rem solid var(--epBorder);border-radius:.5rem;gap:1rem;padding:1rem}.list-episodes ul.gridEp .thumb{border-radius:.5rem;position:relative;block-size:auto;background:rgb(0 0 0 / 12%);overflow:hidden;z-index:1}.list-episodes ul.gridEp .thumb[data-status]:before{content:attr(data-status);display:block;font-size:.78rem;border-radius:5px;padding:1px 8px;width:fit-content;margin-bottom:.3rem;position:absolute;top:15px;right:15px;opacity:.8}.list-episodes ul.gridEp .thumb img{aspect-ratio:5/3;inline-size:100%;object-fit:cover;border-radius:.5rem}.list-episodes ul.gridEp .title{font-size:1.25rem;line-height:1.35;font-weight:700;margin:.5em 0}.list-episodes [data-status="فلر"]:before{background:red;color:#fff},.list-episodes [data-status="اوفا"]:before,.list-episodes [data-status=ova]:before{background:green;color:#fff}.list-episodes [data-status="خاصة"]:before,.list-episodes [data-status=spacial]:before{background:#dc143c;color:#fff}.list-episodes [data-status="الحلقة الاخيرة"]:before{background:#000;color:#fff}.LoadMoreEp button{display:flex;background:var(--MainColor);color:var(--btnColor);text-decoration:none;padding:0 .625rem;height:2rem;font-size:.98rem;font-family:inherit;font-weight:700;border-radius:.3rem;line-height:1;width:fit-content;align-items:center;cursor:pointer;-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out}.LoadMoreEp button[disabled]{opacity:.8}.LoadMoreEp button:hover{transform:skewX(10deg)}.LoadMoreEp button:hover span{transform:skewX(-10deg)}.LoadIcon{width:3rem;height:3rem;display:block;opacity:0;visibility:hidden;transform:translateY(-2rem);-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out}.LoadIcon:after,.LoadIcon:before{content:'';box-sizing:border-box;width:3rem;height:3rem;border-radius:50%;border:2px solid var(--MainColor);position:absolute;left:0;top:0;animation:2s linear infinite animloader}.LoadIcon:after{animation-delay:1s}.is-loading .LoadIcon{opacity:1;visibility:visible}.is-loading button{transform:scale(0);visibility:hidden;opacity:0}
/*]]>*/        
    </style>
    </b:if>

ضع الكود التالي فوق ال </body

ضع الكود المولد في كل الحلقات

ضع الكود المولد الاظهار الحلقات