Cara Membuat Skills Bar dengan Animasi di Blogger

Pada malam yang berbahagia ini saya akan berbagi sebuah tutorial sederhana yang berkaitan dengan dunia blogger yang dimana saya akan berbagi tutorial bagaimana cara membuat widget skills bar dengan animasi, mungkin dari sobat semua banyak menjumpai widget skills bar dengan animasi ini di situs situs website yang menggunakan template html bootstrap dan banyak juga widget ini kita jumpai di situs situs profil peribadi yang di mana pada situs profil pribadi ini terdapat berbagai macam informasi dari portofolio seseorang dan informasi dari skills yang di miliki oleh orang tersebut maka dari itu widget skills bar dengan animasi ini sangat banyak di gunakan orang. jadi buat anda yang tertarik untuk membuat widget skills bar dengan animasi ini di situs blog anda bisa mengikuti tutorial di bawah ini dengan teliti dan pastikan bahwa langkah-langkah yang anda ikuti berjalan dengan benar dan tidak ada yang ketingalan. Widget skills bar dengan animasi memiliki berbagai macam fungsi seperti dapat menampilkan hasil polling, dapat di gunakan sebagai widget loading dalam sebuah situs website atau juga blog, sering kita jumpai pada proses download di smartphone" yang ada pada saat ini.

Langkah-langkahnya :


1. Login ke akun blogger anda masing-masing
2. Pilih menu Template / Edit Template

3. Jika sudah letakkan kode CSS di bawah ini tepat di atas kode : ]]></b:skin>

Kode CSS


<style>
.skillbar{font-family:'Open Sans','sans-serif';position:relative;display:block;margin-bottom:15px;width:100%;background:#eee;height:35px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;-webkit-transition-property:width,background-color;-moz-transition-property:width,background-color;-ms-transition-property:width,background-color;-o-transition-property:width,background-color;transition-property:width,background-color}
.skillbar-title{position:absolute;top:0;left:0;font-weight:bold;font-size:13px;color:#fff;background:#6adcfa;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px}
.skillbar-title span{display:block;background:rgba(0,0,0,0.1);padding:0 20px;height:35px;line-height:35px;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px}
.skillbar-bar{height:35px;width:0;background:#6adcfa;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}
.skill-bar-percent{position:absolute;right:10px;top:0;font-size:11px;height:35px;line-height:35px;color:#444;color:rgba(0,0,0,0.4)}
</style>

4. Setelah itu letakkan kode jQuery yang ada di bawah ini tepat di atas kode : </body>

 Kode jQuery


<script>
jQuery('.skillbar').each(function(){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},2000);
});
</script>

5. Jika sudah simpan template yang anda edit tadi dan masuk ke menu Laman / Buat Lama Baru copy kode html yang ada di bawah ini dan pastekan ke dalam laman baru yang anda buat tadi dan pastikan anda memilih menu "HTML" jangan menu "COMPOSE"

Kode HTML


<div class="skillbar clearfix " data-percent="65%">
<div class="skillbar-title" style="background: #88cd2a;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #88cd2a;"></div>
<div class="skill-bar-percent">65%</div>
</div>
<div class="skillbar clearfix " data-percent="85%">
<div class="skillbar-title" style="background: #00a8ff;"><span>CSS</span></div>
<div class="skillbar-bar" style="background: #00a8ff;"></div>
<div class="skill-bar-percent">85%</div>
</div>
<div class="skillbar clearfix " data-percent="60%">
<div class="skillbar-title" style="background: #00a8ff;"><span>CSS</span></div>
<div class="skillbar-bar" style="background: #00a8ff;"></div>
<div class="skill-bar-percent">60%</div>
</div>

6. Kemudia publikasikan laman baru yang anda buat tadi dan lihat hasil dari widget skills bar dengan animasi yang anda buat tadi.
Cara Membuat Skills Bar dengan Animasi di Blogger