Делаем угловой баннер с плагином Fcc ribbon manager и без него

 Привет всем, уважаемые друзья!
В сегодняшней статье я напишу о том, как сделать угловой баннер. Это очень хороший инструмент для увеличения базы подписчиков. Если вы на своем блоге никогда еще не ставили угловой баннер, то советую попробовать. Но перед тем вы также можете прочитать о том, как сделать gif баннер для сайта в фотошопе.

Если разместить где-нибудь в сайдбаре обычный banner, то CTR его будет не очень большой. Люди уже привыкли, что это реклама и кликают по такому баннеру очень редко. А вот если сделать угловой banner, то его CTR может быть намного большим. Дело в том, что такой баннер есть не на многих ресурсах и поэтому он способен привлечь на себя внимание. Конечно, многое зависит о самого баннера и места на блоге, но попробовать разместить угловой баннер нужно обязательно. Преимущество его также в том, что он совсем небольшой и не отвлекает посетителя от прочтения статьи. Итак, давайте приступим.

Для начала нам нужно где-то взять сам banner. У нас есть 3 варианта:

1. Заказать у фрилансера;
2. Найти в интернете;
3. Сделать самому в фотошопе.

1) Если у вас есть деньги, то вы можете пойти на специальные биржи и заказать там баннер. Если вы собираетесь размещать banner надолго, то советую так и сделать. Стоит он не дорого, а вот профессионал сделает хороший баннер, и по нему будут кликать чаще. О некоторых сайтах фрилансеров я писал тут.
2) Вы можете найти угловой banner прямо в поисковых системах или же скачать с другого сайта с помощью расширения Firebug. Если найдете хороший баннер, который вписывается в дизайн вашего блога, то считайте вам повезло. Можно также готовый banner переработать в фотошопе, например, изменить цвет или текст.

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

Итак, запускаем программу фотошоп, у меня установлена русская версия CS5 Extended. Сначала нам нужно создать новый файл. Выбираем «Файл» — «Создать», и заполняем поля. У меня они заполнены так:

• Ширина: 200 пикс;
• Высота: 200 пикс;
• Разрешение: 72 пикс/дюйм;
• Цветовой режим: цвет RGB 8 бит;
• Содержание фона: прозрачный.

В конце нажимаем «ок». Теперь нам нужно сделать контур для углового баннера. Выбираем инструмент «прямолинейное лассо»:

С помощью этого инструмента делаем контур. У меня получилось вот так:

Для того чтобы мы могли как-то разукрасить выделенную область, нужно создать новый слой. Для этого нажимаем на специальную кнопку:

Отлично. Теперь я выбираю 2 зеленые цвета (темно зеленый и светло зеленый), потом делаю градиент своему баннеру с помощью инструмента «градиент». Вы можете не делать градиент, а просто залить banner каким-нибудь цветом. У меня получилось так:

Теперь нужно написать еще какой-нибудь текст на баннер. Для этого выбираю инструмент горизонтальный текст и пишу «Это интересно». Дальше необходимо повернуть этот текст, для этого я нажимаю «редактирование» — «трансформация» — «поворот» и поворачиваю, чтобы надпись была размещена под углом:

После написания текста можно еще наложить какие-нибудь стили на него. Для этого я нажимаю правой кнопкой мыши по слою «это интересно» и выбираю: «Параметры наложения».

Делаю тень своему тексту и у меня получился отличный угловой баннер:

Последний шаг, который нужно сделать, это сохранить его на компьютер. Для этого я нажимаю «Файл» — «Сохранить для «web-устройств». Выбираю формат Gif (обязательно), качество 80 % и нажимаю «сохранить». Дальше выбираю папку, в которую мне нужно сохранить баннер и нажимаю еще раз на кнопку «сохранить». Вот и все, banner готов, теперь нам необходимо как-то прикрутить его на блог, чтобы он был в самом верху слева или справа.

Для начала закачаем баннер на свой хостинг. Я закачал по такому адресу vachevskiy.ru/wp-content/themes/BusinessBlog/images/banner.jpg

Сделаем еще так, чтобы banner вел на нужную нам страницу. Припустим, у меня это будет главная страница vachevskiy.ru.

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

Вы, конечно, указываете свою страницу. Теперь этот баннер нужно вставить в файл header.php перед тегом head. Это если у вас сайт на движке wordpress. Дальше в таблице стилей нужно прописать следующие стили:

    #banner {
    top: 0px;
    right: 0px;
    height: 200px;
    width: 200px;
    position: fixed;
    background: url(images/banner.png) no-repeat;
    z-index:1000; }

position: fixed; можно заменить на position: absolute; тогда баннер будет плавающим.
Вместо images/banner.png укажите путь к картинке на своему хостингу;
Если баннер криво отображается на вашем сайте, то можете поэкспериментировать с отступами, но у меня на блогах работает.

Для wordpress также есть специальный плагин Fcc ribbon manager, можете легко прикрутить баннер и с его помощью. Для этого скачивайте плагин с этой страницы и устанавливайте на свой блог. Дальше перейдите в настройки плагина: «Панель управления» — «Параметры» — «Ribbon Manager» и здесь нам нужно немного настроить плагин:

1. Указываем путь к баннеру на хостинге;
2. Указываем отступы;
3. Прописываем ссылку на страницу, куда должен вести banner;
4. Название страницы, можно ничего здесь не писать;
5. Слева или справа, здесь на ваше усмотрение.
6. Обновляем настройки.

Теперь смотрим и наслаждаемся своим баннером. Если баннера нет, то нужно очистить кэш браузера. Возможно, на вашем блоге установлен какой-нибудь плагин кэширования, удалите кэш и там. После этого еще раз обновите страницу, баннер должен появиться.

На этом все на сегодня. Всем пока.