أعلان الهيدر

الجمعة، 17 فبراير 2012

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

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


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


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


انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحرير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;}
أتمنى أن تكونوا قد إستفدتم من هذا الدرس ، ولأي إستفسار المرجوا ترك تعليقك

ليست هناك تعليقات:

إرسال تعليق

حريّة الرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة.
تذكّر قول الله عز وجل (ما يلفظ من قول إلا لديه رقيب عتيد).

يتم التشغيل بواسطة Blogger.