Cara Membuat Animasi Skill Bar Di Blog Dengan HTML dan CSS
Monday, December 31, 2018
2 Comments
Cara Membuat Skill Bar dengan HTML, CSS di Blog – Pada awalnya saya membuat skill bar di about admin marzep.com. dan ada teman saya yang sama sama blogger bertanya ke saya. Bagaimana cara membuat animasi skill bar seperti di blog saya. Dan saya berniat dan membuatkan tutorialnya.
Skill bar itu bermacam – macam jenisnya, biasanya skill bar biasanya dipakai untuk memberikan statistik atau review pada suatu produk, kinerja perangkat, rating dan sebagainya pada website – website besar.
Nah, disini saya akan akan memberikanya cara membuat skill bar dengan html dan css dengan mudah. Sebagai blogger kita bisa membuat skill bar ini untuk statistic keahlian. Dengan simulasi skill bar ini pengunjung bisa tau kreativitas kita, karena di gambarkan di skill bar.
Jika tertarik membuatnya ikuti sampai selesai karena banyak pilihan skill bar yang saya buat. Okey… kita mulai saja tutorialnya cara membuat skill bar di blog.
Cara Membuat Animiasi Skill Bar di Blogger
Berikutlah beberapa style nya, anda bisa memilihnya mana yang menarik menurut anda.
Style 1
Copy semua code dibawah, kemudian paste di postingan untuk menampilkanya. Ingat di HTML buka di Compose
<div>
<h3><b>Keahlian</b></h3>
<ul class="keahlian">
<div>
<li class="marzephtml">HTML 90%</li>
</div>
<div>
<li class="marzepcss">CSS 80%</li>
</div>
<div>
<li class="marzepjs">Javascript 50%</li>
</div>
<div>
<li class="marzepphp">PHP 10%</li>
</div>
</ul>
</div>
<style scoped="" type="text/css"> .post-body h3{background:#fff;box-shadow:0 1px 6px rgba(32,33,36,.28);line-height:2em;border-radius:5px;color:#43ce8e;border-bottom:2px solid #43ce8e;font-family:'Google Sans',Tahoma,Sans-serif;text-transform:uppercase;font-weight:400;font-size:14px;margin:5px 0;padding:8px 15px}
.xabout{color:#07ACEC!important;border-bottom:3px solid #07ACEC!important}
ul.keahlian{padding:0}
.keahlian div{list-style:none;;margin-bottom:10px;font-size:12px;border-radius:20px;color:#fff;background:#EAEAEA}
.keahlian li{padding:5px 20px;border-radius:20px}
.marzephtml{background:#0091ea;width:90%}
.marzepcss{background:#009624;width:80%}
.marzepjs{background:#ef6c00;width:50%}
.marzepphp{background:#a30000;width:10%}
</style>
Berikut Adalah Hasilnya: DEMO
Style 2
progress:not(value){}
progress[value]{appearance:none;border:none;width:100%;height:20px;background-color:whiteSmoke;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.5) inset;color:royalblue;position:relative;margin:0 0 1.5em}
progress[value]::-webkit-progress-bar{background-color:whiteSmoke;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.5) inset}
progress[value]::-webkit-progress-value{position:relative;background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;animation:animate-stripes 5s linear infinite}
@keyframes animate-stripes{100%{background-position:-100px 0}}
progress[value]::-webkit-progress-value:after{content:'';position:absolute;width:5px;height:5px;top:7px;right:7px;background-color:white;border-radius:100%}
progress[value]::-moz-progress-bar{background-image:-moz-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient( left,#09c,#f44);background-size:35px 20px,100% 100%,100% 100%;border-radius:3px}
.progress-bar{background-color:whiteSmoke;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.5) inset;width:100%;height:20px}
.progress-bar span{background-color:royalblue;border-radius:3px;display:block;text-indent:-9999px}
p[data-value]{position:relative}
p[data-value]:after{content:attr(data-value) '%';position:absolute;right:0}
.html5::-webkit-progress-value,.python::-webkit-progress-value{background-image:-webkit-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-webkit-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-webkit-linear-gradient( left,#09c,#f44)}
.css3::-webkit-progress-value,.php::-webkit-progress-value{background-image:-webkit-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-webkit-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-webkit-linear-gradient( left,#09c,#ff0)}
.jquery::-webkit-progress-value,.node-js::-webkit-progress-value{background-image:-webkit-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-webkit-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-webkit-linear-gradient( left,#09c,#690)}
.html5::-moz-progress-bar,.php::-moz-progress-bar{/* Gradient background with Stripes */
background-image:-moz-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient( left,#09c,#f44)}
.css3::-moz-progress-bar,.php::-moz-progress-bar{{background-image:-moz-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient( left,#09c,#ff0)}
.jquery::-moz-progress-bar,.node-js::-moz-progress-bar{background-image:-moz-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient( left,#09c,#690)}
HTML
<ul>
<li>
<h2>Coding</h2>
<p style="width:80%" data-value="80">HTML5</p>
<progress max="100" value="80" class="html5">
<div class="progress-bar">
<span style="width: 80%">80%</span>
</div>
</progress>
<p style="width:60%" data-value="60">CSS3</p>
<progress max="100" value="60" class="css3">
<div class="progress-bar">
<span style="width: 60%">60%</span>
</div>
</progress>
<p style="width:50%" data-value="50">jQuery</p>
<progress max="100" value="50" class="jquery">
<div class="progress-bar">
<span style="width: 50%">50%</span>
</div>
</progress>
</li>
<li>
<h2>Olahraga</h2>
<p style="width:75%" data-value="75">Lari</p>
<progress max="100" value="75" class="python">
<div class="progress-bar">
<span style="width: 75%">75%</span>
</div>
</progress>
<p style="width:65%" data-value="65">Sepak Bola</p>
<progress max="100" value="65" class="php">
<div class="progress-bar">
<span style="width: 65%">65%</span>
</div>
</progress>
<p style="width:35%" data-value="35">Bulutangkis</p>
<progress max="100" value="35" class="node-js">
<div class="progress-bar">
<span style="width: 35%">35%</span>
</div>
</progress>
</li>
</ul>
- Penempatan kode CSS bisa diterapkan didalam Template, lebih tepatnya diatas kode ]]></b:skin>.
- Atau jika ingin meletakkan CSS didalam artikel maka ubah mode penulisannya ke mode HTML terlebih dahulu, lalu buatlah <style> dan </style>. Letakkan kode CSS nya diantara kode <style> dan </style>
- Sedangkan untuk penempatan kode HTML diletakkan didalam artikel dengan mode HTML (bukan compose).
Hasilnya:
Coding
HTML5CSS3jQueryOlahraga
LariSepak BolaBulutangkis
Style 3
.skillst2 {width:100%;color:#fff;}
.skillst2 .skillbar{width:100%;height:40px;position:relative;margin-bottom:5px;}
.skillst2 .count-bar{height:100%;width:0px;position:relative;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.skillst2 .count-bar.color-1{background-color:#338ae7;}
.skillst2 .count-bar.color-2{background-color:#fe871f;}
.skillst2 .count-bar.color-3{background-color:#bd5cb9;}
.skillst2 .count-bar.color-4{background-color:#2d7da5;}
.skillst2 .count-bar.color-5{background-color:#f75d41;}
.skillst2 .title{font-size:14px;font-weight:400;padding-left:12px;line-height:40px;text-transform:uppercase;}
.skillst2 .count{position:absolute;top:0;right:12px;line-height:40px;font-size:14px;font-weight:400;}
HTML
<div class="skillst2">
<div class="skillbar">
<div class="count-bar color-1" style="width: 65%;">
<div class="title">HTML 5</div>
<div class="count"><span>65%</span></div>
</div>
</div>
<div class="skillbar">
<div class="count-bar color-2" style="width: 79%;">
<div class="title">CSS 3</div>
<div class="count"><span>79%</span></div>
</div>
</div>
<div class="skillbar">
<div class="count-bar color-3" style="width: 95%;">
<div class="title">jQuery</div>
<div class="count"><span>95%</span></div>
</div>
</div>
<div class="skillbar">
<div class="count-bar color-4" style="width: 70%;">
<div class="title">PHP</div>
<div class="count"><span>70%</span></div>
</div>
</div>
<div class="skillbar">
<div class="count-bar color-5" style="width: 70%;">
<div class="title">SEO</div>
<div class="count"><span>70%</span></div>
</div>
</div>
</div>
- Penempatan kode CSS bisa diterapkan didalam Template, lebih tepatnya diatas kode ]]></b:skin>.
- Atau jika ingin meletakkan CSS didalam artikel maka ubah mode penulisannya ke mode HTML terlebih dahulu, lalu buatlah <style> dan </style>. Letakkan kode CSS nya diantara kode <style> dan </style>
- Sedangkan untuk penempatan kode HTML diletakkan didalam artikel dengan mode HTML (bukan compose).
Jadi itulah animasi skill bar yang bisa anda pilih dan pasang di blog anda
Penutup
Demikian cara membuat skill bar pada blog, Semoga bermanfaat.
Informasi yang berkualitas, karena panduan ini yang sedang saya cari-cari. Terima kasih min
ReplyDeleteSama sama gan, semoga bermanfaat bagi saya dan semua orang
Delete