Реклама

Поиск

пятница, 16 мая 2014 г.

Кнопки вверх и вниз на блог blogger

Здравствуйте дорогие читатели моего блога!Недавно нашёл новый,необычный виджет для вашего блога на blogger.
Обычно встречаются сайты где только есть прокрутка вверх или вниз.Но виджет прокрутки с шестью кнопками встретил впервые.
В виджете присутствуют стандартные кнопки вверх и вниз , также присутствуют в начало статьи,к концу статьи,авто прокрутка и стоп авто прокрутка.
Показать как выглядит этот виджет простите показать не могу.
Установка виджета Auto Scroll, Stop Scroll.
Для установки в блог панели с кнопками зайдите в blogger - шаблон - изменить HTML и выше тега </body> вставляем код:
<style>
#dp-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#dp-scroll a{display:block;float:left;background-color:#09970F;background-image:url(http://lh5.ggpht.com/-wREw7V6WEsg/UYQq0-d5cWI/AAAAAAAABsI/vnH-wGlJp6s/s216/scroll.png);width:36px;height:36px;text-indent:-999em}
#dp-scroll a.dp-up{background-position:0 -36px}
#dp-scroll a.dp-down{background-position:0 -72px}
#dp-scroll a.dp-bottom{background-position:0 -108px}
#dp-scroll a.dp-scroll{background-position:0 -144px}
#dp-scroll a.dp-stop{background-position:0 -180px}
#dp-scroll a:hover{background-color:#064D09}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='dp-scroll'>
<a class='dp-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='Наверх'>Наверх</a>
<a class='dp-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='К началу страницы'>К началу страницы</a>
<a class='dp-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='К концу страницы'>Вниз страницы</a>
<a class='dp-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='К футеру'>Вниз к футеру</a>
<a class='dp-scroll' href='javascript:autoScroll();' rel='nofollow' title='Автопрокрутка'>Автопрокрутка</a>
<a class='dp-stop' href='javascript:stopScroll();' rel='nofollow' title='Стоп Scroll'>Стоп Scroll</a>

</div>
Название кнопок меняйте на любое.Цвет фона при наведении курсора меняйте здесь-#09970F, #064D09.
Расположение панели-left(левое),если нужно поменяйте на -right(правое).

Комментариев нет:

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

Реклама