Blogger: кнопки для перемещения вверх и вниз по странице

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


Кнопки для перемещения вверх и вниз по странице

Обычно в блогах Blogger есть домашняя страница с минимум 6 статьями, что делает её довольно длинной. Более того, даже для того, чтобы сделать сайт более удобным для SEO , мы часто публикуем довольно длинные посты. Наконец, наши статьи получают много комментариев, особенно на часто посещаемых сайтах.

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

Эта настройка не требует внешних библиотек, поэтому она очень легкая и не влияет отрицательно на скорость загрузки сайта. Также будет возможность выбрать цвет кнопок, в соответствии со стилем нашего сайта. Хотя представленный код был протестирован только на платформе Blogger, я не исключаю, что он может работать даже на сайтах разных платформ, поскольку он не использует какой-либо конкретный тег на платформе.

Кроме того, кнопки используют изображения, созданные с помощью системы CSS Sprite , которая будет показывать эффект при наведении курсора, когда ридер передает курсор кнопкам. Вам даже не нужно загружать изображения кнопок в Интернет, чтобы получить ссылки, потому что я сделал это сам, и я предоставлю URL-адреса вам.

Вы можете выбрать между этими 5 стилями кнопок



стили кнопок


Тот, который вставлен по умолчанию в код виджета, является первым. Установка на Blogger очень проста. Зайдите в Дизайн -> Добавить гаджет -> HTML / Javascript и вставьте этот код в раздел блога.

<div id="updownbutton"><script type='text/javascript'>
//<![CDATA[
var HIPCEI = "<style type=\"text/css\">#updownbutton .updownbutton, #updownbutton .updownbutton div{    padding:0px;    margin:0px;    border:0px;}#updownbutton .navigation_up_down{    margin:auto;    width:30px;    height:60px;    position:fixed;    bottom:80px;    right:8px; } #updownbutton .navigation_up_down .navigation_up_down_up{    margin:auto;    display:block;    width:30px;    height:30px;    cursor:pointer;    background:url(\'https://lh4.googleusercontent.com/-vTPaW1iFTDM/T1oYK5Cuf8I/AAAAAAAAWy0/VWLRGUAjsdw/s90/updowngraycircle96.png\');    background-position: 0px 0px;}#updownbutton .navigation_up_down .navigation_up_down_up:hover{    background-position: -30px 0px;}#updownbutton .navigation_up_down .navigation_up_down_up:active{    background-position: -60px 0px;}#updownbutton .navigation_up_down .navigation_up_down_down{    margin:auto;    display:block;    width:30px;    height:30px;    cursor:pointer;    background:url(\'https://lh4.googleusercontent.com/-vTPaW1iFTDM/T1oYK5Cuf8I/AAAAAAAAWy0/VWLRGUAjsdw/s90/updowngraycircle96.png\');    background-position: 0px -30px;}#updownbutton .navigation_up_down .navigation_up_down_down:hover{    background-position: -30px -30px;}#updownbutton .navigation_up_down .navigation_up_down_down:active{    background-position: -60px -30px;}</style><div class=\"navigation_up_down\">    <div class=\"navigation_up_down_up\" onclick=\"window.scrollTo(0,1);window.scrollTo(0,0);\"></div>    <div class=\"navigation_up_down_down\" onclick=\"window.scrollTo(document.body.scrollWidth,document.body.clientHeight*100000);\"></div></div>";
document.getElementById('updownbutton').innerHTML=HIPCEI;
//]]>
</script></div>

Нажмите « Сохранить», не помещая заголовок в гаджет, и расположитесь на боковой панели . Положение кнопок выбирается путем изменения нижней строки : 80 пикселей; справа: 8 пикселей; который устанавливает расстояние в пикселях от нижней и правой стороны макета . Вы также можете выбрать расположение кнопок, установив расстояние сверху и слева с помощью верхних тегов (bottom left) слева и  (bottom right ).

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

URL-адрес изображения кнопки должны быть введен дважды в коде. Вы можете поместить один из следующих 5 URL . Чтобы отобразить соответствующую кнопку, просто вставьте адрес в браузер и нажмите Enter.

https://lh4.googleusercontent.com/-vTPaW1iFTDM/T1oYK5Cuf8I/AAAAAAAAWy0/VWLRGUAjsdw/s90/updowngraycircle96.png

https://lh3.googleusercontent.com/-J5XTwtLUDDg/T1oX_T_PxzI/AAAAAAAAWyc/WUHB9TAhso4/s90/updownblack96.png

https://lh3.googleusercontent.com/-qNjSpB16A3A/T1oYDPp4FII/AAAAAAAAWyk/xIQYiu0DwXs/s90/updownblue96.png

https://lh3.googleusercontent.com/-KLYDW3tkuFo/T1oYFwblZdI/AAAAAAAAWys/efJHmdeDEIs/s90/updowngray96.pnghttps://lh5.googleusercontent.com/-VK_7NBAixks/T1oYNrl4HbI/AAAAAAAAWy8/2ynTtHq2Dq4/s90/updownred96.png


ОткрытьЗакрытьКомент
Cancel