Cara Membuat Skill Bar Progress DiBlog (HTML&CSS)

cara membuat skill bar programmer - bagi anda seorang programmer dan blogger, pasti mau keiginanan menambahkan fitur keahlian anda dalam seorang web desain atau bahasa programming lainnya di website maupun di blog anda.

skill bar ini bukan hanya untuk programmer saja, tetapi anda bisa review barang dan masih banyak lainnya. apabila anda berminat untuk memasang di blog anda silahkan ikuti langkah-langkah saya.

Cara Membuat Skill Bar
Banyak style yang bagus untuk anda, silahkan pilih sesuai keinginan anda.

Anda bisa memasang skill bar progress ini di dalam artikel maupun anda bisa membuat halaman blog khusus untuk keahlian anda sendiri.

1. Buka Blogger > Theme > Edit HTML.
2. Terapkan CSS di bawah ini, di ]]></b:skin>

.suryaskill {
  width: 100%;
  background-color: #ddd;
  box-sizing: border-box;
}

.skills {
  text-align: right;
  padding: 10px;
  color: white;
  box-sizing: border-box;
}

.html {width: 90%; background-color: #4CAF50;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}

3. Simpan themplate anda.

4. Salin dan paste script HTML di postingan halaman anda atau buat artikel baru ini.

<h1>Keahlian Saya</h1>

<p>HTML</p>
<div class="suryaskill">
  <div class="skills html">90%</div>
</div>

<p>CSS</p>
<div class="suryaskill">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="suryaskill">
  <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="suryaskill">
  <div class="skills php">60%</div>
</div>

Hasil

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Demikianlah cara memasang skill bar di blog mudah. semoga bermanfaat dan bisa menambah fitur di blog anda.

Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Berbagi :