إضافة سكربت عرض المواضيع حسب التسمية لمدونات بلوجر

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

معاينة الاضافة

الاكواد

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

	<style type='text/css'>
  	/*<![CDATA[*/  
       :root{
        --main-color:#0076fe; /* اللون الاساسي*/
        --titelColor:#121212; /* لون العنوان*/
        --PColor:#666666; /*  لون تاريخ*/
        --article:16.313rem; /* عرض المواضيع */
        --article-gap:10px /* المسافة بين المواضيع */
      }
    @keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
    .PostsByLabel{margin:1rem 0}
    .PostsByLabel .widget:not(:last-child){margin-bottom:1rem}
    .PostsByLabel .widget-content:not(.Done){width:48px;height:48px;border-radius:50%;display:block;margin:2rem auto;border-top:3px solid var(--main-color);border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite;text-indent:-9999px;overflow:hidden}
    .postsItems{display:grid;gap:var(--article-gap);grid-template-columns:repeat(auto-fill,minmax(var(--article),1fr))}
    .postsItems .post{display:flex;gap:1rem;position:relative;flex-direction:column}
    .postsItems .thumbWrap{position:relative;display:block}
    .postsItems .thumb{background:rgb(0 0 0 / 12%);overflow:hidden;z-index:1;border-radius:0.5rem;position:relative}
    .postsItems .thumb img{aspect-ratio:5/3;inline-size:100%;object-fit:cover;border-radius:0.2rem}
    .postsItems .details{display:flex;flex-direction:column}
    .postsItems .title{font-size:1rem;font-weight:700;line-height:1.4em;margin:0 0 10px}
    .postsItems .meta{color:var(--PColor);display:flex;font-size:0.82rem;column-gap:5px}
    .postsItems .meta>div{display:flex;align-items:center}
	 html[dir="rtl"] .postsItems .meta svg{margin-left:5px;}
	 html[dir="ltr"] .postsItems .meta svg{margin-right:5px;}
    .postsItems .meta svg{stroke:var(--main-color);stroke-width:2;fill:none}
	/*]]>*/
  </style>

ضع الكود التالي فوق ال </body
ضع الكود التالي في المكان الذي تريد ظهور فيه المواضيع

<b:section class='PostsByLabel' cond='data:view.isHomepage' id='PostsByLabel' name='صندوق موضيع حسب التسمية'/>
  

إضافة التسمية من التخطيط