Membuat Animasi Skill Bar Responsive

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
Previous
Next Post »

24 komentar

Click here for komentar
December 28, 2014 at 12:23 AM

keren gan, ane coba ntar :D

Reply
avatar
December 28, 2014 at 3:41 PM

Bagus nih, cook banget buat di pasang di halaman about me / tentang saya :-d

Reply
avatar
Shut Oke
admin
December 29, 2014 at 12:54 AM

responsive lagi coba dulu

Reply
avatar
December 29, 2014 at 2:16 AM

Mantap Bro.. Ijin Nyoba nih..
Salam dari Saya Syahil

Reply
avatar
Ahmad Aulia
admin
December 29, 2014 at 11:15 PM

Ane coba nanti gan,sip :)

Reply
avatar
December 30, 2014 at 12:03 AM

manteepp ane coba dulu gan.. :D

Reply
avatar
January 1, 2015 at 3:14 AM

makasih atas kunjungan, dan semoga bermanfaat

Reply
avatar
January 1, 2015 at 3:15 AM

emang cocok mas, buat nambah daya tarik about me

Reply
avatar
January 1, 2015 at 3:15 AM

iya biar gak berefek banyak ke blog

Reply
avatar
January 2, 2015 at 4:21 AM

keren ni bro css htmlnya mantap sering sering share ginian

Reply
avatar
January 2, 2015 at 10:37 PM

keren tapi designnya terlalu kaku bro..

Reply
avatar
Udhy
admin
January 3, 2015 at 9:37 AM

keren gan, ane mau coba ahhh di blog ane

Reply
avatar
Catalyst
admin
January 12, 2015 at 12:05 AM

Keren nih Gan . Ijin Coba ya ...

Reply
avatar
kang herman
admin
January 12, 2015 at 1:23 AM

keren gan, ane mau coba dulu..
dan thanks udah mau share

Reply
avatar
January 13, 2015 at 5:58 AM

jadi pengen nyobain nih :D
nice article (y)

Reply
avatar
January 15, 2015 at 6:56 PM

keren nih bisa di coba buat nambahin skill :D

Reply
avatar
January 18, 2015 at 2:36 AM

wah kyaknya keren nih gan :D

Reply
avatar
Thanks for your comment