Cara Menciptakan Scrolling Progress Kafe Di Blogger
Cara Membuat Scrolling Progress Loading Bar di Blogger - Kali ini galih ingin membagikan tips gres untuk mempercantik tampilan blog. Mungkin kau sudah melihat di beberapa situs yang menggunakan animasi scrolling kafetaria di bab atas halaman sebuah situs yang dapat berkurang atau bertambah jikalau kau melaksanakan scroll ke atas atau kebawah. Animasi tersebut dinamakan Scrolling Progress bar.
Ubahlah warna background Progress Bar sesuai yang kau inginkan jikalau dirasa perlu.
2. Tambahkan instruksi berikut ini pada bab awal body. Jika kau menggunakan Blogger, silahkan masuk ke Tema > Edit HTML > Cari tag <body> kemudian tambahkan instruksi berikut ini sempurna dibawahnya.
3. Tambahkan JQuery versi berapa saja. Jika kau menggunakan Blogger, silahkan masuk ke hidangan Tema > Edit HTML > Cari tag </head> kemudian letakkan instruksi berikut ini sempurna diatasnya.
Agar JQuery yang kau gunakan menjadi ringan dan tidak menciptakan loading blog berat, silahkan baca artikel galih yang berjudul Cara meringankan Jquery di Blogger.
4. Tambahkan instruksi berikut ini pada bab Body. Jika kau menggunakan Blogger, silahkan masuk ke hidangan Tema > Edit HTML > Cari tag </body> kemudian letakkan instruksi berikut ini sempurna diatasnya.
5. SIMPAN
Itu saja tutorial dari galih berjudul Cara menciptakan scrolling progress bar di Blogger. Silahkan share jikalau bermanfaat dan Subscribe jikalau kau ingin mengetahui artikel terbaru galih. Sumber https://www.galihdesign.com/
Cara Membuat Scrolling Progress Bar
Ada beberapa tahapan untuk menciptakan Scroll bar. Yakni penambahan tag html, css dan juga sedikit Javascript yang aku yakin tidak akan menciptakan loading halaman situsmu menjadi berat, tidak akan.
1. Silahkan tambahkan instruksi css berikut ini pada bab head. Jika kau menggunakan Blogger, silahkan masuk ke Tema > Edit HTML > Cari tag </head> tambahkan instruksi berikut ini sempurna diatasnya.
<style type="text/css"> /*Progress*/ progress { position: fixed; left: 0; top: 0; width: 100%; height: 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-color: transparent; color: #eefba3; z-index: 9999; } progress::-webkit-progress-bar { background-color: transparent; z-index: 10; } progress::-webkit-progress-value { background-color: #eefba3; z-index: 10; } progress::-moz-progress-bar { background-color: #eefba3; z-index: 10; } .progress-container { width: 100%; background-color: transparent; position: fixed; top: 0; left: 0; height: 5px; display: block; z-index: 10; } .progress-bar { background-color: #eefba3; width: 0%; display: block; height: inherit; z-index: 10; } </style>Ubahlah warna background Progress Bar sesuai yang kau inginkan jikalau dirasa perlu.
2. Tambahkan instruksi berikut ini pada bab awal body. Jika kau menggunakan Blogger, silahkan masuk ke Tema > Edit HTML > Cari tag <body> kemudian tambahkan instruksi berikut ini sempurna dibawahnya.
<progress max='1' value='0'> <div class='progress-container'> <span class='progress-bar'></span> </div> </progress>3. Tambahkan JQuery versi berapa saja. Jika kau menggunakan Blogger, silahkan masuk ke hidangan Tema > Edit HTML > Cari tag </head> kemudian letakkan instruksi berikut ini sempurna diatasnya.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>Agar JQuery yang kau gunakan menjadi ringan dan tidak menciptakan loading blog berat, silahkan baca artikel galih yang berjudul Cara meringankan Jquery di Blogger.
4. Tambahkan instruksi berikut ini pada bab Body. Jika kau menggunakan Blogger, silahkan masuk ke hidangan Tema > Edit HTML > Cari tag </body> kemudian letakkan instruksi berikut ini sempurna diatasnya.
<script type='text/javascript'> //<![CDATA[ //Progress Bar $(document).ready(function() { var getMax = function() { return $(document).height() - $(window).height(); } var getValue = function() { return $(window).scrollTop(); } if ('max' in document.createElement('progress')) { var progressBar = $('progress'); progressBar.attr({ max: getMax() }); $(document).on('scroll', function() { progressBar.attr({ value: getValue() }); }); $(window).resize(function() { progressBar.attr({ max: getMax(), value: getValue() }); }); } else { var progressBar = $('.progress-bar'), max = getMax(), value, width; var getWidth = function() { value = getValue(); width = (value / max) * 100; width = width + '%'; return width; } var setWidth = function() { progressBar.css({ width: getWidth() }); } $(document).on('scroll', setWidth); $(window).on('resize', function() { max = getMax(); setWidth(); }); } }); //]]> </script>5. SIMPAN
Itu saja tutorial dari galih berjudul Cara menciptakan scrolling progress bar di Blogger. Silahkan share jikalau bermanfaat dan Subscribe jikalau kau ingin mengetahui artikel terbaru galih. Sumber https://www.galihdesign.com/