Cara Membuat Tampilan Skill / Ketrampilan di Blog dengan CSS

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%



Semoga artikel ini dapat memberikan kebermanfaatan bagi kita semua. Sukses untuk tutorial blog ini tentang Cara Membuat Tampilan Skill / Ketrampilan di Blog dengan CSS. Salam sukses

Show comments
Hide comments

2 Responses to "Cara Membuat Tampilan Skill / Ketrampilan di Blog dengan CSS"

  1. Wah... ilmu saya belum sampai di sini Kak, tapi sekarang sedang belajar step by step dulu. Semoga bisa sampai di sini.

    Sukses terus kak!

    ReplyDelete
  2. Wuuiihh keren banget mas jadi nilai skor blog setidaknya bisa kita tahu yaa!! Izin coba mas..thanks sudah berbagi info CSS keren..😄😄

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel