Cara Membuat Tampilan Skill / Ketrampilan di Blog dengan CSS

ipung.net - Skill atau ketrampilan merupakan sebuah keahlian dan kemampuan yang dimiliki seseorang dari hasil kerja kerasnya dengan belajar. Kemampuan yang sesuai dengan bidang akan dicari banyak orang. Salah satunya dalam soal pekerjaan. Banyak lowongan kerja menjcari tenaga sesuai dengan bidang keahlian. Lantas bagaimanakah memanfaatkan dunia digital ini untuk mempromosikan diri kita seperti yang mereka inginkan?

Nah, kebetulan sekali bila itu yang diinginkan. Memiliki blog sebagai media berbagi informasi dapat kita lakukan untuk menunjukkan beragam kemampuan yang telah kita miliki ke khalayak umum. Dengan tampilan yang super keren, tentu akan menambah kesan mendalam bagi yang melihatnya. berikut akan diulas bagaimana cara mempercantik tampilan softskill atau ketrampilanmu di blog/web. 

Selain untuk menunjukkan softskill atau ketrampilan, tampilan ini bisa digunakan untuk berbagai jenis perihal yang dapat kalian sesuaikan dengan kepentingannya. Hal ini karena tampilan berbentuk bar memanjang ke samping bisa beragam jenis pemanfaatannya, bisa untuk memberikan nilai statistik, review suatu produk, penilaian kinerja, memberikan rating, dan masih banyak yang lainnya.

Hal yang perlu diperhatikan para blogger bilamana ingin membuatnya seperti berikut ini.

1. Buka New Entri atau Postingan yang baru

2. Di atas halaman ketik tulisan postingan, pilih HTML dan copy pastekan kode html berikut ini ya.

<div> <h3><b>Keahlian</b></h3> <ul class="keahlian"> <div> <li class="ipunghtml">HTML 90%</li> </div> <div> <li class="ipungcss">CSS 80%</li> </div> <div> <li class="ipungjs">Javascript 50%</li> </div> <div> <li class="ipungphp">PHP 10%</li> </div> </ul> </div> <style scoped="" type="text/css"> .post-body h3{background:#fff;box-shadow:0 1px 6px rgba(32,33,36,.28);line-height:2em;border-radius:5px;color:#43ce8e;border-bottom:2px solid #43ce8e;font-family:'Google Sans',Tahoma,Sans-serif;text-transform:uppercase;font-weight:400;font-size:14px;margin:5px 0;padding:8px 15px} .xabout{color:#07ACEC!important;border-bottom:3px solid #07ACEC!important} ul.keahlian{padding:0} .keahlian div{list-style:none;;margin-bottom:10px;font-size:12px;border-radius:20px;color:#fff;background:#EAEAEA} .keahlian li{padding:5px 20px;border-radius:20px} .ipunghtml{background:#0091ea;width:90%} .ipungcss{background:#009624;width:80%} .ipungjs{background:#ef6c00;width:50%} .ipungphp{background:#a30000;width:10%} </style>

3. Simpan publikasi dan lihat hasil yampilan menariknya seperti di bawah ini contohnya.

Keahlian

HTML 90%


CSS 80%


Javascript 50%


PHP 10%