Widodo

Cara Membuat persentase scrollbar di blog atau website

Cara Membuat persetasi di blog atau website

Buat yang jomblo kagak salah lagi kalo mlm minggu pasti di depan PC maupun laptop itulah jomblo wkwkwkw, ehem biasanya dia sibuk dengan coding, ngeblog atau main game tapi bahagia gak ada yang gangguin di saat focus di depan layar, duh malah cerita tentang jomblo, maklumlah mlm minggu sob langsung aja deh di kesempatan yang bahagian walaupun ujan rintik-rintik saya akan membuat sebuah tutorial membuat persentase di blog ataupun web, persentase ini kita buat menggunakan svg,css dan jquery efek persentase ini bisa di taruh dimana saja anda cukup mengatur posisinya dengan menggunakan css , cara kerja persentase ini jika scrollbar di gerakin kebawah maupun atas maka akan menampilkan value percen (100%), sebenarnya saya pernah melihat tutorial persentase pada scrollbar hampir sama kalo itu persentasenya mengikuti scrollbar sedang kan ini tetap dimana anda mengatur sesuai kebutuhan kalian contohnya di atas header kanan manu kiri.

Sebenarnya persentase scrollbar ini bukan fitur yang pennting bagi sebuah blog maupun web, tapi didak ada salahnya untuk dicoba supaya menarik di blog kita, Cara penerapanyapun cukup mudah dansilahkan ikuti langkah-langkah dibawah ini :

1. Jika anda mengunakan blogspot silahkan login ke dasboard masing-masing

2. Silahkan Pilih Edit Template

3. Cari kode ]]></b:skin> untuk pencarian yang cepat bisa gunakan CRL+F, Jika sudah ketemu silahkan simpan kode dibwah ini di atas kode tadi

.progress-indicator {
position: fixed;
top:0;
right:50px;
width:50px;
height: 50px;
z-index: 20;
}
.progress-count {
position: absolute;
top: 0;
left:27px;
width: 100%; font-size:11px; font-family:Arial, Verdana, Tahoma;
height: 100%;
text-align: center;
line-height: 100px;
color: #ffffff;
}

svg {
position: absolute;
}

circle {
fill:rgba(41,127,184,1.00);
}

svg .animated-circle {
fill: transparent;
stroke-width: 30px;
stroke: #FFFFFF;
stroke-dasharray: 100;
stroke-dashoffset: 100;
}

4. Sekarang Anda cari kode </head> dan simpan ini diatasnya

<script type="text/javascript">

(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(function () {
return factory(root);
});
} else if (typeof exports === 'object') {
module.exports = factory;
} else {
root.Progress = factory(root);
}
})(this, function () {
'use strict';
var $w = window,
$d = document,
$circ = document.querySelector('.animated-circle'),
$progCount = document.querySelector('.progress-count'),
wh,
h,
sHeight;

function trigger(eventName) {
var event = $d.createEvent('HTMLEvents');
event.initEvent(eventName, true, false);

$w.dispatchEvent(event);
}

function updateProgress(perc) {
var circle_offset = 100 * perc;

$circ.style.strokeDashoffset = 126 - circle_offset;

$progCount.innerHTML = (Math.round(perc * 100) + "%");
}

function setSizes() {
wh = $w.innerHeight;
h = $d.body.offsetHeight;

sHeight = h - wh;
}

var init = function () {
setSizes();

$w.addEventListener('scroll', function () {
var top = $w.pageYOffset || $d.documentElement.scrollTop,
perc = Math.max(0, Math.min(1, top / sHeight));

updateProgress(perc);
}, false);

$w.addEventListener('resize', function () {
setSizes();
trigger('scroll');
}, false);

$w.addEventListener('load', function () {
setSizes();
trigger('scroll');
}, false);
};

return {
init : init
};
});
Progress.init();

</script>

 5. Sekarang anda cari kode <body> dan simpan dibawah kode tersebut

<div class='progress-indicator'>
<svg>
<g>
<circle cx='0' cy='0' r='10' stroke='black' class='animated-circle' transform='translate(50,50) rotate(-90)' />
</g>
<g>
<circle cx='0' cy='0' r='20' transform='translate(50,50) rotate(-90)' />
</g>
</svg>
<div class='progress-count'></div>

</div>

6. Selsesai dan simpan

Diatas adalah tahap-tahap penerapan percentase di dalam blogspot sedangkan jika menggunakan website yang dibangun sendiri anda cukup menggabungkan css,jquery dll di file2 yang anda buat

Untuk menghindari terjadinya error di dalam blog silahkan backup terlebih dahulu template blog kalian

Untuk demonya anda bisa liat dibwah ini

DEMO



0 Komentar