إضافة خبرات المدون بشكل احترافي

Unknown

7:18 ص

6 تعليقات

شاركه غرد جوجل+

أهلا بكم زوار مدونة حلم ويب في تدوينة جديدة وهي ( إضافة خبرات المدون بشكل احترافي ) التدوينة حصرية اقدمها لكم لكي تستفيدو منها والاضافة بتأثيرات رائعة واحترافية وجميلة الكود منسق بشكل احترافي ومتجاوب 100 %  وبطريقة تركيب سهلة

معاينة الاضافة مباشرتا و بالصورة

معاينة مباشرة

معاينة بالصورة

ملاحظة : المعاينة التي بالصورة افضل من المعاينة المباشرة لأن القالب الذي وضعة فيه المعاينة تم اختصار الكود الخاص بها

الان اليكم طريقة التركيب :

1. اذهب الى التخطيط .
2. اختار اداة جافا سيكرة .
3. ضع بها الكود التالي :

<style>
#skills-ar1web{height: 210px;}
.skillbar {
position:relative;
display:block;
margin-bottom:5px;
width:100%;
background:#eee;
height:30px;
-webkit-transition:0.4s linear;
-moz-transition:0.4s linear;
-ms-transition:0.4s linear;
-o-transition:0.4s linear;
transition:0.4s linear;
-webkit-transition-property:width, background-color;
-moz-transition-property:width, background-color;
-ms-transition-property:width, background-color;
-o-transition-property:width, background-color;
transition-property:width, background-color;
}
.skillbar-title {
position:absolute;
top:0;
right:0;
font-weight:normal;
font-size:13px;
color:#fff;
background:#6adcfa;
}
.skillbar-title span {
display:block;
padding:0 20px;
height:30px;
line-height:30px;
}
.skillbar-bar {
height:30px;
width:0px;
background:#6adcfa;
}
.skill-bar-percent {
position:absolute;
left:10px;
top:0;
font-size:11px;
height:30px;
line-height:30px;
color:#fff;
color:rgba(0, 0, 0, 0.4);
}
</style>
 <div id='skills-ar1web'>
          <div class='skillbar clearfix ' data-percent='100%'>
            <div class='skillbar-title' style='background: #33B5E5;'>
              <span>
                Photoshop
              </span>
            </div>
            <div class='skillbar-bar' style='background: #33B5E5;'/>
            <div class='skill-bar-percent'>
              100%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='90%'>
            <div class='skillbar-title' style='background: #f7a53b;'>
              <span>
                Blogger
              </span>
            </div>
            <div class='skillbar-bar' style='background: #f7a53b;'/>
            <div class='skill-bar-percent'>
              90%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='68%'>
            <div class='skillbar-title' style='background: #88cd2a;'>
              <span>
                HTML5/CSS3
              </span>
            </div>
            <div class='skillbar-bar' style='background: #88cd2a;'/>
            <div class='skill-bar-percent'>
              68%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='75%'>
            <div class='skillbar-title' style='background: #3D8ACE;'>
              <span>
                WordPress
              </span>
            </div>
            <div class='skillbar-bar' style='background: #3D8ACE;'/>
            <div class='skill-bar-percent'>
              75%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='65%'>
            <div class='skillbar-title' style='background: #64B083;'>
              <span>
                JavaScript/Jquery
              </span>
            </div>
            <div class='skillbar-bar' style='background: #64B083;'/>
            <div class='skill-bar-percent'>
              65%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='35%'>
            <div class='skillbar-title' style='background: #fa6e6e;'>
              <span>
                illustrator
              </span>
            </div>
            <div class='skillbar-bar' style='background: #fa6e6e;'/>
            <div class='skill-bar-percent'>
              35%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='45%'>
            <div class='skillbar-title' style='background: #9F5DC1;'>
              <span>
                After Effects
              </span>
            </div>
            <div class='skillbar-bar' style='background: #9F5DC1;'/>
            <div class='skill-bar-percent'>
              45%
            </div>
          </div>
        </div></div></div></div></div></div></div></div>

اذا لم تعمل الاضافة بالشكل الذي في المعاينة اضف الكود التالي فوق  </head>

<script type='text/javascript'> jQuery(document).ready(function(){ jQuery(&#39;.skillbar&#39;).each(function(){ jQuery(this).find(&#39;.skillbar-bar&#39;).animate({ width:jQuery(this).attr(&#39;data-percent&#39;) },6000); }); }); </script> 

 الى هنا تكون تدوينتنا قد انتهت
نلتقي في تدوينة قريبة
في أمان الله