إضافة التعريف بالكاتب بشكل جذاب وإحترافي على مدونة بلوجر

إضافة نبذة عن الكاتب  أو بما يعرف ب' about author'  أو' biography' إلى تدوينات منصة بلوجر من الإضافات التي تهم جل المدونين للتعريف بسيرتهم الذاتية ومؤهلاتهم العلمية فنجد  الكتاب والمدونين فى أشهر المواقع يقومون بتعريف أنفسهم

إضافة التعريف بالكاتب بشكل جذاب وإحترافي على مدونة بلوجر

في هذا الشرح  سنعمل على تركيب هذة الإضافة أسفل التدوينات بشكل جذاب وإحترافي

شكل الإضافة

aubout author

معاينة نموذج على مدونة

- الخطوة الأولى: نسجل الدخول إلى المدونة--- قالب ---- تحريرHTML
- الخطوة الثانية: نبحث عن  هذا الكود

]]></b:skin>

- الخطوة الثالثة: ننسخ الكود التالي فوق الكود الأول

/* Author Bio */ .post-author p:after{ content:"\f10d"; font-family:fontawesome; margin-right:4px} .post-author p:before{ content:"\f10e"; font-family:fontawesome; margin-left:4px} .post-author p{ padding:0 28px; font-size:15px; color:#f3f3f3; margin-top:4px; line-height:26px} .post-author h3{ font-size:23px; font-weight:100; color:white;} .post-author .author-img-fo{ width:100px; height:100px; text-align:center; border:2px solid #102c46; border-radius:8px; position:absolute; right:0; left:0; top:-50px; margin:auto} .post-author:before{ content:"\f10e"; font-family:fontawesome; margin-left:4px; position:absolute; right:20px; font-size:50px; top:14px; color:rgba(0,0,0,0.14)} .post-author:after{ content:"\f10d"; font-family:fontawesome; margin-right:4px; position:absolute; left:20px; font-size:50px; bottom:10px; color:rgba(0,0,0,0.14)} .post-author{ border:1px solid #eee; border-left:0; text-align:center; position:relative; border-right:0; padding:20px 0; background:#102c46; padding-top:64px; color:#fff; margin:42px auto; max-width:95%; border-radius:11px; margin-bottom:0} /* Author Bio End */

- الخطوة الرابعة: نبحث عن الكود الثاني غالبا يوجد منه من إثنان إلى ثلاثة على حسب قالبك أو نبحث الكود الأخر

<div class='post-footer'>

أو

<div class='post-footer-line post-footer-line-1'>

- الخطوة الخامسة : ننسخ الكود التالي أسفل الكود الثاني ونحفظ التغييرات

<div class='post-author'> <img class='author-img-fo' src='رابط الصورة'/> <div class='author-cont'> <h3> <span>بقلم :</span>الإسم</h3> <p> نبدة عن الكاتب </p> </div> </div>

* التعديل على الأكواد:
الكود الأول: يمكن تغيير فيه الألوان ونوع الخط على حسب مايناسبك مثلا لون الخلفية'#102c46 '
الكود الثاني:استبدال
                         - الإسم :بإسمك.
                         - نبدة عن الكاتب: تعريف بسيرتك الذاتية.
                         - رابط الصورة : برابط صورتك بعد رفعها على أخد مواقع رفع الصور

بهذا إنتهى الشرح أرجو إن أكون قد أفدتكم ولو بقليل

بقلمAbdel ben

مدون شغوف أعشق التدوين المعلوماتي ، والإطلاع على آخر مستجدات التقنية وعالم الأنترنت ..أقدم أخبارا تقنية أولا بأول في مجال الهواتف الذكية والشبكات الإجتماعية

شارك الموضوع

مواضيع قد تهمك