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

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

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

معاينة 

صورة للإضافة

شرح التركيب

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

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

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

  

    

      

        

          
          
wdbloog
          خبرتى فى لغات البرمجه
        
        

          

            

              85%
              HTML
            
            

              90%
              CSS
            
          
            

              85%
              Web-Design
            
          
            

              98%
              Animation
            
        
            

              52%
              Javascript
            
        
            

              10%
              PHP
            
                      
          
        
      
    
  

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

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

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