Memasang Widget Skill Kafetaria Di Blog
Hallo Sahabat Kang Wira, Maaf gres sempat bikin artikel lagi. Kali ini aku akan membagikan sebuah tutorial Memasang Widget Skill Bar di Blog.
Widget Skill Bar ini memang menarik perhatian visitor dan Biasanya dipakai para blogger untuk menampilkan keahlian yang mereka punya dalam bentuk Animasi Persentase.
Makara cocok sekali jikalau kau punya blog sebagai warta pelengkap pada portofolio eksklusif dan Curiculum Vitae berupa blog.
Mungkin Kamu pernah lihat beberapa blogger yang memasang Widget ini pada halaman About Me, kalau belum pernah lihat, kau dapat buka halaman About pada Footer .
Dan alasannya yaitu Widget Skill Bar ini sudah Responsive, jadi kau bebas meletakan posisi widget dimana saja, misalnya di sidebar.
Tapi kalau kau belum pernah lihat, kau dapat lihat sample nya pada halaman demo
(silahkan kau klik tombol Demo dibawah paragraf ini).
D E M O
Pada halaman About, kau dapat lihat Posisi Widget Skill Bar berada pada Bagian Tengah Halaman About dan pada halaman demo yang sudah kau lihat tadi, kau dapat lihat posisi Widget Skill Bar berada pada Sidebar halaman tersebut.
Setelah itu, silahkan buka hidangan Tema kemudian pilih Edit HTML dan salin instruksi CSS dibawah ini. Letakkan instruksi CSS ini sempurna sebelum instruksi ]]></b:skin>
Jangan lupa masukkan instruksi JQuery ini Tepat dibawah <body>.
Setelah itu kau simpan template yang sudah kau edit tadi, dan lihatlah hasilnya.
Jika Tampilan kurang pas dengan template yang sedang kau gunakan ketika ini, kau dapat sesuaikan warna dan goresan pena pada Kode HTML diatas.
Gampang kan ?
Kalau kau masih merasa kesulitan ketika Memasang Widget Skill Bar di Blog ini, kau dapat tinggalkan komentar kau dibawah.
Jangan lupa share atau bookmark artikel ini, siapa tahu lain waktu kau butuh widget ini untuk blog portofolio kamu.
Widget Skill Bar ini memang menarik perhatian visitor dan Biasanya dipakai para blogger untuk menampilkan keahlian yang mereka punya dalam bentuk Animasi Persentase.
Makara cocok sekali jikalau kau punya blog sebagai warta pelengkap pada portofolio eksklusif dan Curiculum Vitae berupa blog.
Mungkin Kamu pernah lihat beberapa blogger yang memasang Widget ini pada halaman About Me, kalau belum pernah lihat, kau dapat buka halaman About pada Footer .
Dan alasannya yaitu Widget Skill Bar ini sudah Responsive, jadi kau bebas meletakan posisi widget dimana saja, misalnya di sidebar.
Tapi kalau kau belum pernah lihat, kau dapat lihat sample nya pada halaman demo
(silahkan kau klik tombol Demo dibawah paragraf ini).
D E M O
Pada halaman About, kau dapat lihat Posisi Widget Skill Bar berada pada Bagian Tengah Halaman About dan pada halaman demo yang sudah kau lihat tadi, kau dapat lihat posisi Widget Skill Bar berada pada Sidebar halaman tersebut.
Tertarik Memasang Widget Skill Bar di Blog ?
Kamu dapat ikuti beberapa Langkahnya dibawah ini. Pertama Pastikan kau sudah login ke Blog ya. Setelah itu buatlah Widget HTML/JavaScript gres 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 dapat kau letakkan juga dalam halaman yah.
Setelah itu, silahkan buka hidangan Tema kemudian pilih Edit HTML dan salin instruksi CSS dibawah ini. Letakkan instruksi CSS ini sempurna sebelum instruksi ]]></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 instruksi 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 kau simpan template yang sudah kau edit tadi, dan lihatlah hasilnya.
Jika Tampilan kurang pas dengan template yang sedang kau gunakan ketika ini, kau dapat sesuaikan warna dan goresan pena pada Kode HTML diatas.
Gampang kan ?
Kalau kau masih merasa kesulitan ketika Memasang Widget Skill Bar di Blog ini, kau dapat tinggalkan komentar kau dibawah.
Jangan lupa share atau bookmark artikel ini, siapa tahu lain waktu kau butuh widget ini untuk blog portofolio kamu.
Post a Comment for "Memasang Widget Skill Kafetaria Di Blog"