Kode HTML Progress Bar Skill Blogspot

Mau tampil keren di halaman profil Blogspot kamu? Yuk, tambahkan progress bar skill yang elegan pakai HTML + CSS sederhana. Nggak perlu JavaScript, cukup tempel kodenya di halaman posting atau widget. Saya sendiri menerapkannya di halaman profil.

Langkah-langkah:

1. Masuk ke dashboard Blogspot
2. Klik Tata Letak → Tambahkan Gadget → Pilih HTML/JavaScript; 
3. Atau di posting blog, pilih mode tampilan HTML.
4. Tempelkan kode berikut:

<div style="display: flex; flex-direction: column; gap: 1rem;">
<div style="margin-bottom: 0.5rem;">
<span style="font-size: 16px; font-weight: bold;">HTML</span>
<div style="background: #ddd; height: 12px; border-radius: 6px; margin-top: 4px;">
<div style="width: 85%; background: #e74c3c; height: 100%; border-radius: 6px;"></div>
</div>
</div>
<div style="margin-bottom: 0.5rem;">
<span style="font-size: 16px; font-weight: bold;">CSS</span>
<div style="background: #ddd; height: 12px; border-radius: 6px; margin-top: 4px;">
<div style="width: 85%; background: #3498db; height: 100%; border-radius: 6px;"></div>
</div>
</div>
<div style="margin-bottom: 0.5rem;">
<span style="font-size: 16px; font-weight: bold;">JavaScript</span>
<div style="background: #ddd; height: 12px; border-radius: 6px; margin-top: 4px;">
<div style="width: 85%; background: #f39c12; height: 100%; border-radius: 6px;"></div>
</div>
</div>
<div style="margin-bottom: 0.5rem;">
<span style="font-size: 16px; font-weight: bold;">PHP</span>
<div style="background: #ddd; height: 12px; border-radius: 6px; margin-top: 4px;">
<div style="width: 85%; background: #7f8c8d; height: 100%; border-radius: 6px;"></div>
</div>
</div>
<div style="margin-bottom: 0.5rem;">
<span style="font-size: 16px; font-weight: bold;">Desain Grafis</span>
<div style="background: #ddd; height: 12px; border-radius: 6px; margin-top: 4px;">
<div style="width: 90%; background: #8e44ad; height: 100%; border-radius: 6px;"></div>
</div>
</div>
<div style="margin-bottom: 0.5rem;">
<span style="font-size: 16px; font-weight: bold;">Web Desain</span>
<div style="background: #ddd; height: 12px; border-radius: 6px; margin-top: 4px;">
<div style="width: 95%; background: #2ecc71; height: 100%; border-radius: 6px;"></div>
</div>
</div>
<div style="margin-bottom: 0.5rem;">
<span style="font-size: 16px; font-weight: bold;">Pengembangan Web</span>
<div style="background: #FFBD2F; height: 12px; border-radius: 6px; margin-top: 4px;">
<div style="width: 97%; background: #FFBD2F; height: 100%; border-radius: 6px;"></div>
</div>
</div>
<div style="margin-bottom: 0.5rem;">
<span style="font-size: 16px; font-weight: bold;">Personal Branding</span>
<div style="background: #ddd; height: 12px; border-radius: 6px; margin-top: 4px;">
<div style="width: 80%; background: #D1DE56; height: 100%; border-radius: 6px;"></div>
</div>
</div>
</div>;code-box

Hasilnya akan seperti ini:

HTML

CSS

JavaScript

PHP

Desain Grafis

Web Desain

Pengembangan Web

Personal Branding

Tips:

1. Ganti teks dan warna sesuai skill kamu.
2. Ubah nilai width (misal: 70%, 90%) buat menyesuaikan tingkat kemampuanmu.