Cara Membuat Animasi Skill Bar Di Blog Dengan HTML dan CSS -Marzep Design

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.

Cara Membuat Animasi Skill Bar Di Blog Dengan HTML dan CSS

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.

2 Responses to "Cara Membuat Animasi Skill Bar Di Blog Dengan HTML dan CSS"

  1. Informasi yang berkualitas, karena panduan ini yang sedang saya cari-cari. Terima kasih min

    ReplyDelete
    Replies
    1. Sama sama gan, semoga bermanfaat bagi saya dan semua orang

      Delete

Note :
- Di larang pasang link aktif di kolom komentar
- Komentar akan disetujui jika tidak mengandung promosi
- Komentar boleh menggunakan bahasa banjarmasin
- Dilarang komentar yang berisi pornografi
- Jangan harap komentar yang berisi link aktif akan disetujui

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel