Владимир Вдовиченко

Создание сайта от А до Я. Книга 4


Скачать книгу

Консоль/Внешний вид/Редактор/главный css-файл вашего сайта, обычно называется style. css или main. css.

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

      – ya-share2__icon {

      – width: Npx! important;

      – height: Npx! important;

      – background-size: Npx Npx! important;

      – }

      Все N нужно заменить на числа – сколько именно пикселей размером вы хотите сделать иконки. По умолчанию средние иконки от Яндекса имеют ширину 24 пикселя и такую же высоту, а размер фона 24×24. Как видите, все 4 значения должны быть одинаковыми, если вы хотите сохранить иконки в их текущем виде.

      Ключевое слово! important нужно для того, чтобы точно перебить стили, поставленные по умолчанию. Теперь пробую сделать большие иконки:

      ya-share2__icon {

      width: 36px! important;

      height: 36px! important;

      background-size: 36px 36px! important;

      }

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

      Другие манипуляции

      Если иконки со счетчиками, то вам также придется увеличивать размер шрифта числа в счетчике. Делается это так же – исследуем блок, определяем, какой класс отвечает за размер шрифта и переопределяем для него стили.

      ya-share2__counter {

      font-size: 18px! important;

      line-height: 36px! important;

      }

      Вот, изначальные значения были 12 пикселей (размер шрифта) и 24 пикселя (высота строки). Мы их увеличили пропорционально иконкам.

      Заодно покажем, как добавить кнопкам отступы.

      ya-share2 {margin: 20px 0;}

      ya-share2 это как раз общий контейнер для кнопок. Отступы будут добавлены сверху и снизу по 20 пикселей. А вообще, как вы поняли, зная css можно как угодно перемещать, позиционировать, увеличивать и крутить кнопки от Яндекса, адаптировав их под ваш конкретный сайт.

      Ну а если вам вообще нужен полностью уникальный дизайн ваших соц. кнопок, можете почитать эту статью https://dolinacoda.ru/kak-dobavit-na-sajt-knopki-sotsialnyh-setej/ там написано про один из сервисов, который предлагает такую возможность.

      Примечание: Иногда, чтобы увеличить кнопки, достаточно ввести код:

      .b-share-icon {margin: 36px 50px;}

      Получился вот такой результат:

      Сервис Share42. Установки кнопок социальных сетей:

      В этом варианте кнопки социальных сетей мы будем создавать с помощью сервиса Share42

      Переходим на сайт по ссылке: http://share42.com/ru

      Выбираем размер 24х24 (или другой).

      Выбираем самые популярные сети.

      Для этого кликаем по ним.

      Далее выбираем вертикальная панель (она будет видна всегда)

      Снимаем галочку «Добавить иконку Share42».

      Ниже поставим галочку у пунктов «К вашему сайту подключён jQuery» и «Показывать счётчики публикаций».

      Жмём «Скачайте новый скрипт».

      Переходим в наш хостинг— в нашем случае в Beget.

      Перейдите в корневую папку вашего сайта. В файловом менеджере будет сначала папка с названием вашего сайта.

      Откройте её. Затем откройте корневую папку public_html.

      В открывшемся окне жмём «Загрузить файлы»