Виджет скроллинг страницы в процентах

Просмотров: 402

Привет дорогие друзья! После длительного перерыва (вынужденного), наступил долгожданный день, когда я снова с вами. Моё долгое отсутствие связано с переездом на новую квартиру (переехать из коммуналки в собственную хату, мечта номер один в жизни). Купили квартиру без отделки, пока обустраивал жильё, было не до обновления блога, да ещё плюс к этому, дом пока не подключен к проводному интернету. Пришлось купить модем мегафоновский, так что теперь всё в порядке, можно заниматься блогом.

Долго думал, чтобы хорошего, полезного вам предложить, чтобы вас не разочаровать. Ведь время не стоит на месте и поэтому некоторые вещи (виджеты, трюки) устаревают, становятся не актуальными на сегодняшний день. Приходится быть более разборчивым в выборе виджетов для вас, хочется поделиться с вами именно теми гаджетами, трюками, которые будут востребованы всегда для Blogger.

Скроллинг в процентах
Скроллинг страницы блога в процентах

Сегодня речь пойдёт об интересном гаджете: виджет - показ прокрутки/скроллинг страницы в процентах. Можно назвать иначе - проценты для прокрутки страницы в Blogger. Как ни назови его, а смысл один и тот же. Когда ваш читатель прокручивает страницу блога вниз, он может наблюдать в процентах (около полосы прокрутки), сколько осталось до конца статьи. Так же, показывает проценты если прокручивать страницу вверх. Вот, как то, так. Это будет весьма полезно для ваших посетителей, наблюдать сколько ещё осталось прочитать содержания  или комментариев в блоге.

Дорогие читатели, я не стал пока делать демо, посмотрите скриншот как будет выглядеть виджет:

procenty
Прокрутка в процентах

Пожалуйста, кто заинтересовался, прошу зайти в панель инструментов Blogger - Шаблон - Изменить HTML. Находим строчку ]]></b:skin> и чуть выше добавляем код CSS:

#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}

В этом коде можно настроить виджет - цвет фона, позицию от верха и так далее. Очень многие мои читатели не могут найти строку ]]></b:skin>, пишут, что её попросту нету. Будьте внимательней, такая строка есть, выше её находятся стили CSS.

skin
Ищем такую строку в шаблоне

Далее, в шаблоне находим </head> и сразу после неё вставляем такую строчку <div id='scroll'></div> Затем ищем </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 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>

Сохраните шаблон. Подсмотрено в блоге mybloggerlab.

Теперь друзья, если Вы пользуетесь сервисом Pluso и у вас стоят красивые социальные кнопки от этого замечательного сервиса, тогда этот небольшой трюк для вас.

Как скрыть последнею кнопку pluso-more

pluso-more
Как скрыть последнею кнопку pluso-more

Заходим в панель инструментов Blogger - Шаблон - Изменить HTML. Находим строчку ]]></b:skin> и чуть выше добавляем простой код:  .pluso-more {display: none !important;} Всё, готово. Кнопка исчезла. Здесь, кому надо, подробно написано как вставлять стили в шаблон Blogger. На этом позвольте с вами попрощаться. Удачи. До новых встреч.

С уважением, Сергей


2 комментария к “Виджет скроллинг страницы в процентах”

  1. Сергей, спасибо — вновь нужные и приятные новости! И — с обретением своего ДОМА, — искренне поздравляю! А так же от Клуба «Blogspot» на Портале ProШколу.

    Ответить
    • Спасибо большое за поздравление.Постараюсь наверстать упущенное время — побольше хороших и важных постов в блог.

      Ответить

Оставьте комментарий