CARA MEMBUAT INDIKATOR SKILL DI HALAMAN BLOGGER

skill internet
skill internet
Indikator ini dapat diterapkan untuk sekedar mempresentasikan skill personal atau keahlian masing masing anggota dalam suatu organisasi di halaman blog, contoh skill indicator berikut ini:

Adelina Sofyan's Skills:

Avatar HTML
90%
CSS
80%
JavaScript
99%
PHP
60%
Indikator di atas dengan gamblang menjelaskan sejumlah keahlian yang dikuasai oleh konstributor sebuah halaman web berikut prosentasi penguasaannya.

Kegunaan lain adalah biasanya dengan mempresentasikan skill kita, orang akan lebih mudah memberi penilaian untuk merekrut kita dalam mengerjakan proyek proyek tertentu di internet.

Tentu saja itu hanya dasar. Dan penerapanya lagi lagi sebagai penulis kalian harus mahir bukan hanya menggunakan opsi penulisan melalui opsi "compose" namun juga opsi "HTML" dan itu tentu saja mudah di lakukan karena memang telah tersedia di dasbor blogger.

Yang kita perlukan hanyalah menerapkan HTML dan CSS ke dalam opsi penulisan "HTML"

Perhatikan kode kodenya:
<style>
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}
.html {width: 90%; background-color: #4CAF50;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 99%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}
</style>

</head>
<body>

<h2>Adelina Sofyan:</h2>
<td><img alt="Avatar" class="avatar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Wz1ATzS06o_1zmcVWfu_-uk-EQmxiGtF2shlClmEboJgW0emDxVAoDCZV0EEw4KvZJOcMBlGZQfTWO4QIakrfdUUkPD6-S_YJw4VoEIbEsN76XJBPHs-4xu92PMKwwrTDrpKvrkYUis/s113/Adelina+Sufyan.jpeg" />
<p>HTML</p>
<div class="container">
<div class="skills html">90%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills js">99%</div>
</div>
<p>PHP</p>
<div class="container">
<div class="skills php">60%</div>
</div>
Kode CSS berwarna biru, sedangkan HTML yang berwarna merah. Cara meletakannya sama dengan tutuorial saya sebelumnya terkait penggunaan opsi "HTML" pada penulisan blogger.

2 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Btw ini bisa juga buat bikin indikasi review produk gitu yak.
    Kayak review kosmetik.
    Misal harganya berapa persen wort it, kualitasnya dll :)

    Saya pernah liat teman-teman biuti blogger bikin kayak gini :)

    BalasHapus
    Balasan
    1. Review produk bisa pakai tabel, indikator bisa buat mempresentasikan kualitas produk

      Hapus
Lebih baru Lebih lama

Formulir Kontak