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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5A3r9drl9Nr2Ma2YvYIgyiMp0dHuiDxhE7kCD00OOgj_ktoogdBxxrBlTpiVSqMC0tRGsRYCeu0ft7ecIKJxQW2nteKsJ9PMWkLJ9lexptpwRAlQ3YHAMPt4fsHjsC59WG0qNDDuzfdw/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5A3r9drl9Nr2Ma2YvYIgyiMp0dHuiDxhE7kCD00OOgj_ktoogdBxxrBlTpiVSqMC0tRGsRYCeu0ft7ecIKJxQW2nteKsJ9PMWkLJ9lexptpwRAlQ3YHAMPt4fsHjsC59WG0qNDDuzfdw/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5A3r9drl9Nr2Ma2YvYIgyiMp0dHuiDxhE7kCD00OOgj_ktoogdBxxrBlTpiVSqMC0tRGsRYCeu0ft7ecIKJxQW2nteKsJ9PMWkLJ9lexptpwRAlQ3YHAMPt4fsHjsC59WG0qNDDuzfdw/s90/updowngraycircle96.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3uiQlqVkpwNrzpyP8vXnEuT8YT0EO-ceWy6N0D_fenia-8umwQFdiJJmHeIyLA_ogp7vI5OkoJZc7-K4hy0uIcyzEPCnnhRr7-6t828KroVwPkDLuSI0nTtnyBsdlX7moApXv1f94uV4/s90/updownblack96.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWwbg_yKy8m0dufvkyeJzeisW3VaYxGS3Okt7zIUdEZhKRznOHpNeqTsAxYh-Sq8MvOtgluJYaWT_i1zDdKhAi9PdPiI_9nU2w0_p2j-uokfBpscDgdmi4EkzB1jY3H-rlFeAwoi7wCC8/s90/updownblue96.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4rRwfqErec7Pj-jDsGkrHszRNfliFD7LKd_OANLG9E_ayGZPjgFIuq5jgmiMuyFswR1ObLjl-WtsetY03Uhu_892BEEm69ITkf51J25gk3CtENg1Oxmg0O4ZvWefLHBaYZgXJuqVYHI/s90/updowngray96.pnghttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8QjkEG9P0-O-kW3B1xlCjMf_WET7_ONSu-oxzZQX0HaIjnP1KoDq0e-oHZJnHDY9pO_pIDAZRNlLOARgvfNQebY3755p2hyzIIoOBRZ_rixQN0SsM5HSKAuWdr8FaIhlJYnXJxU-zS8I/s90/updownred96.png

Cancel