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.

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Cara Membuat Skill Bar Progress DiBlog (HTML&CSS)"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel