حصريا اضافة اداة خبراتي لمدونات بلوجر مجاناً
السلام عليكم ورحمة الله وبركاته درس جديد عن كيفية اضافة اداة خبراتي لمدونات بلوجر
هذا الموضوع حصري بمدونة علي نائل
اولاً
ثم اضف الكود التالي بعد </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>
ونرجوا عند النقل ذكر المصدر تقديرا للمجهود فلا اعتقد انك تقبل بان ينقل موضوع لك بدون ان يذكر المصدر وشكرا
المصدر : مدونة علي نائل
