Cara membuat Indikator scroll di blog

Assalamualaikum.wr.wb..

Halo Boger masih inget sya , jelas ga inget lah kenal juga engga, udah lupakan sajah karna sya bukan orang penting .cieee sya lagi galau,, ok bos sya akan memberikan tutorial ringan yang mungkin sja kalian belum tau .apa itu efek scroll indikator mungkin kalian bertanya .

Ini akan sya jelaskan jika kalian mngunjungi sbuah situs web jalantikus pasti kalian pernah melihat sebuah animasi yang apa bila kita membaca sebuah artikel kemudian menggulirkanya kebawah itu akan ada sebuah garis lurus warna merah di bawah adres bar .saya akan membahas itu penampakan seperti gambar di bawah ini .mungkin kalian mau mencoba silahkan ..saya bimbing ????

sumber: https://webcensar.com

sebuah Efek Indikator Ini Sbenarnya Ada Banyak Versi .Namu Sya Akan Memberikan Yang Versi blog Tentunya Karna Sudah 3 versi Yang Sya Coba Dan Masing Masing Mempunyai Klebihan Dan Kekurangan Namun .Karna Efek Indikator Ini Akan Sempurna Bila Kita Mnempatkanya Di Situs Web Karna Di Situ Web Mampu Menerima Jquery.js Versi berapa Pun .Ok Biar Tidak Ribet Dan Sya Pun Tidak Bertele Tele Langsung Sajah .

Namun sbelum lanjut ke tutorial ..pastikan kalo kalian sudah sedikit paham atau minimal 25% mengerti template blog ,, karna sya tidak akan memberikan cara mndetail sya yakin kalian pasti sudah tau sebelumnya cara edit tmplate .di sini sya akan menunjukan cara penempatanya ajah ,karna sya ngeblog hany mengisi waktu luang sajah langsung sajah pertama silahkan kalian copas kode di bawah ini
untu penempatanya kalian cari code</script>
lalu tempelkan kode di bawah ini di atas kode </script>

namun kalian bisa melewati tahap ini kalo template kalian sudah Ada kode Sperti di bawah ini

script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"/>

Selanjutnya Kalian cari code

]]></b:skin> 

jika sudah ketemu kalian tempatkan kode css di bawah ini tepat di atas code ]]></b:skin> 
karna Ini adalah css kalia juga bisa menempatkanya di Atas kode

</style>

svg .animated-circle {
    fill: transparent;
    stroke-width: 40px;
    stroke: #ff0000;
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
}
.progress-indicator-2 {
    position: fixed;
    top: 0;
    left: 0;
    height: 8px;
   z-index: 1000;
    background-color: #0A74DA;

}

Untuk Warna Bisa Kalian Sesuaikan Sendini Nanti Dan height: 8px ; Untuk Ukuran Ktebalan, kode Di Atas Sudah Sya Modif Sdikit Dan Sya tambahin z-index: 1000;
Agar Nanti Kalian Bisa memakainya Di .Header (fixed) Untuk Nilai Z-index lebih tinggi lbih bagus itu saya Saran kan Karna Untu bisa menimpa header Stinky atau fixed



Dan



Di bawah Ini Ada lah scrip nya Kalian Bisa Memasang nya Di Atas Code </head>

(function(){
    var $w = $(window);
    var $circ = $('.animated-circle');
    var $progCount = $('.progress-count');
    var $prog2 = $('.progress-indicator-2');
    var wh, h, sHeight;
    function setSizes(){
        wh = $w.height();
        h = $('body').height();
        sHeight = h - wh;
    }
    setSizes();
    $w.on('scroll', function(){
        var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
        updateProgress(perc);
    }).on('resize', function(){
        setSizes();
        $w.trigger('scroll');
    });
    function updateProgress(perc){
        var circle_offset = 126 * perc;
        $circ.css({
            "stroke-dashoffset" : 126 - circle_offset
        });
        $progCount.html(Math.round(perc * 100) + "%");
        $prog2.css({width : perc*100 + '%'});
    }
}())

Dan terakhir Dalah Html Nya Kalian bisa Taro di Atas kode</body>

<div class="progress-indicator-2"></div>

Gimnah gampangkn



SEMOGA BERMANFAAT TERIMAKASIH 

Baca juga