Кнопка на сайте может использоваться повсеместно. Обычно кнопка используется для выполнения действия, которое не приводит к переходу на другую страницу. Для перехода на другие страницы используются ссылки, но часто, чтобы придать ссылке важность или просто выделить ее на фоне остального контента, даже обычная ссылка может оформляться как кнопка.
В этой инструкции показано, как создать свою кнопку.
- Обычная кнопка
- Кнопка с фоновым изображением
- Кнопка на CSS
- Ваша кнопка на других сайтах
- Установка кнопки на сайт
Обычная кнопка
В качестве обычной кнопки используются HTML теги input или button . Однако, для этих тегов нет атрибута href, который мог бы направить пользователя на другую страницу. Поэтому им часто добавляют атрибут onclick с указанием ссылки, по которой нужно перейти:
Выглядит это следующим образом:
Кнопка с фоновым изображением
Если у вас есть изображение кнопки, то его можно использовать в обычной ссылке, например так:
Выглядит это следующим образом:
Чтобы получить такой результат, нужно сделать две вещи:
- Создать изображение кнопки. Самостоятельно или с помощью онлайн-сервисов (например, cooltext.com).
- Загрузить на сайт изображение и получить ссылку на него. Для этого можно воспользоваться файловым менеджером.
Кнопка на CSS
Кнопку можно оформить с помощью CSS. Для этого добавьте стили в шаблон сайта и укажите класс кнопки.
Добавьте в разделе Панель управления / Дизайн / Редактор / CSS:
.site-button
Тогда HTML-код самой кнопки будет следующим:
А на сайте кнопка отобразится так:
Не пугайтесь, если CSS кажется вам незнакомым и странным. Чтобы настроить кнопку под свои нужды, достаточно изменить отступы / размер шрифта в пикселях и цвет фона / текста в HEX (чтобы посмотреть все цвета, наберите в Яндексе запрос «hex цвета онлайн»).
Ваша кнопка на других сайтах
В некоторых случаях есть необходимость давать пользователям возможность устанавливать вашу кнопку на своих сайтах. Если предоставите готовый HTML-код кнопки, то они без труда смогут это сделать. Для этого нам потребуется создать текстовое поле и поместить внутрь него готовый код. Каждый тип кнопки будет иметь свой код:
Обычная кнопка
Кнопка с фоновым изображением
Кнопка на CSS
Установка кнопки на сайт
Теперь необходимо добавить код кнопки на свой сайт. Это удобно делать с помощью конструктора:
Добавьте код кнопки в блок:
Добавьте поле с кодом, а также CSS, если требуется. Сохраните изменения внесенные в конструкторе.
Источник: www.ucoz.ru
Как сделать кнопку одноклассники на сайт
Просматривая любопытные веб-страницы в сети интернет, каждый пользователь уже не раз видел кнопку социальной сети Мне нравится от Вконтакте. А для чего она нужна? Предоставленная услуга от Вк используется, чтобы быстро поделиться с друзьями в соцсети прикольной и познавательной информацией, найденной на просторах всемирной паутины :smile:. Это очень комфортно для пользователей и выгодно для веб-дизайнеров.
Как добавить кнопку Мне нравится Вконтакте на свой сайт?
1. Для начала требуется войти в свой аккаунт в системе.
2. Далее переходим вот на эту страницу: vk.com/developers.php?o=-1
VK.init();
Кнопка Одноклассники на сайте
7. Теперь код нужно вставить после тега . Если у вас WordPress, то в админке стоит перейти во вкладку Дизайн/Редактор, выбрать файл header.php и добавить скопированный код:
8. Идем обратно на открытую веб-страницу сайта vk.com и копируем оставшуюся вторую часть:
|
VK.Widgets.Like(“vk_like”, ); |
9. Теперь открываем файл single.php и для размещения кнопки Мне нравится Вконтакте в конце статьи вставляем код за вот этой строкой:
Я разместил сразу же за кодом от кнопки Твиттера:
Все! Мы ответили на вопрос, как сделать кнопку Вконтакте и теперь можете переходить на сайт и радоваться новенькой фишке. Если понравился статья, то нажмите на Мне нравится от Вк внизу этого поста.
Подписывайтесь на обновления и получайте новые статьи на почту и RSS .
Смотрите, как нужно затачивать топоры, но только для тех у кого руки растут с нужного места ;):
Источник: netbu.ru
Как сделать кнопку одноклассники на сайт
Всем привет! Сегодня подготовил для Вас видеоурок, где рассказал о том, как установить социальные кнопки на сайте без плагинов и достаточно просто, тем более эти социальные кнопочки выглядят довольно симпатично. Так что читайте статью и смотрите видеоурок.
Как установить социальные кнопки
Существует множество различных плагинов для того, чтобы легко разместить и установить социальные кнопки на своем блоге, но плагины нагружают блог и чем их меньше, тем лучше. В этой связи, мне хотелось бы предложить довольно простой способ установки соц. кнопок без плагинов. Просто выводим все кодом и получаем отличные кнопочки, нужного нам размера, цвета, формы и другими эффектами. Лично я, сам пользуюсь данным сервисом и очень доволен.
Сервис называется Pluso — кнопки для добавления контента в социальные сети. Сервис развивается с большой скоростью и обещает в ближайшее время добавить статистику переходов и другие вкусности.
Как известно, социальные сети могут привести огромный трафик. Также доказано, что каждый примерно каждый 65 посетитель Вашего блога делится ссылкой в социалках и в среднем по данной ссылке переходит 6 человек, которые просматривают не менее 2 страниц на сайте.
Так что грамотное размещение красивых кнопочек способно увеличить посещаемость Вашего ресурса от 5 до 20% и это совершенно бесплатной способ. Советую не пренебрегать социальными кнопками и в обязательном порядке размещать их на своих блогах.
Не буду долго рассказывать о социальных сетях, так как статья не об этом, а о том, как установить социальные кнопки на своем сайте и не просто установить, а сделать это без применения плагинов.
Смотрите видеоурок и Вам станет все понятно. Вы сможете поставить себе такие же кнопочки, как у меня на блоге.
Вот такой небольшой видеоурок для Вас, надеюсь все понятно и доступно, если остались вопросы, Вы всегда можете их задать в комментариях к данной статье. Да и не забудьте поделиться статьей в социальных сетях! Жду Ваших комментариев. Желаю Вам удачи!
Источник: sovetywebmastera.ru