Widget Skill Bar ini memang menarik perhatian visitor dan Biasanya digunakan para blogger untuk menampilkan keahlian yang mereka punya dalam bentuk Animasi Persentase.
Jadi cocok sekali jika kamu punya blog sebagai informasi tambahan pada portofolio pribadi dan Curiculum Vitae berupa blog.
Mungkin Kamu pernah lihat beberapa blogger yang memasang Widget ini pada halaman About Me, kalau belum pernah lihat, kamu bisa buka halaman About pada Footer Blog Kang Wira.
Dan karena Widget Skill Bar ini sudah Responsive, jadi kamu bebas meletakan posisi widget dimana saja, contohnya di sidebar.
Tapi kalau kamu belum pernah lihat, kamu bisa lihat sample nya pada halaman demo
(silahkan kamu klik tombol Demo dibawah paragraf ini).
D E M O
Pada halaman About, kamu bisa lihat Posisi Widget Skill Bar berada pada Bagian Tengah Halaman About dan pada halaman demo yang sudah kamu lihat tadi, kamu bisa lihat posisi Widget Skill Bar berada pada Sidebar halaman tersebut.
Tertarik Memasang Widget Skill Bar di Blog ?
Kamu bisa ikuti beberapa Langkahnya dibawah ini.Pertama Pastikan kamu sudah login ke Blog ya. Setelah itu buatlah Widget HTML/JavaScript baru dan masukkan Kode dibawah ini pada kolom.
<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: #03c0ff;"><span>Design</span></div>
<div class="skillbar-bar" style="background: #03c0ff;"></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>Kode diatas bisa kamu letakkan juga dalam halaman yah.
Setelah itu, silahkan buka menu Tema lalu pilih Edit HTML dan salin kode CSS dibawah ini. Letakkan kode CSS ini tepat sebelum kode ]]></b:skin>
Baca juga : Pasang Widget Iklan Mandiri Pada Sidebar Blog
/* Skill Bar */
.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)}Jangan lupa masukkan kode JQuery ini Tepat dibawah <body>.
<!--Skill Bar-->
<script>
jQuery('.skillbar').each(function(){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},2000);
});
</script>Setelah itu kamu simpan template yang sudah kamu edit tadi, dan lihatlah hasilnya.
Jika Tampilan kurang pas dengan template yang sedang kamu gunakan saat ini, kamu bisa sesuaikan warna dan tulisan pada Kode HTML diatas.
Gampang kan ?
Kalau kamu masih merasa kesulitan saat Memasang Widget Skill Bar di Blog ini, kamu bisa tinggalkan komentar kamu dibawah.
Jangan lupa share atau bookmark artikel ini, siapa tahu lain waktu kamu butuh widget ini untuk blog portofolio kamu.
