Плавающая кнопка на сайте сбоку

Здравствуйте, сегодня поговорим о том как создать плавающие кнопки на своем сайте, которые придадут вашему сайту оригинальности.

Скачать исходники для статьи можно ниже

Для примера возьмем стандартную wordpress тему – Twenty Eleven.

Вот так будет выглядеть создаваемая нами кнопка:

плавающая кнопка на сайт

Демо-пример можно посмотреть тут:

http://mnogoblog7.p.ht/

 

Приступим:

1. Заходим в файл стилей style.css – для этого входим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл style.css.

После в самый низ файла style.css вставим следующий код:

.add_comment {
  display:block;
  width:30px;
  height:150px;
  position:fixed;
  left:0;
  top:200px;
  z-index: 99999;
}

Где:
width:30px; – ширина кнопки.
height:150px; – высота кнопки.
left:0; – отступ слева, если вы поменяете данную строчку на right:0;  – то кнопка будет располагаться справа, также можно указать отступ в пикселях, например: left:20px;
top:200px; – верхний отступ.
z-index: 99999; – задает расположение элемента поверх всех остальных, например у картинки шапки в теме Twenty Eleven данный параметр имеет значение 9999 и если ваша кнопка будет иметь значение ниже данного параметра, то она будет располагаться под ней.

Также можно добавить строчку:

background:#2B96C6; – она задает фон кнопки, можно задать как цвет, так и картинку.

 

2. Заходим в файл header.php – – для этого входим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл header.php.

В нем сразу после тега body вставляем вывод нашей кнопки:

<a href="ссылка на открываемую страничку" class="add_comment">Текст кнопки</a>

Как видите это код обычной ссылки, только для нее задан особый класс –
class=”add_comment”, стиль оформления которого мы прописали в пункте 1 данной статьи.

 

3.Чтобы придать дизайн кнопке, нужно создать для нее изображение.

Можно скачать кнопку в интернете и подкорректировать ее в Photoshope (или другом графическом редакторе), как я и сделал для данной кнопки, незабываем, что размер кнопки мы задаем в файле стилей style.css (пункт 1 данной статьи), в данном примере она имеет размеры: 30*150 px, следовательно и изображение для кнопки должно быть 30*150 px.

У меня получилось следующее изображение:

кнопка поддержи блог

Можете скачать ее и попробовать вставить ее к себе на сайт или на тестовый сайт на каком-нибудь бесплатном хостинге (я так пользуюсь hostinger.ru).

Теперь давайте привяжем данное изображение к кнопке, для этого изменим код вывода кнопки, который я предлагал в пункте 2 данной статьи, на следующий:

<a href="ссылка на открываемую страничку" class="add_comment"><img alt="buttons" src="https://mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a>

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

<a href="https://mnogoblog.ru/ob-avtore" class="add_comment"><img alt="buttons" src="https://mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a>

Все готово!

PS: Как сделать, чтобы кнопка была не видна на конкретной страничке.
В файл header.php нужно прописать следующее.
В данном примере, кнопка будет не видна на записи с id=1 – как посмотреть какой id у записи? – достаточно в панели управления wordpress зайти в пункт “Записи”, подпункт “Все записи”, открыть в Редакторе нужную запись и в адресной строке браузера у вас отобразиться id записи, например, если в адресной строке видим следующее “https://mnogoblog.ru/wp-admin/post.php?post=1&action=edit”, соответственно id странички равен 1.

<?php
if(is_single(1)) {
// если запись имеет ID=1
include 'single-290.php';
} else {

?>
<a href="https://mnogoblog.ru/ob-avtore" class="add_comment"><img alt="buttons" src="https://mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a>


<?php } ?>

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Плавающая кнопка на сайте сбоку: 12 комментариев

  1. Анатолий

    Константин! Так что, кнопочка только одна? А вот мне надо на главной странице сделать 5-7 таких кнопок. Куда всё это громоздить? Что – можно просто последовательно дать данные по каждой?
    И вопрос по размерам. Мне очень не нравятся в Twenty Eleven большие поля и интервалы.
    Могу ли я своей картинками-кнопками размерами с тот же заголовок, что-то около 1000 на 300 пикселей, перекрыть-заслонить основное поле, где располагаются записи с щедрыми «пазухами», где одиноко торчат строчки «дата», «комменты»?.. Или эти кнопки могут располагаться только на полях, ибо станут перекрывать другие страницы?
    К слову, тема Twenty Eleven отличная, но НЕ ПОДСКАЖЕТЕ, как бы мне сразу на главной подать 7-8 картинок-афиш, какие я с нужным качеством делаю в «Фотошопе», с крохотным интервалом, чтобы заставить сполна работать площадь монитора при открытии, без прокруток, как одну броскую афишу, плакат с анонсами. Работая в такой связке с «Фотошопом», где сейчас можно применять почти все достижения вёрстки текста и картинок (разные шрифты, их размеры, рамки, эффекты…), тем самым достигая так желанную мне рациональность по использованию площади «первого кадра» своего сайта. Зашёл и всё работает: ёмкий заголовок, меню, каскад из 7-8 картинок-кнопок, интригующих и зовущих «читать далее», боковая колонка, где строчки-ссылки сделаны неплохо.
    Сайт ваш понравился, всё чётко, внятно, без высокомерия «узкого профи», говорящего по-аглицки с могучим тамбовским акцентом. Всех вам благ!

  2. Алексей

    Огромное спасибо! никогда не оставлял комменты.. но за это просто высшая похвала!! я 2 ночи просидел в поисках ответа! а тут все понятно для младенцев…. 2 минуты и готово! я аж подпрыгнул!
    всех благ!

  3. Нина

    Спасибо за статью! Вы очень помогли мне разобраться с этой загадочной кнопкой. В Вашем исполнении она оказалась совсем не загадочная. :) И это здорово. Далеко не каждый в состоянии так понятно объяснять неграмотным людям, как и что нужно сделать. Еще раз – большое спасибо!

  4. Татьяна

    Огромное Вам спасибо, Константин, за столь понятное объяснение как вставить боковую кнопку на страничку. Вы пишите очень полезные стаьи. Успехов и развития Вашему сайту!! Подпишусь на Ваши статьи)

  5. Руслан

    Спасибо за доступную инструкцию. Подскажите, а если есть необходимость добавить плавающую кнопку только на конкретные страницы – например, в описаниях конкретных товаров “Вернуться в каталог”? Как можно поступить в этом случае?

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