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

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

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

هناك 25 تعليقًا:

  1. السلام عليكم يا ابو اياد

    انا عملت نفس خطواتك بس مظهرش عندي حاجه خالص

    ممكن اعرف اعمل ايه وممكن اعرف موقع للايقونات اللي اقدر احطها لاني عندي موقع ومش عارفه هتنفع ايقوناته ولا لا

    ردحذف
    الردود
    1. افتح مشاركة جديدة وضع الأيقونات اللتي تحتاج إليها وافتحها في صفحة جديدة وانسخ الرابط وضعه
      أو اكبس بالزر اليميني بالماوس واكتب copy image url
      وضعه مكان الروابط

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

    ردحذف
  3. اشكرك يا ابو اياد على ردك الكريم لكن للاسف انا جربت تاني ومظهرش عندي اي حاجه بردوا

    على العموم انا بشكرك مره اخرى

    ردحذف
  4. @Dr/ walaa salah
    ممكن تبعتين لي نسخة من قالب مدونتك لمعاينة المشكلة هذا هو بريدي الالكتروني

    camelion20051@hotmail.com

    ردحذف
  5. @Dr/ walaa salah
    لقد تم التعديل على قالبك بإضافة الأيقونات الخاصة بتسميات مدونتك ولقد تم إرسالها على البريد الإلكتروني

    ردحذف
  6. اشكرك يا ابو اياد وانا في انتظار الايميل ومعلشي تعبتك معايا

    ردحذف
  7. @Dr/ walaa salah
    لقد تم الإرسال أختي الكريمة ،ما عليك سوى إعادة تحميل القالب الجديد ،فعند معاينتك لمدونتك بعد تظبيق القالب الجديد سوف تجدين أن كل تسمية تم تخصيصها بأيقونة خاصة بها ،إلا أن أيقونات "السلطات " لن تظهر لأنك قمت بإعادة تسميتها ،ما عليك سوى أن تبحتي من قالبك على كلمة " سلطاااااااااااات " وتبديلها بتسمية " سلطات" لتظهر لك الأيقونة الخاصة بها
    تحياتي

    ردحذف
  8. لغاية دلوقتي مفيش اي رسائل جاءتني

    اول ما يجيلي هطبق كلامك ان شاء الله


    متشكره يا ابو اياد على تعبك معايا

    ردحذف
  9. جميل يا ابو اياد وصلني القالب والايقونات روووعه الله يكرمك

    متشكره اوي انا تعبتك معايا

    ردحذف
  10. عطاء12:46 ص

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

    هل من حل أجده عندك أخي ابو إياد .

    لك شكري وتقدير لتفاعلك وخدمتك

    رابط المدونة http://child-trng.blogspot.com/

    ردحذف
  11. @عطاء
    أخي الكريم لقد أرسلت لك الحل لهذه المشكلة على بريدك الالكتروني وذلك راجع لطول الموضوع ، موفق

    ردحذف
  12. عطاء1:15 ص

    كلكم أخواني .. المعذرة
    كل الشكر والتقدير لتفاعلك
    أخي الفاضل أبو إياد .. وتم الرد عن طريق الإيميل

    ردحذف
  13. .
    الفاضل أبو اياد جُزيت من الجنان أعلاها على ماتبذلونه ..

    للأسف أخي طبقتها لكن ماضبطت معي :(..

    مشكور أخي .

    ردحذف
  14. شكرا ابو اياد علي الموضوع الجميل

    :-t

    ردحذف
  15. ممتاز ابو أياد.

    ردحذف
  16. جزاااكم الله كل خير

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

    ردحذف
  18. السلام عليكم ورحمة الله وبركاته اريد شرح وضع ايقونات بجاب اسم اقسام المدونة كما في مدونك ولك لبلوجر ومثل مدونة حكمات للمعلوميات

    ردحذف
  19. شكرا جزيلا يا ابو اياد ومرحبا بكم فى موقعنا ودائما قى تقدم
    http://www.whitewestinghouse.net/

    ردحذف
  20. /http://phot-pro.blogspot.com
    ممكن معاينة للموقع و رايك فيه اخي مشكور جدا

    ردحذف
  21. السسلام عليكم وجزاك الله كل خير على هذا الشرح
    حاولت تطبيق ما شرحته لكن يبدو اني اخطأ في التطبيق او شيء ماغير صحيح عندي اريد ان اعمل مدونتي على هذا الشكل كما في الصورة
    وتطبيقه على هذا القالب
    الرجاء مساعدتي وشكرا جزيلا
    هذا رابط القوالب هما اثنان اي واحد لا مشكلة
    www.alwar4a.blogspot.com
    واريدها ان تصبح هكذا
    www.batdroid100.blogspot.com
    هذا ايميلي
    majed.aalkhedr88@gmail.com

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية