كارت تعريفي بالمدون

كارت تعريفي بالمدون

المعاينات والمرفقات

 من المهم لدى البعض التعريف عن أنفسهم كمدونين وعدم الإكتفاء فقط بالتعريف بالمدونة خصوصاً لأصحاب المدونات الشخصية والمدونات التي تحمل أسمائهم , يمكنك الاكيد التعريف عن نفسك بطرق متعدده لكن ان اردت شئ بسيط يسهل عرضه كارت بسيط مختصر يعطي مقدمة عنك واهم ما تقدمه فهذه الإضافة ستكون الخيار المناسب

كارت تعريفي بالمدون

تعتمد الإضافة على مكتبة Fontawesome

أضف الكود في صفحة أو موضوع أو آداة HTML/JavaScript


<style>
#whoami{position:relative;background-color:#fff;border:1px solid rgba(0,0,0,.05);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:20px;justify-content:center;align-items:center;box-shadow:0 2px 4px rgba(0,0,0,.1);margin:5px auto;box-sizing:border-box;max-width:800px;width:98%;}
#whoami > img{border-radius:50%;display:block;width:200px;height:200px;object-fit:contain;padding:3px;background-color:#fff;box-shadow:0 2px 2px rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.1);}
#whoami > h5{font-size:24px;margin:0;padding:0;}
#whoami > p{background-color:rgba(0,0,0,.03);padding:15px;border-radius:10px;text-align:center;}
#whoami > b{font-size:18px;padding:0 20px;height:40px;line-height:40px;border-radius:50px;min-width:120px;text-align:center;background-color:#222;color:#fff;}
#whoami > div{display:flex;gap:10px;flex-wrap:wrap;}
#whoami > div > a{height:40px;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:navajowhite;color:#fff;border-radius:50%;width:40px;}
#whoami > div > a:nth-child(1){background-color:#395498;}
#whoami > div > a:nth-child(2){background-color:#C61F1E;}
#whoami > div > a:nth-child(3){background-color:#4295D4;}
</style>

<div id="whoami">
<img src="img-url" />  
  <h5>اسم الكاتب</h5>  
  <p>نبذة عن الكاتب</p>
 <b>تابعني</b>
  <div>
  <!--روابط السوشيال ميديا-->
    <a href="#" aria-label="facebook" rel="nofollow noopener" target="_blank" ><i class="fa-brands fa-facebook-f"></i></a>
    <a href="#" aria-label="Youtube" rel="nofollow noopener" target="_blank" ><i class="fa-brands fa-youtube"></i></a>
    <a href="#" aria-label="Paypal" rel="nofollow noopener" target="_blank" ><i class="fa-brands fa-paypal"></i></a>
  </div>
</div>

إعدادات الكود

عدل img-url برابط الصورة

عدل البيانات التي باللغة العربية

 المواقع الإجتماعية كل سطر يعبر عن موقع اجتماعي أو أيقونة هذا شرح السطر لتتعامل معه


<!--رمز # يستبدل بالرابط-->
<a href="#" aria-label="facebook" rel="nofollow noopener" target="_blank" >
<!--هذا السطر كود الأيقونة-->
<i class="fa-brands fa-facebook-f"></i>
</a>

 مظهر الأيقونات

 بداية من هذا السطر

find#whoami > div > a:nth-child(1){background-color:#395498;} 

 هي الوان الأيقونات عدل اللون لكل أيقونة والترتيب الخاص بها هذا السطر يحمل رقم (1) أي انه لون أول ايقونة يمكنك تعديل الألوان او زيادة الروابط والأيقونات

هذا أحدث موضوع

للإستفسار أو شراء المنتج عبر

بايبال أو فودافون كاش

يرجى الطلب عبر النموذج التالي

تعليقات

2

شاركنا برأيك حول الإضافة ,
أو لو لديك اقتراح أو استفسار عنها أو تواجه مشكلة في استخدامها اترك تعليق وسيتم الرد عليك في أقرب وقت.

  1. أجمل كارت تعريفي ✅
    مهم جدا لمن لديه سيرة ذاتية على مدونته يمكن الاستعانة بهذه الاضافة الاحترافية 💚
    جزاك الله خيرا شيخنا صاحب القلب الابيض 🌙
    رزقك الله الفردوس يارب العالمين 🤲

    ردحذف
    الردود
    1. دائماً تشجيع ودعم شكراً لك اخي الحبيب🌹
      يسرني أن الإضافة نالت استحسانك

      حذف

الصفحات