Создаем код баннера с окном копирования кода: 7 простых шагов

Здравствуйте, друзья!
Сегодняшняя обучалка научит вас создавать коды для баннера с окном копирования.
До недавнего времени создание такого кода не вызывало особых трудностей, достаточно было воспользоваться сервисом Banner Fans, и, вуаля, в три клика создавался код.

Но, увы, по каким-то причинам этот способ перестал работать. Лично я столкнулась с такой проблемой: код создается, но при вставке в Blogger текст в окне не виден... К сожалению, я не программист, поэтому при помощи коллег нашла такой выход: сочетание сервиса Banner Fans и GitHub. Как добиться желаемого результата я и расскажу ниже.



Banner Fans – это простой сервис для создания баннеров. В данном сервисе можно создать как новый баннер, так и загрузить свой. Затем создать HTML-код и вставить его на свой блог или сайт.

1. Открываем онлайн сервис Bannerfans. Данный сервис не требует регистрации.
Можно выбрать русскую версию сервиса. Для этого необходимо кликнуть левой клавишей в строке и выбрать русский язык в выпадающем списке.

2. Если у вашего блога есть свой логотип, то можно загрузить его. Для этого необходимо выбрать команду во вкладке «Планировка» (Я хочу загрузить своё изображение). При выборе данной команды появляется окно загрузки.

Кликаем на клавишу «Выберите файл», выбираем логотип. С правой стороны вы должны выбрать положение вашего логотипа и заливку цвета по краям. По умолчанию, в сервисе задан чёрный цвет. Но вы можете задать свой цвет. Для этого необходимо левой клавишей мыши кликнуть по строке, где прописан цвет (000000 – код цветовой гаммы, в данный момент это чёрный цвет). И в данной строке изменяем код, можно прописать (например, ffffff – белый цвет). Как только вы изменили цвет, в квадрате где отмечается цветовая гамма, будет отображаться ваш оттенок.  Для выбора цветовой гаммы можно воспользоваться таблицей кодов для выбора цвета. http://www.chatpages.ru/chat/color/color.html .

3. Затем выбираем вкладку «Текст и фон». И в строках «Линия 1» и «Линия 2» удаляем текст. Данный текст является водяным знаком, и, если его не удалить, он будет отображаться на вашем баннере.

При необходимости можно заполнить эти поля (например, названием блога и слоганом).

4. Теперь можем приступить к созданию кода. Кликаем на клавишу «Получить коды». После нажатия данной клавиши перед вами появляется много окон с различными кодами, нам необходимо выбрать код для вставки в блог.

Выбираем код «Код для веб-страницы/Блога/My Space, с кодом для копирования в окне ниже баннера». Копируем данный код.

Как уже было сказано выше, некоторое время назад было достаточно вставить полученный код в виджет «HTML/JavaScript» в Bloggerе.  К сожалению, сейчас этот простой прием не работает (не отображается код в окне копирования). Поэтому, используем ещё один сервис.

5. Далее для работы нам потребуется сервис GitHub.
GitHub — самый крупный веб-сервис для хостинга IT-проектов и их совместной разработки. Основан на системе контроля версий Git и разработан на Ruby on Rails и Erlang компанией GitHub, Inc (ранее Logical Awesome) (Источник: Википедия).
Для работы в сервисе требуется регистрация.

В данный сервис в большом окне под цифрой 1 вставляем скопированный код для блога. Затем мы должны отредактировать код. Необходимо подтянуть текст, удалив пробелы, весь код должен быть под цифрой 1.

Затем редактируем код.

Шаг 1.
<a href= ″http://www.BannerFans.com″ заменяем на адрес вашего блога.
Шаг 2.
alt="BannerFans.com", заменяем на alt=”название вашего блога”. Так как команда alt – описание баннера.
Шаг 3.
Далее удаляем ненужный код со слов <br /><textarea style="font:…… /></a></textarea>.

Вот что должно получиться.

6. Теперь кликаем на клавишу «Create Public Gist» (создать для общего пользования).
С правой стороны появляется строка «Embed this gist», копируем код.

7. Затем открываем страницу настройки блога. Добавляем гаджет «HTML/JavaScript» в названии можно указать «Код баннера», кликаем на клавишу «Сохранить». Код готов.

Остается добавить изображение вашего баннера. Для этого необходимо зайти в настройки блога, выбрать гаджет «Изображение», загрузить изображение и ваш баннер с окном для копирования кода готов.

Результат:

Желаю и вам успехов в этом "нелегком" деле!