Кнопки для перемещения вверх и вниз по странице
Обычно в блогах 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(/wp-content/uploads/\‘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(/wp-content/uploads/\’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
