Membuat Animasi Skill Bar Responsive ~ Lubang Pengetahuan

Membuat Animasi Skill Bar Responsive - Ini adalah judul artikel tutorial terbaru yang akan bagikan, meskipun keadaan saya kurang baik karna sakit. karna bosan di rumah gak ada siapa! ( jangan di percaya). Karna Sedang asyik bongkar data di laptop keramat saya ini, saya menemukan tutorial yang sudah lama di berikan oleh teman saya. Oleh sebab itu saya akan akan saya bagikan juga kepada sobat semua tutorial ini.

Aminasi Skill Bar dapat membantu sobat untuk menunjukan kepada pengunjung blog sobat bagaimana Kemampuan yang sobat miliki, itu sebagai nilai plus buat blog sobat. Oke tampa basa basi lagi mari ikuti tutorial yang saya telah saya buat dan mudah sobat pahami .

Berikut Tahap Membuat Animasi Skill Bar

1. Masuk ke blogger
2. Masuk ke menu Template - Edit HTML
3. Cari kode ]]></b:skin> atau </style> dan copy kode di bawah ini tepat di atas nya


/* CSS Skill*/
body { background: #E9E5E2;margin:2%; }
#SkillBox {font-size: 20px;font-family: 'Indie Flower', cursive;width: 95%;height: auto;margin: 40px auto;background-color: #fff;//border: 1px solid #cdcdcd;padding: 10px;border-radius:20px;-o-border-radius:20px;-webkit-border-radius:20px;-ms-border-radius:20px;-moz-border-radius:20px;}
#SkillBox img {width: 20%;height: 10%;margin: auto 35%;padding: 10px;}
.SkillBar {width: 90%;height: 50px;position: relative;background: rgba(17, 17, 17, .3);margin: 20px auto;}
#Skill-HTML {width: 100%;animation: Animate-HTML 4s;-webkit-animation: Animate-HTML 4s;-moz-animation: Animate-HTML 4s-o-animation: Animate-HTML 4s;height: 50px;position: absolute;background-color: #ea8564;}
@keyframes Animate-HTML {from {width: 10px;}to {width: 100%}
}@-webkit-keyframes Animate-HTML {from {width: 10px;}to {width: 100%}
}@-moz-keyframes Animate-HTML {from {width: 10px;}to {width: 100%}
}@-o-keyframes Animate-HTML {from {width: 10px;}to {width: 100%}
}#Skill-CSS {animation: Animate-CSS 5s;-webkit-animation: Animate-CSS 5s;-moz-animation: Animate-CSS 5s;-o-animation: Animate-CSS 5s;width: 70%;height: 50px;position: absolute;background-color: #55a69f;}
@keyframes Animate-CSS {from {width: 10px;}to {width: 70%}
}@-webkit-keyframes Animate-CSS {from {width: 10px;}to {width: 70%}
}@-moz-keyframes Animate-CSS {from {width: 10px;}to {width: 70%}
}@-o-keyframes Animate-CSS {from {width: 10px;}to {width: 70%}
}#Skill-jQuery {animation: Animate-jQuery 5s;-webkit-animation: Animate-jQuery 5s;-moz-animation: Animate-jQuery 5s;-o-animation: Animate-jQuery 5s;width: 40%;height: 50px;position: absolute;background-color: #99856d;}
@keyframes Animate-jQuery {from {width: 10px;}to {width: 40%}
}@-webkit-keyframes Animate-jQuery {from { width: 10px;}to { width: 40%}
}@-moz-keyframes Animate-jQuery {from {width: 10px;}to {width: 40%}
}@-o-keyframes Animate-jQuery {from {width: 10px;}to {width: 40%}
}#Skill-JS {animation: Animate-JS 4s;-webkit-animation: Animate-JS 4s;-moz-animation: Animate-JS 4s;-o-animation: Animate-JS 4s;width: 65%;height: 50px;position: absolute;background-color: #c44e45;}
@keyframes Animate-JS {from {width: 10px;}to {width: 65%}
}@-webkit-keyframes Animate-JS {from {width: 10px;}to { width: 65%}
}@-moz-keyframes Animate-JS {from {width: 10px;}to {width: 65%}from {width: 10px;}to {width: 65%}
}#Skill-JAVA {animation: Animate-JAVA 4s;-webkit-animation: Animate-JAVA 4s;-moz-animation: Animate-JAVA 4s;-o-animation: Animate-JAVA 4s;width: 25%;height: 50px;position: absolute;background-color: #8e930c;}
@keyframes Animate-JAVA {from {width: 10px;}to {width: 25%}
}@-webkit-keyframes Animate-JAVA {from {width: 10px;}to {width: 25%}
}@-moz-keyframes Animate-JAVA {from {width: 10px;}to {width: 25%}
}@-o-keyframes Animate-JAVA {from {width: 10px;}to {width: 25%}
}#Skill-PHP {animation: Animate-PHP 4s;-webkit-animation: Animate-PHP 4s;-moz-animation: Animate-PHP 4s;-o-animation: Animate-PHP 4s;width: 50%;height: 50px; position: absolute;background-color: #5A69A6;}
@keyframes Animate-PHP {from {width: 10px;}to {width: 50%}
}@-webkit-keyframes Animate-PHP {from {width: 10px;}to {width: 50%}
}@-moz-keyframes Animate-PHP {from {width: 10px;}to {width: 50%}
}@-o-keyframes Animate-PHP {from {width: 10px;}to { width: 50%}
}.Skill-Area {z-index: 1;float: left;//position: absolute;margin-top: 15px;margin-left: 15px;text-shadow: none;color: #fff;//font-family: Lato-Regular, sans-serif; font-size: 18px;}
.PercentText {z-index:3;position: relative;padding-right: 15px; margin-top: 15px;float: right;text-shadow: none;color: #fff;//font-family: Lato-Regular, sans-serif;font-size: 18px;}

4. Setelah itu simpan template
5. Masuk ke laman dan buat halaman baru dan masukan code HTML yang ada di link ini

Kode HTML
click to view

Sekian tutorial Membuat Animasi Skill Bar Responsive, semoga bermanfaat dan kalo kurang paham silakan komentar di bawah