Здравейте, всички! Преди месец ви запознах как да инсталирате в блога си Rainbow Progress Bar, онази бързо зареждаща се с цветовете на дъгата лента в горната част на блога. От нейното състояние правим извод за бързината на зареждане на страницата в блога ни.
Публикацията е допълнена и актуализирана на 29.10.2019.
Но ако искате блога ви да изглежда по-добре, по-красив, ви съветвам да инсталирате и Progress Scrollbar.
DEMO
➤Отворете панела на Blogger ➔ Кликнете върху менюто Теми ➔ Редактирайте HTML;
➤Ще добавим три кода на чист JavaScript на три места на Темата.
С този и следващия код ще осигурим появяването на Progress Scrollbar в тялото на блога. Копирайте и инсталирайте без промяна.
➤В червено е маркирана дебелина на лентата Progress Scrollbar;
➤В синьо са маркирани местата в кода, с които се определя цвета на Progress Scrollbar. Съобразете се с дизайна на блога си;
Съветите ми днес може да не са много важни, но се надявам да са полезни.
DEMO
Кодът е:
➤Притурката позиционирайте колкото се може по - ниско в оформлението на блога.
➤В червено са маркирани цветовете на контейнера и плъзгача, които може да приспособите според дизайна на блога си.
Надявам се, че така ще ви е по-лесно.
За въпроси моля, в коментарите. А може и на тази страница.
Ще съм благодарна да оцените моя труд и гласувате за блога ми на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Но ако искате блога ви да изглежда по-добре, по-красив, ви съветвам да инсталирате и Progress Scrollbar.
Какво представлява лентата за превъртане Progress Scrollbar?
Подобно на Rainbow Progress Bar лентата за превъртане Progress Scrollbar е хоризонтална, но едноцветна линия, чиято дължина нараства с напредване скролирането по страницата. Колкото по-близо до края на страницата е потребителят, толкова е по-дълга е тази хоризонтална едноцветна линия. Когато сме в края на страницата линията Progress Scrollbar изпълва цялата ѝ ширина.DEMO
Инсталиране
Тези от вас, които се интересуват от инсталирането на Progress Scrollbar, могат да следват съветите ми по-долу.➤Отворете панела на Blogger ➔ Кликнете върху менюто Теми ➔ Редактирайте HTML;
➤Ще добавим три кода на чист JavaScript на три места на Темата.
Кодове
Код преди </body>
С този и следващия код ще осигурим появяването на Progress Scrollbar в тялото на блога. Копирайте и инсталирайте без промяна.
<script type='text/javascript'>
//<![CDATA[
// Progress Scrollbar
$(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("progress")){(r=$("progress")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".progress-bar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
//]]>
</script>
Код преди <body>
<progress value='0' max='1'>
<div class='progress-container'>
<span class='progress-bar'></span>
</div>
</progress>
Код преди </head>
Този код определя стиловете на Progress Scrollbar, които можете да промените според вашето желание и дизайна на блога си.<style type='text/css'>
/* Progress Scrollbar */
progress{position:fixed;left:0;top:0;width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#f39c12;z-index:1000}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background-color:#f39c12;z-index:10}
progress::-moz-progress-bar{background-color:#f39c12;z-index:10}
.progress-container{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
.progress-bar{background-color:#f39c12;width:0%;display:block;height:inherit;z-index:10}
</style>
➤В червено е маркирана дебелина на лентата Progress Scrollbar;
➤В синьо са маркирани местата в кода, с които се определя цвета на Progress Scrollbar. Съобразете се с дизайна на блога си;
Съветите ми днес може да не са много важни, но се надявам да са полезни.
Втори начин
По този, втори начин, можете да постигнете същия резултат, но чрез код, който се вписва в тялото на притурка HTML/JavaScript.DEMO
Кодът е:
<div class="progress-container">
<div class="progress-bar" id="progressbar"></div>
</div>
<script>
//<![CDATA[
window.addEventListener("scroll", myFunction);
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("progressbar").style.width = scrolled + "%";
}
//]]>
</script>
<style>
.progress-container {
width: 100%;
height: 3px;
background: #1е3753;
position: fixed;
top: 0;
left: 0;
z-index: 9999
}
.progress-bar {
height: 3px;
background: #26c6da;
width: 0%
}</style>
<div class="progress-bar" id="progressbar"></div>
</div>
<script>
//<![CDATA[
window.addEventListener("scroll", myFunction);
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("progressbar").style.width = scrolled + "%";
}
//]]>
</script>
<style>
.progress-container {
width: 100%;
height: 3px;
background: #1е3753;
position: fixed;
top: 0;
left: 0;
z-index: 9999
}
.progress-bar {
height: 3px;
background: #26c6da;
width: 0%
}</style>
➤Притурката позиционирайте колкото се може по - ниско в оформлението на блога.
➤В червено са маркирани цветовете на контейнера и плъзгача, които може да приспособите според дизайна на блога си.
Надявам се, че така ще ви е по-лесно.
За въпроси моля, в коментарите. А може и на тази страница.
Ще съм благодарна да оцените моя труд и гласувате за блога ми на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Thank you, Pavel from Europe.
ОтговорИзтриванеYou made me happy.