Kode Jarwo
Kode Jarwo
Kode Jarwo

<div class='bar'>
<div class='tbar-jarwo'>
<p>Kode Jarwo</p>
</div>
<div class='bar-jarwo'>
<span class='bar1'></span>
</div>
</div>

<div class='bar'>
<div class='tbar-jarwo'>
<p>Kode Jarwo</p>
</div>
<div class='bar-jarwo'>
<span class='bar2'></span>
</div>
</div>

<div class='bar'>
<div class='tbar-jarwo'>
<p>Kode Jarwo</p>
</div>
<div class='bar-jarwo'>
<span class='bar3'></span>
</div>
</div>

<style>
.tbar-jarwo {font-family:sans-serif;display:inline-block;font-size:20px;margin-right:10px;font-weight:bold}
.tbar-jarwo p {margin:0}
.bar-jarwo {width:80%;background:#071740;display:block;height:25px;padding:3px;border-radius:5px;display:inline-block}

.bar1 {width:80%;background:linear-gradient(to bottom, #156fde 0%, #0e2e79 100%);display:block;height:100%;overflow:hidden}
.bar2 {width:60%;background:linear-gradient(to bottom, #156fde 0%, #0e2e79 100%);display:block;height:100%;overflow:hidden}
.bar3 {width:40%;background:linear-gradient(to bottom, #156fde 0%, #0e2e79 100%);display:block;height:100%;overflow:hidden}
</style>

  • Silahkan agan ganti tulisan berwarna hijau tebal dengan deskripsi tiap bar
  • Kalau mau ganti panjang isi bar nya (penuh atau dikit), tinggal diganti tulisan yang berwarna merah tebal (1-100%, 100% berarti penuh).
  • Bila ingin menambahkan bar baru, ikuti panduan berikut ini:
    • Pertama, tambahkan style bar baru (bar4)  dibawah style bar3, contoh menjadi seperti ini:
      • .bar3 {width:40%;background:linear-gradient(to bottom, #156fde 0%, #0e2e79 100%);display:block;height:100%;overflow:hidden} 
        .bar4 {width:20%;background:linear-gradient(to bottom, #156fde 0%, #0e2e79 100%);display:block;height:100%;overflow:hidden}
        </style>
    • Kedua, tambahkan elemen bar barunya (bar4), dengan cara menambahkannya dibawah elemen bar3 (yang saya beri tulisan tebal), sehingga menjadi seperti ini:
      • <div class='bar'>
        <div class='tbar-jarwo'>
        <p>Kode Jarwo</p>
        </div>
        <div class='bar-jarwo'>
        <span class='bar3'></span>
        </div>
        </div>

        <div class='bar'>
        <div class='tbar-jarwo'>
        <p>Kode Jarwo</p>
        </div>
        <div class='bar-jarwo'>
        <span class='bar4'></span>
        </div>
        </div>
Selesai... Selamat mencoba gan.