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

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

تعتمد الإضافة على مكتبة 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) أي انه لون أول ايقونة يمكنك تعديل الألوان او زيادة الروابط والأيقونات

• 💢
• معاينة

عمرو مصطفى

مدون ومطور واجهات أمامية , متخصص في منصة بلوجر وتجاوزت خبرتي في المنصة الـ 12 سنة أقدم خدمات تطوير وقوالب منصة بلوجر والدروس والشروحات التي تساعد المدونين

تابعني