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

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

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  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 58364          Комментариев:

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