حصريا اضافة اداة خبراتي لمدونات بلوجر

الكاتب بتاريخ عدد التعليقات : 0

مرحبا بكم متابعين مدونتنا مهووسين الويب بأداة جديدة وجميلة ورائعة وحصرية على مدونة مهووسين الويب موضوع اليوم اضافة اداة خبراتي لمدونات بلوجر نأتي الان الى :
طريقة التركيب
ادخل لوحة التحكم ثم قالب 
ثم تحرير html 
ابحث عن </b:skin>
أضف الكود التالي قبله (فوقه)

#skills-wrapper{
width: 300px;
background:#fff;
padding:10px 10px 5px;
overflow: hidden;
margin: 0;
float:right;
box-shadow: 0 0 6px #C9C6C6;
}
#one-wrapper {
width: 100%;
overflow: hidden;
margin: 0 auto 13px;
clear:both;
}
.video-wrapper{float:left;background: #FFF;
padding: 10px;
overflow: hidden;
box-shadow: 0 0 6px #C9C6C6;
}
.video{
width: 355px;
height: 208px;
background: #222;
}
.profile-wrapper{float:right;width:476px;}
.profile {
background: #FFF;
padding: 10px;
overflow: hidden;
box-shadow: 0 0 6px #C9C6C6;
}
.profile .title {
color:#546278;
}
.profile img {
float:right;
margin: 0 0 0 10px ;
}
.profile p{
color: #939ea1;
}
.social_pr{width:100%;margin:0;padding:0;overflow:hidden;}
.social_pr ul{margin:0;padding:0;}
.social_pr ul li{
float: right;
width: 25%;
}

ثم بعدها اذهب الى تخطيط وقم باضافة اداة html جديده وضع الكود التالي
<div class="wow bounceInUp animated" id="skills-wrapper" style="visibility: visible;">
<div class="skillbar clearfix " data-percent="100%">
<div class="skillbar-title" style="background: #33B5E5;">
<span>
                Photoshop
              </span>
</div>
<div class="skillbar-bar" style="width: 100%; background: rgb(51, 181, 229);"></div>
<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="width: 90%; background: rgb(247, 165, 59);"></div>
<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="width: 68%; background: rgb(136, 205, 42);"></div>
<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="width: 75%; background: rgb(61, 138, 206);"></div>
<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="width: 65%; background: rgb(100, 176, 131);"></div>
<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="width: 35%; background: rgb(250, 110, 110);"></div>
<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="width: 45%; background: rgb(159, 93, 193);"></div>
<div class="skill-bar-percent">
              45%
            </div>
</div>
</div>
والى هنا يكون قد انتهى درسنا الى اليوم وانشاء الله نلتقي بدرس جديد في يوم اخر والسلام عليكم و

0 تعليق على موضوع " حصريا اضافة اداة خبراتي لمدونات بلوجر "

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء