EDITBLOGTEMA

Notable Desain Panduan
×
Skip to main content

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://1.bp.blogspot.com/-LSYsOBay56s/Xcbhvc5DhTI/AAAAAAAAAQc/axi8WAYnnXAxhODrvzxei3Qgyd3IdsmlgCK4BGAYYCw/s113/Adelina%2BSufyan.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.

Comments

  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 :)

    ReplyDelete
    Replies
    1. Review produk bisa pakai tabel, indikator bisa buat mempresentasikan kualitas produk

      Delete

Post a Comment

Ajukan pertanyaan dan berikan detailnya untuk memudahkan kami menganalisa dan troubleshooting agar kami dapat membantu atau membantu memecahkan masalah seputar kode kode HTML, CSS dan JS template blog kalian

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar.

Bagaimanapun pertanyaan, kritik, saran dan masukan dari kalianlah yang membuat blog ini tetap bertahan dan ada.

Terimakasih

Salam dari Admin
Anissa Auliasari

Copyright © EDITBLOGTEMA. All rights reserved.