Стрелочная навигация по страницам в Blogger

Вечер добрый! Как вы себя чувствуете после майских праздников, друзья?
Надеюсь, что вы в порядке и готовы к небольшому нововведению для своего блога на Blogger.

Сегодня речь пойдет о навигации по веб-сайту с помощью клавиш со стрелками на клавиатуре. Реально - это действительно полезная вещь, так как для перехода к новой записи нужно просто нажать одну клавишу. И что самое интересное реализовать это не так уже и сложно.
Демонстрацию данного виджета можно увидеть прямо на этой странице. Если Вы читаете эту запись со стационарного ПК, то чтобы проверить навигацию нажмите, например, клавишу со стрелкой вправо ➨ (не забудьте вернуться назад ;-)).  К слову, эта навигация работает не только на страницах записей, а так же и на главной странице и страницах ярлыков.

Читайте также: [Blogger]: Добавляем виджет сообщества Вконтакте/Facebook (с эффектом при наведении) 

Зачем нужен этот виджет?

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

Друзья, не забудьте сообщить об этом обновлении (например, создайте запись, где расскажите читателям о своем нововведение; сделайте всплывающее сообщение или запись в сайдбаре).

Как это работает?

Если вам интересно, о том, как это работает, то ниже фактический и рабочий код этого виджета. Код слушает ввод с клавиатуры, и если обнаруживает событие "Стрелка", он будет перенаправлять пользователя на следующую или предыдущую страницу.

<script type='text/javascript'>
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
}
};
</script>

Этот код нужно вставить на странице редактирования шаблона.
1. Заходим в Панель управления и выбираем нужны блог.
2. В сайдбаре слева выбираете вкладку Шаблона затем на обновившейся странице нажимаете на кнопку Изменить HTML и прямо перед закрывающим тегом </body> вставляем код.

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



Всех с Днем Победы! Не забывайте тех, кто отдавал за нас свою жизнь и здоровье.
До новых встреч ;)