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


Сегодня у нас на повестке весьма интересная примочка для блога это скроллинг в процентах. Иногда бывает лазишь по блогу, смотришь читаешь, прокручиваешь страницу вниз и думаешь ну много там еще осталось читать и тогда на помощь приходит наш новый виджет. В принципе сложно оценить полезность этого виджета, но я думаю, что лишним он не будет, и места много не занимает). Итак, если вы еще не догадались о чем идет речь объясняю, что когда вы прокручиваете свою страницу вниз, а потом вверх слева от скроллинга выплывает анимация отображающая процент пройденного пути и посетитель видет сколько ему еще осталось до нижней или же верхней части блога. Возможно кто-то из вас уже видел эту функцию на других сайтах. В общем неплохая вещь, стоит заценить.

Для установки этой функции необходимо перейти в раздел Шаблон - Изменить HTML нажать CTRL+F и найти код ]]></b:skin> перед которым нужно вставить следующий код:

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

Затем ищем код </head> и после него вставляем:
<div id='scroll'></div>

И финальный аккорд находим </body> и перед ним вставляем:

<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(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

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


Коммент.

Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Скроллинг блога в процентах
Скроллинг блога в процентах
Красивый виджет для блога на blogpsot прокрутка страницы в процентах.
http://1.bp.blogspot.com/-7QuN0o3nxys/VcmlTxCq-AI/AAAAAAAAfUg/IzyZ0zmpTV4/s400/%25D1%2581%25D0%25BA%25D1%2580%25D0%25BE%25D0%25BB%25D0%25BB%25D0%25B8%25D0%25BD%25D0%25B3%2B%25D0%25B2%2B%25D0%25BF%25D1%2580%25D0%25BE%25D1%2586%25D0%25B5%25D0%25BD%25D1%2582%25D0%25B0%25D1%2585.png
http://1.bp.blogspot.com/-7QuN0o3nxys/VcmlTxCq-AI/AAAAAAAAfUg/IzyZ0zmpTV4/s72-c/%25D1%2581%25D0%25BA%25D1%2580%25D0%25BE%25D0%25BB%25D0%25BB%25D0%25B8%25D0%25BD%25D0%25B3%2B%25D0%25B2%2B%25D0%25BF%25D1%2580%25D0%25BE%25D1%2586%25D0%25B5%25D0%25BD%25D1%2582%25D0%25B0%25D1%2585.png
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2015/08/scrolling-bloga-v-procentah.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2015/08/scrolling-bloga-v-procentah.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy