Главная » Дизайн » Два индикатора прокрутки для Blogger

Два индикатора прокрутки для Blogger

Индикаторы, представленные сегодня в статье, особого функционального значения для блога не имеют. Они нужны для украшения и, скорее, для развлечения посетителей.

Первый вариант - с процентами

Когда прокручивается скроллингом страница блога вниз или вниз, можно увидеть около полосы прокрутки, в процентах, сколько осталось до конца статьи.

Заходим в Blogger / Шаблон / Изменить HTML.

Находим строчку ]]></b:skin> и чуть выше добавляем код CSS:

#BloggerScroll {
display: none;
position: fixed;
top: 0;
right: 10px;
z-index: 500;
padding: 3px 8px;
background-color:#000000;
color: #fff;
border-radius: 3px;
}
#BloggerScroll:after {
content: " ";
position: absolute;
top: 50%;
right: -7px;
height: 0x;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: rgb(4, 189, 250);
}
@media screen and (max-width:600px){
#BloggerScroll{
display:none;
}

Если нужно, меняем цвет фона, в коде выделила красным

Теперь находим в шаблоне тег </head> и сразу после него вставляем:

<div id='BloggerScroll'/>

Ищем в шаблоне </body> и чуть выше вставляем код JavaScript:

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#BloggerScroll').height() / 2;
$('#BloggerScroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('BloggerScroll').fadeOut();
}, 1500);
});
//]]>
</script>

Сохраняем шаблон.

Видела код на многих зарубежных и российских сайтах. Автора назвать не могу.

Второй вариант - горизонтальная линия

Сверху, при прокрутке страницы, будет появляться цветная полоса.

Заходим в Blogger / Дизайн / Добавить гаджет/ HTML/JavaScript.

И добавляем код:

<div class='progress-container'>
<div class='progress-bar' id='myBar' style="width:0%;"></div>
</div>
<script>
window.onscroll = function() {
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("myBar").style.width = scrolled + "%";
}
</script>
<style>
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#F86152;}
</style>

Меняем цвет линии, в коде выделила красным.

Если есть желание поставить не одноцветную линию, а градиентную, то в коде нужно поменять выделенный синим цветом участок, на:

.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;infinite running Gradient; background: rgba(0, 0, 0, 0) linear-gradient(-50deg, #ea3a7e, #20aadb, #23e0b3)}

Цвет градиента можно менять - выделила в коде зелёным цветом.

Ваши комментарии:

Комментарии со спамом удаляются.