اضافة بطاقة تعريفية لخبرتك فى البرمجه لمدونات بلوجر

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

معاينة الإضافة

معاينة 

صورة للإضافة

شرح التركيب

• قم أولا بالحث عن هذا الوسمكود هناثم ضع فوقه الكو التالى

.profile{width:100%;box-shadow:0 2px 20px 1px rgba(0,0,0,.14),0 1px 20px 0 rgba(0,0,0,.12),0 3px 10px -2px rgba(0,0,0,.2);padding:8rem 0 0;background-color:#fff;position:relative;overflow:hidden;box-sizing:border-box}
.profile:before{content:"";width:85px;height:50px;transition:transform .5s cubic-bezier(0.42,0.04,0.13,0.92);border-radius:50%;background-color:#7B1FA2;position:absolute;top:-4rem;left:50%;transform:translateX(-50%) scale(7)}
.profile:hover:before{transition:transform .7s cubic-bezier(0.66,0.09,0,1.31)}
.profile:hover:before{transform:translateX(-50%) translateY(200%) scale(25)}
.profile:hover,.profile:hover .profile__value{color:#fff}
.profile:hover .profile__group,.profile:hover .profile__avatar,.profile:hover .profile__social{border-color:#fff}
.profile:hover .profile__row{background-color:#690394}
.profile__header{text-align:center;position:relative;z-index:2}
.profile__avatar{border-radius:50%;width:14rem;height:14rem;border:6px solid #7B1FA2;transition:border-color .4s ease-out .1s}
.profile:hover .profile__avatar{transition:border-color .4s ease-out .2s}
.profile__name{margin-top:1rem;margin-bottom:0;font-size:3.5rem;transition:color .4s ease-out .1s}
.profile__post{display:block;font-size:1.8rem;transition:color .4s ease-out .1s}
.profile__body{margin-top:4rem;margin-bottom:0}
.profile__row{display:flex;justify-content:flex-start;flex-wrap:wrap;background-color:#f0f0f0;padding-top:3rem;padding-bottom:3rem;position:relative;z-index:2;transition:background-color .4s ease-out .1s}
.profile:hover .profile__row{transition:background-color .4s ease-out .2s}
.profile__group{box-sizing:border-box;width:33.3333333%;margin-top:4rem;transition:border-color .4s ease-out .1s;border-left: 1px solid #BDBDBD;padding-left:2%;padding-right:2%;text-align:center}
profile:hover .profile__group{transition:border-color .4s ease-out .4s}
.profile__group:nth-child(1),.profile__group:nth-child(2),.profile__group:nth-child(3){margin-top:0}
.profile__group:nth-child(3n+3){border-right:none}
.profile__param,.profile__value{display:block;transition:color .4s ease-out .1s}
.profile__param{text-transform:uppercase;margin-top:.2rem}
.profile__value{font-size:45px;color:#7B1FA2;font-weight:700}
.profile__footer{padding-bottom:3rem;display:none;justify-content:center;align-items:center}
.cssui-icon{width:var(--cssuiIconSize,2em);height:var(--cssuiIconSize,2em);display:inline-block;background-repeat:no-repeat;background-position:50% 50%;background-size:contain}
.profile__social{border:2px solid #7B1FA2;border-radius:50%;margin-left:.8rem;margin-right:.8rem;padding:1rem;font-size:.8rem;position:relative;z-index:2}
.profile__social:hover{background-color:#7B1FA2}
.cssui-social{display:inline-flex;position:relative}
.cssui-social__name{position:absolute;left:-9999px}

• الأن قم بحفظ القالب وأنتقل الى التخطيط فى مدونتك .
• قم بأضافة اداة جديده فى السيدبار وضع بها الكود التالى .

<div class="page">
  <div class="demo">
    <div class="main-container">
      <article class="profile">
        <header class="profile__header">
          <img src="https://stas-melnikov.ru/cliparts/stas.jpg" class="profile__avatar" alt="avatar of Stas Melnikov" />
          <h3 class="profile__name">wdbloog</h3>
          <span class="profile__post">خبرتى فى لغات البرمجه</span>
        </header>
        <div class="profile__body">
          <div class="profile__row">
            <div class="profile__group">
              <span class="profile__value">85%</span>
              <span class="profile__param">HTML</span>
            </div>
            <div class="profile__group">
              <span class="profile__value">90%</span>
              <span class="profile__param">CSS</span>
            </div>          
            <div class="profile__group">
              <span class="profile__value">85%</span>
              <span class="profile__param">Web-Design</span>
            </div>          
            <div class="profile__group">
              <span class="profile__value">98%</span>
              <span class="profile__param">Animation</span>
            </div>        
            <div class="profile__group">
              <span class="profile__value">52%</span>
              <span class="profile__param">Javascript</span>
            </div>        
            <div class="profile__group">
              <span class="profile__value">10%</span>
              <span class="profile__param">PHP</span>
            </div>                      
          </div>
        </div>
      </article>
    </div>
  </div>
</div>

• الأن قم بتعديل ما تريده فى الكود 
• وقم بحفظ الإضافة ومبروك عليك

وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله

المصدر عالم المدون