Tutorial Blogger

Cara Membuat Skill Bar Keren dengan CSS di Blogger

Skill Bar atau Kolom Keterampilan merupakan kolom yang berisi statistik atau review pada suatu produk atau kemampuan sesorang. Biasanya Skill Bar ini dipasang pada website E-commerce yang peruntukan untuk review suatu produk baik dari kinerja perangkat dan rating dari barang itu.

Biasanya Skill Bar ini dirancang menggunakan JavaScript untuk menampilkan animasi dari Skill Bar ini. Namun pada artikel kali ini, penulis akan memberikan sedikit tutorial Cara Membuat Skill Bar Keren dengan CSS di Blogger yang hanya menggunakan CSS dan HTML saja, jadi tidak akan membebankan loading blog kamu.

Cara Membuat Skill Bar Keren dengan CSS di Blogger

1. Log in ke akun Blogger → Tema → Edit HTML.

2. Copy dan Pastekan kode CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

Note: Disini penulis akan menyediakan 3 style CSS berbeda.

Style CSS 1

Style CSS 2

Style CSS 3

3. Buat artikel atau postingan dan pilih Mode HTML bukan Compose lalu masukan kode pemanggil berikut.

Kode HTML 1

Kode HTML 2

Kode HTML 3

4. Selesai artikel siap di publish.

Berikut adalah 3 tampilan Skill Bar dengan style CSS yang berbeda.

Skill Bar Style 1

Skill Bar Style 2

Skill Bar Style 3

Sekian tutorial Cara Mudah Membuat Skill Bar Keren Dengan CSS di Blogger. Jika kamu memiliki pertanyaan perihal artikel ini, jangan sungkan untuk berkomentar di bawah ya. Semoga bermanfaat.

Tutorial Lainnya dari Penulis:









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Berlangganan tutorial gratis melalui email

Copyright © 2019 Inwepo - All Rights Reserved.

To Top