إضافة أيقونات بجانب العناوين لتصنيف المواضيع حسب أقسام المدونة

10:21 م

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

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

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>

<a expr:name='data:post.id'/>

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

</b:if>

قم بإضافة هذا الكود قبل الكود الأحمر

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;التسمية 1&quot;'>

<span class="icocat"><img src="1 رابط الأيقونة " alt="description"/></span>
</b:if>

<b:if cond='data:label.name == &quot;2 التسمية &quot;'>

<span class="icocat"><img src="2 رابط الأيقونة " alt="description"/></span>
</b:if>

<b:if cond='data:label.name == &quot;3 التسمية &quot;'>

<span class="icocat"><img src="3 رابط الأيقونة " alt="description"/></span>
</b:if>

<b:if cond='data:label.name == &quot;4 التسمية &quot;'>

<span class="icocat"><img src="4 رابط الأيقونة " alt="description"/></span>
</b:if>

</b:loop>

للإضافة الأيقونات أسفل العناوين ،كما يوجد في مدونتي ، قم بالبحث عن هذا الكود ثم أضف الكود التاني تحة.

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

ضع الكود هنا

ولا تنسى أن تقوم بتبديل التسميات ذات اللون الأحمر بتسميات مدونتك والروابط ذات اللون الأخضر بروابط الأيقونات حسب تصنيف التسميات لديك

ولإضافة تسميات أخرى ماعليك سوي إضافة مثل هذا الكود قبل

</b:loop>

<b:if cond='data:label.name == &quot;5 التسمية &quot;'>

<span class="icocat"><img src="5 رابط الأيقونة " alt="description"/></span>
</b:if>

ملاحظة : يمكنك إختيار الأيقونات ذات الأبعاد 30*30 أو 50*50

والآن قم بالبحث عن هذا الكود :

]]></b:skin>

ثم ضع هذا الكود قبله ثم إحفظ القالب

.icocat img{padding: 0; float: right; border: none; margin: 0 10px 10px 0;}

أتمنى أن تكونوا قد إستفدتم من هذا الدرس ، ولأي إستفسار المرجوا ترك تعليقك