Как сделать рекламный баннер — эта проблема неизбежно встаёт перед любым создателем сайта.
Давно собирался заняться этим, а вот и повод появился: 04.04.2014 Гугл внезапно перестал показывать рекламу на этом сайте. Причина мне ясна, но уже неустранима, ибо осталась в прошлом, а машины времени у меня сейчас под рукой нет — собирать же новую что-то нет настроения.
Но нет худа без добра: убрал баннер Гугл из хедера сайта и начал заниматься проблемой Как сделать рекламный баннер, попутно наполняя текстом эту страницу. Ничего сложного в этом нет, но нужно постараться наладить ротацию и анимацию баннеров — тогда это будет полноценной рекламой.
Большинство баннеров Гугл до жути просты и примитивны, на них нет ни анимации, ни бегущей строки, ни ещё некоторых фишек, привлекающих внимание посетителей сайта и повышающих кликабельность баннеров.
Наличие прямой рекламы в хедере (да и во множестве других мест на сайте) позволит разместить не только рекламу страниц своего сайта, но и оплачиваемую стороннюю рекламу, исключив посредников типа Гугл и прочих, обеспечив этим самое справедливое распределение доходов от рекламы по принципу «Мне, мне, и это тоже мне». Если Гугл и прочие действуют по этому принципу, почему бы и мне не взять его на вооружение?!
Как Вам нравится термин прямая реклама? Что подразумевается под прямой рекламой? Прямая реклама - это реклама, которая напрямую размещается на сайте, минуя всяческих посредников.
Главным её преимуществом, несомненно, является отсутствие необходимости делить доходы от рекламы с посредниками, а точнее — получать жалкие гроши от рекламных доходов посредников.
Другим существенным преимуществом прямой рекламы является размещение всех рекламных файлов на своём сайте, что исключает внешние запросы и ускоряет показ рекламы при сохранении скоростных показателей сайта в приемлемых пределах.
Это позволит задавать любые разумные размеры рекламных баннеров, делать их анимированными, звуковыми и даже размещать в них видео. Кроме того, никто не вправе запретить создателю сайта призывать посетителей кликать по баннеру, обещая им всяческие блага, но манну с небес всё же лучше не обещать…
Убедил? Приступим к делу.
1. Открываем простейший графический редактор Paint, создаём в нём горизонтальный прямоугольник размером 970*90 пикселей, заливаем голубым фоном, пишем крупными красными буквами «Как сделать быстрый сайт? Кликайте по голубому баннеру!» и сохраняем изображение в файле banner_1_0.jpg
Первый баннер в нулевом варианте готов! Этот баннер предназначен для хедера сайта, поэтому он сделан таким широким. На этой странице он первоначально лёг своим правым краем на правый сайдбар, поэтому пришлось переместить его ближе к концу страницы, перебросив туда код. Там баннер смотрится лучше.
2. Аналогичным образом делаем баннер размером 251*200 пикселей, содержащий 50200-ти пикселей, и сохраняем его в файле banner_2.jpg
3. Баннер banner_2.jpg вставляем по центру под этой строкой, используя команду Добавить медиафайл
4. Кликаем по изображению и обычным образом оформляем ссылку на нужную страницу любого сайта.
5. Все баннеры закачиваем в каталог /ep-z.ru/public_html/wp-content/banners
на сервере хостинга. Переходим в окно Текст и правим путь к обоим файлам изображений баннеров.
6. Чтобы поместить голубой баннер в хедере сайта, в Консоли сайта вызываем на редактирование файл header.php и под строкой <body <?php body_class(); ?>> вставляем
<!— Корректное размещение баннера в шапке сайта со сдвигом в центр —>
<div>
</div>
<!— Конец баннера —>
Затем под <div> вставляем код баннера, скопировав его из окна Текст. Чтобы баннер был размещён по центру экрана, в коде заменяем alignleft на aligncenter
7. Баннер, конечно же, сырой до ужаса, но сейчас важно было быстро и корректно разместить на странице сайта и в хедере сайта кликабельные баннеры.
8. Усовершенствовать баннер можно позже, чем вскоре и собираюсь заняться. Например, можно оживить фон, вырезав фрагмент с фотографии поверхности моря в свежую погоду.
9. В дальнейшем надо освоить ротацию баннеров и создание анимированных баннеров. Как освою — поделюсь информацией на этой странице.
10. Нашёл способ ввести ротацию баннеров. Подготовил ещё два баннера, помещаю их под голубым баннером в п. 12. Их имена b0.jpg, b1.jpg и b2.jpg соответственно.
11. Слегка модифицируем код, закачиваем изображения на сервер хостинга, обновляем страницу и нажимаем на Просмотреть страницу. Очищаем кэш и проверяем кликабельность всех трёх баннеров. Теперь их коды можно будет использовать для ротации баннеров в хедере сайта.
12. Попробовал ротацию баннеров на этой странице сайта. Попробовав и так, и эдак, пришёл к выводу, что налаживать ротацию на странице нет смысла, нужно в первую очередь налаживать ротацию сначала в футере сайта, а затем в хедере сайта.
WordPress сам масштабирует в окне Визульно все баннеры, размещённые чуть ниже, хотя я его об этом не просил. Но на самой странице сайта эти баннеры отображаются в заданных при их создании размерах.
13. Создал отдельную страницу Как сделать ротацию баннеров, чтобы на ней описывать те способы, которые удастся придумать, попробовать и реализовать. Ротация баннеров налажена, что можете видеть в хедере и футере всех страниц сайта. Применённый способ ротации вскоре опишу на упомянутой странице — хочу его ещё немного усовершенствовать, а для этого нужно провести небольшое исследование.
Приглашаю всех высказываться в Комментариях. Критику и обмен опытом одобряю и приветствую. В хороших комментариях сохраняю ссылку на сайт автора!
И не забывайте, пожалуйста, нажимать на кнопки социальных сетей, которые расположены под текстом каждой страницы сайта.
Продолжение тут…
