من المهم لدى البعض التعريف عن أنفسهم كمدونين وعدم الإكتفاء فقط بالتعريف بالمدونة خصوصاً لأصحاب المدونات الشخصية والمدونات التي تحمل أسمائهم , يمكنك الاكيد التعريف عن نفسك بطرق متعدده لكن ان اردت شئ بسيط يسهل عرضه كارت بسيط مختصر يعطي مقدمة عنك واهم ما تقدمه فهذه الإضافة ستكون الخيار المناسب
تعتمد الإضافة على مكتبة 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) أي انه لون أول ايقونة يمكنك تعديل الألوان او زيادة الروابط والأيقونات
- 💢
- معاينة
أجمل كارت تعريفي ✅
ردحذفمهم جدا لمن لديه سيرة ذاتية على مدونته يمكن الاستعانة بهذه الاضافة الاحترافية 💚
جزاك الله خيرا شيخنا صاحب القلب الابيض 🌙
رزقك الله الفردوس يارب العالمين 🤲
دائماً تشجيع ودعم شكراً لك اخي الحبيب🌹
حذفيسرني أن الإضافة نالت استحسانك