اضافة صندوق تعريف الكاتب لمدونات بلوجر بشكل احترافي

 السلام عليكم ورحمة الله وبركاته

اليوم سنشرح كيف يمكن اضافة صندوق تعريف الكاتب لمدونات بلوجر
معاينة الاضافة


كما نري في الصوره المرفقه
صورة الكاتب
اسم الكاتب
وصف عن الكاتب
شرائط تفاعليه تعرض مهارات الكاتب

طريقة تركيب الاضافة
اولا
- Ctrl+F للبحث من جديد عن الكود التالي: داخل اكواد قالبك

في قالب بلوجر

 

      
      
      <data:post.body/>
   
  

      

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

بعد إيجادكم للكود اضيفوا تحته مباشرة الكود التالي:

HTML

      
      
<div class="author-skills-container">
  <div class="author-info">
    <div class="author-image">
      <img src="URL_الصورة" alt="Author Image">
    </div>
    <div>
      <h3>اسم الكاتب</h3>
      <p>وصف مختصر عن الكاتب. يمكن أن يحتوي هذا النص على معلومات عن اهتمامات الكاتب أو خلفيته المهنية.</p>
    </div>
  </div>
  <h2>مهارات البرمجة</h2>
  <div class="skills-row">
    <div class="skill">
      <div class="progress">
        <div class="progress-bar" style="width: 85%;">
          <span>JavaScript 85%</span>
        </div>
      </div>
    </div>
    <div class="skill">
      <div class="progress">
        <div class="progress-bar" style="width: 95%;">
          <span>HTML 95%</span>
        </div>
      </div>
    </div>
  </div>
  <div class="skills-row">
    <div class="skill">
      <div class="progress">
        <div class="progress-bar" style="width: 90%;">
          <span>CSS 90%</span>
        </div>
      </div>
    </div>
    <div class="skill">
      <div class="progress">
        <div class="progress-bar" style="width: 75%;">
          <span>Python 75%</span>
        </div>
      </div>
    </div>
  </div>
  <div class="skills-row">
    <div class="skill">
      <div class="progress">
        <div class="progress-bar" style="width: 70%;">
          <span>C# 70%</span>
        </div>
      </div>
    </div>
    <div class="skill">
      <div class="progress">
        <div class="progress-bar" style="width: 65%;">
          <span>C++ 65%</span>
        </div>
      </div>
    </div>
  </div>
  <div class="skills-row">
    <div class="skill">
      <div class="progress">
        <div class="progress-bar" style="width: 80%;">
          <span>Android SDK 80%</span>
        </div>
      </div>
    </div>
    <div class="skill">
      <div class="progress">
        <div class="progress-bar" style="width: 60%;">
          <span>اسم المهارة 60%</span>
        </div>
      </div>
    </div>
  </div>
</div>
  

مع تغيير البيانات لتناسب احتياجاتك ثانيا كود ال css نضعهة فوق الوسم

الوسم الذي ستبحث عنه

      ]]></b:skin>
  

اكواد ال 

css

CSS

      .author-skills-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.author-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.author-image {
  margin-right: 20px;
}
.author-image img {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 3px solid #ccc;
}
.author-info h3 {
  margin: 0;
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
}
.author-info p {
  margin: 5px 0;
  color: #777;
}
.skills-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.skill {
  width: 48%;
}
.progress {
  background-color: #ddd;
  border-radius: 5px;
  position: relative;
}
.progress-bar {
  height: 15px;
  border-radius: 5px;
  position: relative;
  background-color: #f1c40f; /* الافتراضي */
}
.progress-bar span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.8em;
  white-space: nowrap;
}
/* لون مخصص لكل مهارة */
.progress-bar.js { background-color: #f1c40f; } /* JavaScript */
.progress-bar.html { background-color: #e67e22; } /* HTML */
.progress-bar.css { background-color: #3498db; } /* CSS */
.progress-bar.python { background-color: #2ecc71; } /* Python */
.progress-bar.csharp { background-color: #9b59b6; } /* C# */
.progress-bar.cpp { background-color: #e74c3c; } /* C++ */
.progress-bar.android { background-color: #27ae60; } /* Android SDK */
  

و باتباع الخطوات السابقه تكون بحمدالله قد اضف الصندوق لمدونتك اسفل كل موضوع وان اردت تغيير مكان الاضافة انقل فقط اكواد ال HTML الخاصه بالاضافة كما ترغب في اي مكان هذه الاضافة من تصميم بلوجر فَيومي وارجوا ان ينال الموضوع اعجابكم ودمتم بخير