×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

Cara Membuat Skill Bar Pada Halaman Blog

Faronesia.com - Halo sahabat faronesia, jika anda seorang blogger yang mengedepankan kinerja dan skill yang anda miliki demi sebuah promosi maupun branding pada blog yang anda kelola berarti anda tidak salah masuk pada halaman ini. Mungkin anda bisa menerapkan tutorial ini pada blog agar anda lebih percaya diri dalam mengelola blog.

Skill bar berguna sekali untuk memeprcantik penampilan sebuah blog sekaligus mampu memperkuat branding anda dengan cara memberikan info singkat mengenai skill yang anda miliki pada sebuah halaman blog yang anda kelola. Dengan kata lain anda bisa memberi pengaruh terhadap orang lain dengan skill bar tersebut. Namun, skill bar tersebut tidak akan berguna jika kinerja branding anda buruk.

Sebenarnya kode skill bar ini bukanlah desain saya melainkan desain dari seorang youtuber asal india yang membahas seputar WEB DESIGN (desain web), hanya saja saya memodifikasi kembali agar bisa dipasang dan digunakan sekaligus bekerja pada platform blogspot.

Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.

Cara membuat skill bar pada halaman blog


  • Masuk ke dashboard blog 
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode seperti dibawah ini ]]></b:skin>
  • Tempelkan kode CSS berikut dibawah ini tepat diatas kode ]]></b:skin>
.skills{
  width: 100%;
  max-width: 400px;
  padding: 0 0px;
}
.skill-name{
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 20px 0;
}
.skill-bar{
  height: 20px;
  background: #cacaca;
  border-radius: 8px;
}
.skill-per{
  height: 20px;
  background-color: #0fbcf9;
  border-radius: 8px;
  width: 0;
  transition: 1s linear;
  position: relative;
}
.skill-per::before{
  content: attr(per);
  position: absolute;
  padding: 4px 6px;
  background-color: #000;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  top: -35px;
  right: 0;
  transform: translateX(50%);
}
.skill-per::after{
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #000;
  top: -10px;
  right: 0;
  transform: translateX(50%) rotate(45deg);
  border-radius: 2px;
}
  • Selanjutnya silahkan cari kode </body>
  • Lalu tempelkan kode dibawah ini tepat diatas kode </body>
<script>
      $('.skill-per').each(function(){
        var $this = $(this);
        var per = $this.attr('per');
        $this.css("width",per+'%');
        $({animatedValue: 0}).animate({animatedValue: per},{
          duration: 1000,
          step: function(){
            $this.attr('per', Math.floor(this.animatedValue) + '%');
          },
          complete: function(){
            $this.attr('per', Math.floor(this.animatedValue) + '%');
          }
        });
      });
    </script>
  • Lalu carilah kode </head>
  • Tempelkan kode dibawah ini tepat diatas kode </head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  • Sampai disini sudah hampir selesai
  • Selanjutnya simpan tema tersebut
  • Setelah tema benar-benar tersimpan, silahkan buat halaman baru dengan nama my skills (bebas)
  • Lalu klik mode html di pojok kiri atas
  • Selanjutnya tempelkan kode Html dibawah ini
<div class="skills">
<div class="skill">
<div class="skill-name">
HTML</div>
<div class="skill-bar">
<div class="skill-per" per="90">
</div>
</div>
</div>
<div class="skill">
<div class="skill-name">
CSS</div>
<div class="skill-bar">
<div class="skill-per" per="70">
</div>
</div>
</div>
<div class="skill">
<div class="skill-name">
Javascript</div>
<div class="skill-bar">
<div class="skill-per" per="60">
</div>
</div>
</div>
</div>
  • Terakhir, publikasikan halaman tersebut
  • Lihat hasilnya disini DEMO

NOTE: untuk responsivitas dan lainnya saya serahkan kepada anda. Anda dapat memodifikasi sesuai keinginan dan kemampuan yang anda miliki agar tampilan menjadi lebih menawan.

Request tutorial lain?silahkan masuk ke halaman Tanggapan


Demikianlah mengenai Cara Membuat Skill Bar Pada Halaman Blog semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.
Buka komentar
Tutup komentar

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesia, caranya cukup dengan menekan tombol dibawah ini.

Tutup