Как самому сделать кнопку наверх?

С сегодняшнем wordpress уроке я расскажу вам о том, как можно легко и быстро сделать кнопку ” Наверх ” у себя на сайте.

вверх

Все делается довольно примитивно! И так, начинаем..

Хочу сразу сказать, что для оптимизации и ускорения работы сайта мы обойдемся без использования плагинов!

Первым делом скачиваем Этот архив – в нем находятся три файла:

Первый файл – это картинка наверх (top.gif);

Второй и третий файл – это два бонуса (зеленая и синяя кнопка).

Разархивируем Zip архив и зальем один из файлов (картинку) в корень сайта. (хотя можно и в любое другое место)
У меня она располагаются по следующему адресу:

http://sergey-oganesyan.ru/top.gif

Теперь заходим в админку блога :: Дизайн :: Редактор , выбираем footer.php (нижняя часть сайта) и помещаем вот этот код между тегами <body> </body> (для поиска по странице нажмите Ctrl + F);

<noindex><a href="#" id="toTop"><img src="http://ваш сайт.ru/top.gif" />

Внимание: http://ваш сайт.ru/ – замените на адрес вашего сайта;

После этого обновляем шаблон и переходим к файлу шаблона под названием style.css (Список стилей) и в самый низ добавляем этот код:

#toTop {     
      width: 100px;     
      background: #ededed;     
      border: 0px solid #cccccc;     
      text-align: center;     
      padding: 5px;     
      position: fixed;     
      bottom: 10px;     
      right: 10px;     
 }

Обновляем шаблон.

При желании, вы можете изменит стиль вашей кнопки:

width: – ширина кнопка в пикселях;
background: – цвет фона;
border: толщина и цвет рамки;
text-align: выравнивание текста (стандартно – по центру);
padding: отступ (в пикселях)
position: – позиция (стандартно – фиксированная);
bottom: 10px;
right: – отступ от правого края;

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

На этом все, подписывайтесь на обновления, с вами был Сергей Оганесян. До новых встреч!

А на десерт у нам сегодня видео про необычный самолет

[youtube]hjKZOH5aihg[/youtube]


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

  1. Oleg пишет:

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

    <a href=”#”><img  width=”XX” height=”XX”  src=”http://путь к картинке.jpg” alt=”Наверх” title=”Наверх”/></a>

  2. Анни пишет:

    Добрый день! спасибо за полезную инструкцию, сделала кнопочку, только не могу разобраться в коде – что изменить, чтобы она была не справа, как у вас и как у меня сейчас, а слева? Заранее спасибо за ответ!

    • Здравствуйте! Для этого просто замените это:

      #toTop {     
            width: 100px;     
            background: #ededed;     
            border: 0px solid #cccccc;     
            text-align: center;     
            padding: 5px;     
            position: fixed;     
            bottom: 10px;     
            right: 10px;     
            cursor: pointer;     
            color: #666666;     
            text-decoration: none;}

      На это:

      #toTop {     
            width: 100px;     
            background: #ededed;     
            border: 0px solid #cccccc;     
            text-align: center;     
            padding: 5px;     
            position: fixed;     
            bottom: 10px;     
            left: 10px;     
            cursor: pointer;     
            color: #666666;     
            text-decoration: none;}

      Это ток кусочек кода, который ранее вы вставляли в файл style.css (Список стилей).

      Если есть вопросы на счет позиции кнопки вверх, например, как её сделать чуть левее или выше, пишите.

  3. Олег пишет:

    Поставил себе всетаки с плагином. Быстро и удобно. Только поиенял картинку. Не нравилось, что кнопка не исчезает в верхнем положении страницы.

  4. Димитрий пишет:

    проблема в том, что если нахожусь не на главной странице, не только вверх поднимает, но и возвращает на главную, что не есть хорошо:-(

  5. Димитрий пишет:

    Всё..уже разобрался, просто id=”toTop”> стояло в конце

  6. Anna пишет:

    Сергей, вот вы всё описываете, а где у вас на сайте это можно посмотреть? Ведь кнопочки у вас я не вижу?

  7. Anna пишет:

    Сергей, извините, не досмотрела до самого конца страницу. Кнопочка есть, только она сливается с фоном.

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>