Инсталиране на Progress Scrollbar в Blogger

Pepa Tabakova

понеделник

Здравейте, всички! Преди месец ви запознах как да инсталирате в блога си Rainbow Progress Bar, онази бързо зареждаща се с цветовете на дъгата лента в горната част на блога. От нейното състояние правим извод за бързината на зареждане на страницата в блога ни.

Публикацията е допълнена и актуализирана на 29.10.2019.

Но ако искате блога ви да изглежда по-добре, по-красив, ви съветвам да инсталирате и Progress Scrollbar.

Какво представлява лентата за превъртане Progress Scrollbar?

Подобно на Rainbow Progress Bar лентата за превъртане Progress Scrollbar е хоризонтална, но едноцветна линия, чиято дължина нараства с напредване скролирането по страницата. Колкото по-близо до края на страницата е потребителят, толкова е по-дълга е тази хоризонтална едноцветна линия. Когато сме в края на страницата линията Progress Scrollbar изпълва цялата ѝ ширина.

DEMO

Инсталиране

Тези от вас, които се интересуват от инсталирането на Progress Scrollbar, могат да следват съветите ми по-долу.

➤Отворете панела на Blogger ➔ Кликнете върху менюто Теми ➔ Редактирайте HTML;

➤Ще добавим три кода на чист JavaScript на три места на Темата.

Кодове

Код преди </body>

С този и следващия код ще осигурим появяването на Progress Scrollbar в тялото на блога. Копирайте и инсталирайте без промяна.

//<![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>

</div>

</progress>

Код преди </head>

Този код определя стиловете на Progress Scrollbar, които можете да промените според вашето желание и дизайна на блога си.

/* 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>

➤Притурката позиционирайте колкото се може по - ниско в оформлението на блога.
➤В червено са маркирани цветовете на контейнера и плъзгача, които може да приспособите според дизайна на блога си.

Надявам се, че така ще ви е по-лесно.

За въпроси моля, в коментарите. А може и на тази страница.

Ще съм благодарна да оцените моя труд и гласувате за блога ми на:

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Cancel