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

الاثنين، 22 مايو، 2017

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

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


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


صورة للإضافة


شرح التركيب


  • قم أولا بالحث عن هذا الوسم]]></b:skin>ثم ضع فوقه الكو التالى


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


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


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

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


شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

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

هل ستنشر قالب مدونتك الحالي ؟!

شكرا ما هو اسم القالب الذي بالمعاينة وارجو الرد

بأذن الله أخى قريبا

هو قالب من تصميمى فقط أعرض عليه الإضافات

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر