إضافة نبذة عن الكاتب أسفل الموضوع بطريقة مميزة





بسم الله الرحمان الرحيم

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

و هذه الصورة تشرح الطريقة التي ستظهر فيها
 

الشرح

ملاحظة : إذا كنت مبتدأ يفظل أن تحفظ نسخة من قالب المدونة لتفادي الخطأ

أذهب لوحة التحكم ثم إلى تصميم ثم تحرير HTML  ، ثم أضغط علي خانة توسيع القوالب فوق قالب الhtml

التركيب يتكون من مرحلتان

المرحلة الأولي :
أبحث عن   ]]></b:skin>      ثم ضع قبله الكود التالي :

/* Author Bio */
.postauthor {
    background: #F5F5F5; 
    border-top: 1px solid #e1e1e0; 
    border-bottom: 1px solid #e1e1e0; 
    overflow: hidden; 
    padding: 0.7em;
}
.postauthor img {
    border: 5px solid #e2dede; 
    float: right; 
    margin-left: 1em;
}
.postauthor h3 {
    color: #666; 
    font-size: 1.2em; 
    margin-bottom: 5px; 
    margin-top: 0;
}
.postauthor p {
    color: #515151; 
    font-size: 12px; 
    margin-bottom: 10px;
    margin-top: 0;
}
/* Author Bio End */

المرحلة الثانية :
  ابحث عن        <data:post.body/>
"إذا وجدت إثنان فالثاني هو ما نبحث عنه "
وبعده ضع مباشرة الكود التالي مع التعديل عليه حسب رغبتك 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='postauthor'>
 <img alt='' height='80' src='رابط الصورة الشخصية' width='80'/>
 <h3>بقلم <a href='Blog Link'> اسم الكاتب </a></h3>
 <p> فقرة تضم نبذة عن الكاتب </p>
</div>
</b:if>

و أنتهينا أصبح بإمكان زائرك معرفتك

 ***في حالة وجود كاتبين أو أكثر***  

نتبع نفس ما جاء في المرحلة الأولي 
ثم نبحث عن كود <data:post.body/>
"إذا وجدت إثنان فالثاني هو ما نبحث عنه "

ثم ضع بعده الكود الآتي 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- تعريف الكاتب الأول -->
<b:if cond='data:post.author == &quot;أحمد&quot;'>
<div class='postauthor'>
   <img alt='' height='80' src='رابط الصورة الشخصية' width='80'/>
   <h3>بقلم <a href='Blog Link'> القعقاع بن عمرو </a></h3>
   <p> فقرة تضم نبذة عن القعقاع</p>
 </div>
</b:if>
<!-- تعريف الكاتب الثاني -->
<b:if cond='data:post.author == &quot;جواد&quot;'>
<div class='postauthor'>
   <img alt='' height='80' src='رابط الصورة الشخصية' width='80'/>
   <h3>بقلم <a href='Blog Link'> خالد بن الوليد </a></h3>
   <p> فقرة تضم نبذة عن خالد </p>
 </div>
</b:if>

</b:if>
وه هكذا فدواليك تعدل علي ما جاء باللون الأحمر ، و أنا حاضر دوما للإجابة علي تساؤلاتم

تعليقات

  1. الله يبارك
    تسمحلي بسؤال : نقدر نبدل لون الخلفية ؟

    ردحذف
  2. نعم أخي تستطيع ، فقط عدل علي
    #F5F5F5
    أو
    #e1e1e0
    أو
    #e1e1e0

    ردحذف
مرحب بك للتعليق و مشاركة رأيك

التسميات

أخبار ، news إدارة الإجهاد في العمل أدسنس أدوات أرخص إشتراك مدفوع إصلاح خطأ إضافات بلوجر أفضل أفضل 10 أفضل 4 أفضل 5 أفضل 7 إكس أكواد أكواد الألوان الإسلام البحث عن وظائف البحث عن وظيفة البرامج التسويق بالعمولة التصميم التصوير التصوير الاحترافي الجزائر الحماية الذكاء الاصطناعي، تطبيقات ،أندرويد ،الآيفون الربح من الانترنت الربح من النت الشراء عبر الإنترنت في الجزائر العمل العمل والتوظيف ألوان الوان أندرويد إيثريوم أيردروب بايبال بايبال، ماستر كارد،فيزا،تفعيل،paypal بدون رأس مال بلوجر بيتس ستوديو 3 بيتس ستوديو برو بيتكوين تبادل إعلاني تخفيضات،كوبون،شراء،ربح تدوينة تطيقات تعيين مستشار وظيفي تواصل اجتماعي توظيف توظيفـ، سيرة ذاتية تويتر جي كويرى حد إدخال الأحرف حد إدخال الأحرف في ChatGPT حساب حساب فاتورة الكهرباء خطأ خطأ 740 على ويندوز خطأ ويندوز دراسة دروس بلوجر ر ربح ساعة سكربتات مواقع سلسلة كيف تربح من مدونتك سوناطراك شرح شرح بالفيديو شركات استضافة شركات استضافة مواقع صور طرق طريقة طريقة إصلاح عام 2023 عامل مستقل عملات غوغل فاتورة الكهرباء فايس بوك فوركس في فيديوهات ترفيه فيس بوك قابلة للطي قوالبي كاميرا كانفا كتب تعليمية كسب المال كمبيوتر كيفية الشراء من Aliexpress ليتكوين مجانيات محفظة مراجعة مسابقات مستشار وظيفي مشاكل بلوجر مشكلة مشكلة ChatGPT مُصور مُصور هاوٍ مصورًا محترفًا مقارنة مقارنة،هواوي،آبل،آيباد إير مقالات منصات منوعات مواقع نتفليكس نصائح نصاب هاوٍ هواتف هواتف قابلة للطي هواوي واتش 4 برو وظيفة وورد بريس ويندوز ويندوز 10 ويندوز 11 يوجوف Aliexpress bitsler Chatgpt ChatGPT Plus fiverr GPT-4 HTML jQuery youtube

نموذج الاتصال

إرسال