Многофункциональный виджет прокрутки страниц блога



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


Стрелки вверх-вниз, стрелки прокрутки до середины страницы сверху и снизу, автоматическая прокруткаЗдравствуйте дорогие читатели и посетители. Что только не придумают для удобного чтения информации на сайтах и блогах, чтобы значит читателям было комфортно изучать информацию и быстренько перемещаться вверх или вниз страницы на сайтах. Сегодня предлагаю Вашему вниманию чудесный многофункциональный виджет стрелок шесть в одном: стрелка наверх; стрелка вниз; стрелка прокрутки сверху на середину страницы; стрелка прокрутки снизу на середину страницы; медленная автопрокрутка для удобного чтения; кнопка стоп автопрокрутки. Пример можно посмотреть в демо блоге.


Виджет легко устанавливается и настраивается. Установить можно двумя способами: первый-черновик blogger-дизайн-добавить гаджет; второй-вставить код в шаблон-изменить шаблон.

Первый способ протестировала на своих блогах: на родных шаблонах blogspot установился без проблем. На одном из не стандартных шаблонов этот способ не прокатил. Когда вставила непосредственно в шаблон-изменить шаблон, виджет стал рабочий. Поэтому пробуйте, может кому то повезет и не придется залазить в шаблон.

Далее информация, как вставить код в тело шаблона. Для начала скопируйте код ниже.

<style>#bsautoscroll{position:fixed;z-index:9999;bottom:0;right:0}#bsautoscroll a{display:block;float:left;background-color:#2DB3E9;background-image:url(http://4.bp.blogspot.com/-cbl1BzEtRn0/UaCHAbq7E8I/AAAAAAAADGQ/sSfZLUJoeuM/s1600/BS+Auto+Scroll.png);width:36px;height:36px;text-indent:-999em}#bsautoscroll a.bsup{background-position:0 -36px}#bsautoscroll a.bsdown{background-position:0 -72px}#bsautoscroll a.bsbottom{background-position:0 -108px}#bsautoscroll a.bsautoscroll{background-position:0 -144px}#bsautoscroll a.bsstop{background-position:0 -180px}#bsautoscroll a:hover{background-color:#8E006B}</style><script>function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout(&#39;autoScroll()&#39;,50)}function stopScroll(){clearTimeout(scrolldelay)}</script><div id='bsautoscroll'><a class='bstop' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a><a class='bsup' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a><a class='bsdown' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a><a class='bsbottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a><a class='bsautoscroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a><a class='bsstop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a></div>


Как и где найти в шаблоне закрывающий тэг </body> и вставить код виджетаЗатем переходим на вкладку шаблон. Делаем на всякий случай резервную копию шаблона. 

Нажимаем-изменить шаблон. Жмем на стрелки слева, раскрываем шаблон. Нам надо найти закрывающий тэг </body>
Нашли тэг и выше вставляем скопированный код, смотрите скриншот.

Основные настройки виджета: #2DB3E9-цвет фона виджета; #8E006B-цвет при наведении мыши на кнопку; width:36px;height:36px;-ширина и высота кнопок; right-измените на left, если надо установить виджет слева. 

Все, что у меня выделено сиреневым цветом можно перевести или оставить как есть: To Top-стрелка наверх; Page Up-переход сверху на середину страницы; Page Down-переход снизу на середину страницы; To Botton-стрелка прокрутки вниз; Auto Scroll-автопрокрутка страницы; Stop Scroll- стоп автопрокрутке.

Вот вроде и все, ничего не забыла. Комментируйте, делитесь с друзьями. Всего Вам доброго.




Автор статьи ✎ Olga Protasova Выпуск ✹ 4/23/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

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

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *