Cara Membuat Skill Bar di blog dengan HTML, CSS

Tahukah anda Cara Membuat Skill bar di Blog dengan HTML dan CSS? - Jika ingin tau semak terus tutorial ini sampai selesai, oke...

Cara membuat skill bar tidak menggunkan HTML dan CSS saja namun menggunkan JavaScript atau  jQuery agar animasihnya semakin hidup, tapi pada tutorial kali saya cuman akan share kan cara membuat animasi skill bar di blog dengan html dan css saja karena jika menggunkan Java Script atau JQuery agak ribet.

Cara Membuat Skill Bar di blog | w3school

Sama seperti cara membuat skill bar di w3school kita cuman copas saja, nah disini juga sama kita akan membuat animasi skill bar cuman copy paste code html dan css saja ke postingan yang anda buat.

Setelah saya search di google dan di codepen ternyata jenis, ada yang berfungsi sebagai statistik atau review pada suatu produk, kinerja perangkat, rating dan biasanya itu di website website bisnis besar.

Baca Juga : "Cara Membuat Online Tool Minify di Blogmu Sendiri"

Okee langsung aja ke cara membuat skill bar di blog dengan insatan.

Cara Membuat Animasi Skill Bar di Blog dengan HTML dan CSS

Sebenarnya anda bisa membuat skill bar versi anda sendiri jika sudah paham html dan css namun jika gak mau ribet terus simap tutorial ini.

Langkah 1: Masuk Blogger

Seperti biasa anda masuk dulu ke dashbaord blogger.com

Langkah 2: Buat Halaman Baru atau Postingan Baru

Buat Halaman Baru atau Postingan Baru terserah anda mau membuat animasi skill barnya dimana, jika ingin di Halaman Static silahkan pilih menu Halaman Kemudian Buat Halanan Baru.

Jika Ingin tampil di Postingan langsung aja buat postingan baru.

Baca Juga: "Cara Membuat Blog Download Anime Keren Seperti Samehadaku.tv"

Langkah 3: Copas Code HTML dan CSS

Pilih Mode Editor HTML buka Compose ya.

Cara Membuat Skill Bar di blog

Jika sudah pilih mode HTML, silahkan copy semua kode di bawah ini dan letakan di postingan anda.


<div class="skillst2">
<div class="skillbar">
<div class="count-bar color-1" style="width: 100%;">
<div class="title">Optimasi Blog</div>
<div class="count"><span>100%</span></div>
</div>
</div>
<div class="skillbar">
<div class="count-bar color-2" style="width: 80%;">
<div class="title">Teknik SEO</div>
<div class="count"><span>80%</span></div>
</div>
</div>
<div class="skillbar">
<div class="count-bar color-3" style="width: 75%;">
<div class="title">Optimasi Adsense</div>
<div class="count"><span>75%</span></div>
</div>
</div>
<div class="skillbar">
<div class="count-bar color-4" style="width: 60%;">
<div class="title">Coding</div>
<div class="count"><span>60%</span></div>
</div>
</div>
<div class="skillbar">
<div class="count-bar color-5" style="width: 50%;">
<div class="title">Design Grafis</div>
<div class="count"><span>50%</span></div>
</div>
</div>
</div> 
<style scoped="" type="text/css">
.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:#e00032;}
.skillst2 .count-bar.color-2{background-color:#ffd600;}
.skillst2 .count-bar.color-3{background-color:#12c700;}
.skillst2 .count-bar.color-4{background-color:#0091ea;}
.skillst2 .count-bar.color-5{background-color:#7c4dff;}
.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;}
</style>

Panduan!!!


Yang dikasih warna merah silahkan anda uban sesuai keahlian anda (bebas) dan yang dikasih warna oren sesuaikan dengan kemampuan anda dan dan % nya juga sama kan dengan yang di style

Yang dikasih warna hijau itu kode warna silahkan anda ubah sendiri sesuai warna kesukaan.
×

Langkah 4: Simpan

Jika Sudah silahkan Klik Publikasikan tapi jangan lupa kasih Judul dan Deskripsi ya agar lebih lengkap.

Jika sudah seilahkan lihat hasil.

Baca Juga : "Cara Membuat Online Tool Unminify di Blogmu Sendiri"

Penutup...


Jadi Itulah Cara Membuat Skill Bar di Blog dengan HTML dan CSS. Semoga Bermanfaat Bagi teman teman blogger semua, jika suka dengan tutorial seperi ini ikuti terus blogger sukses dengan menkilk tombool follow me di bawah okee...

Follow Me

Terima kasi sudah follow semoga sukses terus...

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel