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

[ahmed2]

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



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

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

<data:post.body/>

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

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

<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>

.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 الخاصه بالاضافة كما ترغب في اي مكان
هذه الاضافة من تصميم
بلوجر فَيومي وارجوا ان ينال الموضوع اعجابكم
ودمتم بخير

 

[فخم الطلة]

شكرا لك وبارك الله فيك ،،

 

[يشهب]

مبهجة و منظمة... شكراً على الكود الرائع
دمت بود؛

 

[المشاغب]

بارك الله فيك عمل ممتاز ومجهود جميل
وفقك الله

 

[Shamria]