Главная » Создание сайта » Первые шаги » Кнопка сайта: как создать кнопку сайта, как поставить на сайт

Кнопка сайта: как создать кнопку сайта, как поставить на сайт

29.08.2012 в 11:27
Автор: Sheriff     

Как сделать кнопку для сайта?
Желательно чтобы кнопка подходила под дизайн Вашего сайта, поэтому лучше её нарисовать в графическом редакторе (например, Фотошоп). Рассмотрим простой вариант: создаём изображение размером 88 на 31 пикселей. Делаем в два слоя (скриншот), на первом слое выполняем заливку цвета подходящего цветовой гамме Вашего сайта, а на втором слое делаем надпись (результат). Сохраняем (CTRL+S). Но что делать, если нам лень рисовать, или мы это не умеем делать вовсе?

Тогда воспользуемся готовыми кнопками (их можно найти и скачать в интернете) либо воспользуемся Интернет ресурсами по созданию кнопок для сайта. Рассмотрим зарубежный сервис "CoolText", переходим на вкладку Logos и выбираем понравившийся логотип.



Экспериментируем с фоном и цветами текста. Выбираем понравившейся шрифт, выставляем нужный размер текста.
*Примечание: чем меньше размер текста, тем меньше размер нашей кнопки.



Если кнопка устраивает, нажимаем Render Logo (Отрисовка логотипа). На открывшейся странице жмём Download Image (Загрузить изображение) и скачиваем кнопку себе на ПК.



Сделано!



Теперь как загрузить кнопку на сайт? Для этого заходим к себе на сайт как администратор, переходим в файловой менеджер (Админ-бар » Управление » Файловой менеджер) и закачиваем кнопку в корневую папку сайта.


Как поставить кнопку к себе на сайт?
Нам понадобится следующий код:
Code
<a href="адрес Вашего сайта" target="_blank"><img src="адрес кнопки" title="описание" /></a>

Вписываем адрес нашего сайта, адрес кнопки и описание сайта, а чтобы Ваша кнопка размещалась по центру и присутствовала возможность скопировать код, нужно заключить нашу кнопку в специальные теги.
Code
<div align="center"><a href="адрес Вашего сайта" target="_blank"><img src="адрес картинки кнопки" title="описание" /></a></div>
<textarea style="font-size:11px;" readonly onFocus="this.select();"><div align="center"><a href="адрес Вашего сайта" target="_blank"><img src="адрес кнопки" title="описание" /></a></div></textarea>


Ну что-ж, ищем место для размещения нашей кнопки. Обычно размещают её в блоке "Друзья сайта" либо в отдельном блоке.

Рассмотрим вариант создания блока.
Включаем Конструктор, создаем блок (Админ-бар » Конструктор » Добавить блок + — скриншот). Называем блок, допустим: «Кнопка сайта», далее нажимаем Настроить (скриншот), переходим на вкладку HTML, вставляем код нашей кнопки и нажимаем Сохранить (Админ-бар » Конструктор » Сохранить изменения — скриншот)

Рассмотрим вариант вставки кнопки в блок "друзья сайта".
Включаем Конструктор, нажимаем Настроить (скриншот), переходим на вкладку HTML и вставляем код нашей кнопки и нажимаем Сохранить (Админ-бар » Конструктор » Сохранить изменения — скриншот)

Сделано!

Реклама, Кнопка сайта, дизайн, Баннер


Рейтинг: 49  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 55977          Комментариев: 21

Похожие инструкции

30.03.2016 в 12:05      0  

а как сделать, что-бы кнопка была более живой (при наведении курсора, меняла цвет, к примеру)?
30.03.2016 в 16:10      0  

Для различных графических редакторов - свои инструменты.
Начните изучать какой-нибудь конкретный редактор визуальный.
24.06.2015 в 00:49      0  

у меня не работает в конструкторе кнопка "добавить блог+". Что делать?
А еще как сделать, чтоб эта кнопка управляла каким-нибудь свойством другого элемента, например, цветом фона ? Хотела с помощью псевдокласса... В HTML редакторе написала: 
Код
<style type="text/css">
.color1:hover  img{background: rgb(68, 78, 78);}  
</style>
не работает, хотя в обычном файле html подобное работало...
24.06.2015 в 09:19      0  

1 - укажите, адрес Вашего сайта;
2 - на какой странице Вы прописали данные стили и что конкретно Вы хотели бы стилизировать (какое должно быть поведение и у какого элемента)?
08.03.2015 в 01:25      0  

спасибо сделала уже 2 кнопки для своих сайтов  а можно сделать кнопки для другого сайта тпо этой инструкции ?
05.12.2014 в 02:22      0  

Здравствуйте. Мне нужно в шапке сайта поставить кликабельные кнопки-ссылки, чтобы при нажатии на них открывался форум или фотоальбом
(моего же сайта). Как это сделать? Как прописать? Напишите пошагово
пожалуйста.
05.12.2014 в 07:17      0  

Для более детальной инструкции было бы неплохо знать адрес сайта. 
Обычно для добавления ссылок в Вехнню часть сайта можно создать меню и вставить его код в шаблоне Глобальные блоки - Верхняя часть сайта либо в этом же шаблоне вручную прописать ссылки в таком виде:
Код
<a href="нужный URL">текст ссылки </a>
Чтобы создать горизонтальное меню, зайдите в Панель управления сайтом - Дизайн - Конструктор меню. 
Затем зайдите в Панель управления сайтом - Дизайн - Управление дизайном (шаблоны) - Глобальные блоки - Верхняя часть сайта и вставите получений код меню.
10.08.2014 в 14:29      0  

А как удалить кнопку?
11.08.2014 в 18:11      0  

Необходимо удалить код, который выводит данную кнопку на страницу.
Укажите, пожалуйста, адрес Вашего сайта и укажите скриншотом или письменным описанием, что именно Вам нужно удалить.
12.08.2014 в 16:52      0  

сайт http://gergelori.ucoz.com. а удалить мне нужно "безобразие" под меню сайта. там получилась не кнопка а какая-то ссылка.
13.08.2014 в 10:06      0  

В панели управления сайтом войдите в "Дизайн" - "Управление дизайном (шаблоны)" - "Глобальные блоки" - "Первый контейнер" и после кода:
Код
$SMENU_1$

удалите код:


Код
<a href="http://gergelori.ucoz.com/" target="_blank"><img src="<img src="http://gergelori.ucoz.com/cooltext1675125648.gif" border="0" alt="" />" title="Косметика в Ростове-на-Дону" /></a>
13.08.2014 в 11:59      0  

Спасибо ОГРОМНОЕ yes v
12.07.2013 в 15:23      0  

А правда, можно для совсем новичка: зачем сайту кнопка себя самого? smile
12.07.2013 в 16:06      0  

Сделайте кнопку с ссылкой на что угодно, это всего-лишь пример
12.07.2013 в 16:11      +1  

а, то есть я совсем-совсем тормоз сегодня smile я поняла))) спасибо большое! smile
07.01.2013 в 20:53      0  

Спасибо, спасибо, спасибо!!! biggrin
19.09.2012 в 11:46      0  

Пасибо за информацию. biggrin
30.08.2012 в 08:35      +2  

класс!
осталось только выяснить, что такое "Кнопка сайта" и зачем она нужна smile
01.09.2012 в 22:49      0  

Неужели нужно ещё по этому поводу писать мануал? biggrin
29.08.2012 в 17:17      +1  

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

А вот новичкам на заметку будет.
1 2 »