×

search by faronesia.com

Faronesia

Learn blogger design by faronesia.com

Fullscreen mode
Normal mode

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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Donasi ke faronesia.com

Hallo sobat Faronesia, Anda dapat memberikan suport kepada kami dengan cara memberikan donasi.

NAMA : Hazira Azza Faroni
BANK BRI : 6642-01-030178-53-6
PULSA TSL : 081229706872
Selesai