إضافة صورة و تعريف كاتب الموضوع لمدونات بلوجر
السلام عليكم ورحمة الله وبركاتهفي هذه التدوينة الجديدة من سلسلة دروس البلوجر سوف نتعرف على طريقة إضافة تعريف للكاتب أسفل موضوع مع صورة شخصية أيضا بشكل يجعل من القارئ لتدوينتك يأخد فكرة عنك عن قريب .
طبعا قد تكون في مدونة معينة مجموعة من الكتاب ، لهذا سوف أشرح في هذا الدرس طريقة إضافة تعريف كاتب الموضوع بالنسبة للمدونات الشخصية ، والمدونات ذات كتاب كثر .
بالنسبة للمدونات الشخصية كل ماعليك فعله هو الذهاب إلى لوحة تحكم مدونتك والضغط على قالب ثم تحرير html ، وتضغط في الكيبورد على ctrl+f ثم تضع العلامة على خانة توسيع القوالب وتقوم بالبحث عن هذا الكود
]]></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 == "item"’>
<div class=’postauthor’>
<img alt=” height=’80’ src=’رابط الصورة الشخصية‘ width=’80’/>
<h3>بقلم <a href=’Blog Link’> اسم الكاتب </a></h3>
<p> فقرة تضم نبذة عن الكاتب </p>
</div>
</b:if>
____๑۩۞۩๑๑۩۞๑۩۞۩๑๑۩۞۩๑۩۞۩۩۞۩۩๑۩۞۩۩۞۩๑____
بعد إضافته قم بتغيير ما باللون الأخضر برابط صورتك الشخصية ، وإسم الكاتب ، وفي الأخير نبذة عنك أنت شخصيا ككاتب للتدوينة.
في الأخير قم بحفظ التغييرات ومبروك عليك الإضافة
______________________
*هذا بالنسبة للمدونة التي تحتوي على كاتب واحد ، أما إذا كانت مدونتك بها كتاب كثر فتابع معي كيف تقوم بإضافة هاته الخاصية
أولا تقوم بالخطوة الأولى كما شرحنا في الأول بإضافة الكود الأول قبل ]]></b:skin> .(شاهد المثال الأول )
* ثم كمرحلة ثانية تقوم بالبحث عن هذا الكود مباشرة (إن وجدت إثنين فالثاني هو المقصود)
<data:post.body/>
ثم بعده مباشرة أضف هذا الكود
____๑۩۞۩๑๑۩۞๑۩۞۩๑๑۩۞۩๑۩۞۩۩۞۩۩๑۩۞۩۩۞۩๑____
<b:if cond=’data:blog.pageType == "item"’> <!– تعريف الكاتب الأول –> <b:if cond=’data:post.author == "أحمد"’> <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 == "جواد"’> <div class=’postauthor’> <img alt=” height=’80’ src=’رابط الصورة الشخصية‘ width=’80’/> <h3>بقلم <a href=’Blog Link’> إسم الكاتب الثاني</a></h3> <p> فقرة تضم نبذة عن الكاتب الثاني </p> </div> </b:if> </b:if>
____๑۩۞۩๑๑۩۞๑۩۞۩๑๑۩۞۩๑۩۞۩۩۞۩۩๑۩۞۩۩۞۩๑____
ملاحظة : كرر كود تعريف الكاتب الثاني إن كنتم أكثر من كاتبين
*في الأخير وقبل حفظ التغييرات غير ما باللون الأخضر إلى معلومات الكاتب الأول والثاني …
