Кнопки передвижения вверх-вниз по статьям блога

Блог Владимира Шишкова

Как создать, раскрутить и зарабатывать на своем блоге

Работа с блогом

Кнопки передвижения вверх-вниз по статьям блога

Кнопки передвижения вверх-вниз по статьям блога
5 (100%) 52 голос[ов]

Кнопки передвижения вверх-вниз по статьям блога

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

Кнопки вверх-вниз

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

Для начала нужно создать свои кнопки вверх-вниз, скачать их из интернета или самостоятельно создать их в PhotoShop и придать им необходимый вид, который Вам нравиться.

Внимание ! Помните! Если будете создавать кнопки круглыми, треугольными и другой формы, кроме квадратных, то сохраняйте их в формате .PNG, для того, чтобы фон за ними был прозрачный. Так они будут смотреться эффектно.

 

Я не буду останавливать на том, как найти или создать кнопки вверх и вниз. Я думаю, Вы сами с этим успешно разберетесь.

После того, как кнопки будут готовы в формате .Png или для квадратных кнопок можно в .Jpeg, с непрозрачным фоном. Предварительно сожмите их, чтобы уменьшить размер. Это даст возможность им быстрее загружаться.

Как эффективно сделать сжатие кнопок, читайте мою статью: “Онлайн-сервис сжатия объема изображений и картинок“.

Копирование кнопок на хостинг

Теперь, когда наши кнопки будут готовы приступаем к их вставке на блог.

Копирование кнопок на хостинг

Рис. 1

Запускаем файловый менеджер WinSCP, FileZilla или другой который есть у Вас и заходим на свой хостинг. Затем заходим в папку со своим блогом. Если у Вас блог на WordPress, то обычно это путь: /ваш_домен/public_html/wp-content/themes/ваша_тема/images/ваша_картинка. И копируем наши кнопки на хостинг (Рис.1-п.1).

Если по какой-либо причине каталога images не будет, то его можно создать самостоятельно.

Внимание ! Внимание! Старайтесь кнопки не делать слишком большими, так как если у Вас блог адаптивный под мобильные устройства, то они будут закрывать часть контента, что не очень хорошо. Свои кнопки я сделал в Photoshop размером по 40px. Этого вполне достаточно.

 

После того, как мы скопировали наши кнопки на хостинг, переходим к нашему коду. Который мы будем вставлять в один единственный файл на нашем хостинге functions.php.

Вставка кода в файл functions.php

Редактирования файла functions.php

Рис. 2

 

Заходим на хостинг и переходим в наш файл через программу NotePad++ (Рис.2), либо другим удобным для Вас способом. Как это сделать смотрите статью: “Подключение к файлам блога по FTP в программе NotePad++“.

Готовый код

И затем вставляем в него код, который выглядит так:

Внимание !
function function_updown (){
echo <<<EOT
<a style='position: fixed; bottom: 60px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="http://ваш_домен/wp-content/themes/ваша_тема/images/ваша_картинка.png"
 alt="Наверх" title="Наверх"></a>
<a style='position: fixed; bottom: 20px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
<img src="http://ваш_домен/wp-content/themes/ваша_тема/images/ваша_картинка.png" 
alt="Вниз" title="Вниз"></a>
<script type="text/javascript">
jQuery(function($){
$("#Go_Top").hide().removeAttr("href");
if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#Go_Top").fadeOut("slow")
else $("#Go_Top").fadeIn("slow")
});

$("#Go_Bottom").hide().removeAttr("href");
if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
else $("#Go_Bottom").fadeIn("slow")
});

$("#Go_Top").click(function(){
$("html, body").animate({scrollTop:0},"slow")
})
$("#Go_Bottom").click(function(){
$("html, body").animate({scrollTop:$(document).height()},"slow")
})
});
</script>
EOT;
}
add_action('wp_footer', 'function_updown');

 

Идем в самый низ файла functions.php и вставляем наш код.

Затем правильно вставьте путь к своим картинкам кнопок на хостинге. Эти пути обозначены в коде ярко-фиолетовым цветом, сохраните и обновите страниц своего блога клавишами Shift+F5.

Внимание ! Читайте статьи:
 Автоматическая вставка атрибута title в WordPress
 Авторизация на блоге с помощью социальных сетей
 Комментирование на блоге через социальные сети

 

Готовые кнопки на блоге

Теперь смотрите на полученный результат (Рис.3).

Готовые кнопки вверх-вниз на блоге

Рис. 3

Теперь наши кнопки установлены и мы можем их настраивать под свои нужды. Например:

  1. Увеличить расстояние снизу изменив параметр – bottom: 60px; (сделав его больше или меньше)
  2. Отодвинуть от правого края – right: 1px; (увеличив, расстояние справа или изменив значение на – left: 1px; – сделать по левому краю) и т.д.

Здесь все зависит теперь от Вашей фантазии. Также можно стилями уменьшать или увеличивать кнопки, но я это не рекомендую. Лучше воспользоваться средствами PhotoShop и сразу придать кнопкам нужный размер, это не будет ухудшать качество кнопок и создавать дополнительную нагрузку на хостинг.

Еще один совет. Если Вы ведете свой блог и решили установить на него кнопки вверх-вниз. Не делайте их слишком яркими, так как это будет отвлекать читателя от чтения статей.

Внимание ! Помните! Блог славиться не только своим удобством для пользования, но в первую очередь удобством для чтения.

 

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

Буду рад Вашим вопросам и комментариям

Успехов Вам
С уважением Владимир Шишков

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Кнопки передвижения вверх-вниз по статьям блога
5 (100%) 52 голос[ов]

Работа с блогом

Рекомендую статьи

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован.



Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: