Cara Membuat Animasi Skill Bar Di Blog Dengan HTML dan CSS

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

  HTML5
  80%
  CSS3
  60%
  jQuery
  50%

• Olahraga

  Lari
  75%
  Sepak Bola
  65%
  Bulutangkis
  35%

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).

HTML 5

65%

CSS 3

79%

jQuery

95%

PHP

70%

SEO

70%

Jadi itulah animasi skill bar yang bisa anda pilih dan pasang di blog anda

Penutup

Demikian cara membuat skill bar pada blog, Semoga bermanfaat.

Share this post