MASIGNALPHA101

Cara membuat skill bar pada halaman blog

Cara membuat skill bar pada halaman blog
Thursday, April 30, 2020

Progress bar


Halo sobat blogmania, kembali lagi admin akan berbagi tutorial cara membuat porgress skill bar pada halaman blog.

Proggres skill bar ini biasanya digunakan untuk mengukur seberapa jauh artikel yang di baca, atau ilmu yang di pelajari. Jadi sekain tinggi nilai skill bar nya, semakin tinggi pula kesulitan yang akan di pelajari.

Skill bar ini digunakan pada blog droidriky, untuk menampilkan seberapa jauh dan sulit artikel tentang pemrograman php yang di bagikan.

Nah, jika kamu ingin membuatnya, silahkan ikuti langkah - langkah di bawah ini.

Masuk ke blogger.com dan pilih bagian tema, lalu pilih edit html dan cari kode </style> atau jika tidak ada silahkan cari kode</b:skin> .

Jika sudah, paste script Css di bawah ini.

.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, masih di edit html dan cari lagi kode </body> dan paste javascript di bawah ini.

<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 cari script untuk memanggil jquery, di blog kamu sudah ada apa belum. Jika belum ada script untuk memanggil jquery, silahkan paste script di bawah ini tepat di atas kode </head>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Jika sudah, silahkan di simpan tema nya. Dan jika ingin menampilkan skill barnya, silahkan paste script di bawah ini pada bagian yang kamu inginkan di halaman postingan lalu klik compose, dan paste script ini pada bagian paling bawah.

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

Jika sudah selesai, silahkan di simpan dan lihat hasilnya.  Semoga membantu dan bermanfaat.