Cara Membuat Skill Bar dengan CSS3 - Style #1 - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Skill Bar dengan CSS3 - Style #1

Pilihan Editor :

Cara Membuat Skill Bar dengan CSS3 - Style #1
Penulis Bagus Surochman
3
Modus malam



KURAZONE ~ Cara Membuat Skill Bar dengan CSS3 - Style #1, seperti yang kita ketahui bahwa pembuatan skill bar ini biasanya dipakai untuk memberikan statistik atau review pada suatu produk, kinerja perangkat, rating dan sebagainya. Dikarenakan pembuatan Skill Bar ini menggunakan CSS3 maka akan ada beberapa style yang nantinya akan saya publikasi ulang dengan style yang berbeda. Nah, pada kesempatan kali ini saya akan membahas untuk style yang pertama. 

Hasil dari style pertama ini akan nampak seperti Skill Bar dibawah ini :
Contoh
40%
Contoh
55%
Contoh
95%

Pada umumnya, skill bar dirancang menggunakan javascript untuk memunculkan animasi pada progress skill bar, namun dalam skill bar kali ini kita tidak menggunakan javascript tersebut, yang kita perlukan hanyalah kombinasi dari HTML dan CSS saja. Sehingga kehadiran Skill Bar semacam ini tidak memberikan dampak yang besar pada kecepatan halaman blog. Nah, tertarik ingin membuat Skill Bar style pertama ini? Berikut adalah kode - kode dalam pembuatan Skill Bar Style 1 :
.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;}
<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>

Note :
  • 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).

Apabila kalian berhasil menerapkan kode Skill Bar style pertama ini, maka hasilnya akan nampak seperti dibawah ini :

HTML 5
65%
CSS 3
79%
jQuery
95%
PHP
70%
SEO
70%

Mengenai warna dan panjang skill bar, tinggal dimodif sesuai keinginan

Itulah informasi mengenai "Cara Membuat Skill Bar dengan CSS3 - Style #1", selamat mencoba dan semoga bermanfaat.


nanio
Cara Membuat Skill Bar dengan CSS3 - Style #1
Cara Membuat Skill Bar dengan CSS3 - Style #1 Cara Membuat Skill Bar dengan CSS3 - Style #1 Reviewed by Bagus Surochman on 8/06/2018

3 komentar:

  1. Wah kebetulan gan saya lagi belajar tentang css sama html.

    btw, kalo ditambah hover bisa ga ya gan ? jadi, kalo kursor mouse nya nyentuh bakal berubah skillbar nya.

    BalasHapus
    Balasan
    1. bisa mas., asal sudah paham CSS ., tinggal menambahkan kode :hover pada selektor yang diinginkan.,. misal :
      .taufiq{background:red}
      .taufiq:hover{background:blue}

      hasilnya., warna merah akan berubah menjadi biru saat tersentuh kursor..

      Hapus
  2. Ini artikel yg saya cari cari
    Sangat bermanfaat gan
    Terima kasih

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.