إنضم لنا

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 
Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail