مساحة اعلانية

موضوع عشوائي

آخر المواضيع

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

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

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

  1. انضم لاعضاء المدونة من : هنا
  2. توجه الى لوحة تحكم بلوجر
  3. توجه الى التخطيط
  4. ثم ضع الكود التالي داخل اداة جديدة " Html/Javascript " في اي مكان تراه مناسبا
  5. 
    <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> 
    
    إلى هنا تكون تدوينتنا قد إنتهت نلتقي في تدوينة قريبة ، في أمان الله

الكــاتــب

هناك تعليق واحد:

جميع الحقوق محفوظة لــ فلاما للمعلوميات 2019 ©

بضغطة زر تدعمنا وتشارك الفائدة