Как делать баннер
Код для вставки баннера на блог — три в одном флаконе
Здравствуйте, господа новички. Почему так целенаправленно? Да потому, что после некоторых вопросов в комментариях я поняла — о том, что такое код баннера для сайта новичку надо объяснить не в двух словах, а подробно и на пальцах. Когда я впервые озаботилась этой проблемой, порядок необходимых действий мне объяснили более чем лаконично: «Да пропиши полный путь к картинке и ставь в статью». Я сделала умное лицо, кивнула,поблагодарила и ... заплакала от бессилия и обиды. Тогда мне казалось, я одна такая тупая, а все остальные – сплошь счастливые и умные люди, поскольку знают, что такое код и как им распорядиться. Вот для того, чтобы никто больше не мучился по столь ничтожному поводу, я и решила написать небольшую статью, где простым (а для кого-то и примитивным) языком расскажу, что такое коды для баннеров и как заставить кнопку или баннер работать. Уверена, за время ведения блога эти знания понадобятся вам не единожды.
Код баннера и кнопки для сайта
— что нужно знать
Главное, что надо уяснить с самого начала – принцип функционирования как кнопки, так и баннера абсолютно идентичен, поскольку задача у них общая — помочь посетителю перейти на страницу, ради которой все и затевалось. Значит, код баннера для сайта должен состоять из двух частей, говоря проще: куда – откуда:
куда — URL страницы, куда зовет наша кнопка;
откуда — адрес кнопки на хостинге, т.е. тот самый непонятный мне путь, из-за которого я когда-то лила слезы.
Как сделать активной кнопку
Сперва разберемся с кнопкой. Допустим, я хочу , чтобы при нажатии на расположенную в статье кнопку, посетитель тут же переходил на страницу со статьей о конкурсе. Значит,
первое, что необходимо добыть – это адрес нужной страницы. Идем на блог, в строке браузера (вверху) копируем адрес – он и будет первой частью нашего кода.
Сгенерировав кнопку на сервисе, вы в любом случае сохраняете ее у себя на компьютере с расширением: gif — если имеется анимация; jpeg и png — если рисунок; png — при наличии диаграммы. Сейчас разговор идет о кнопке, которая украшена изображением и надписью — это всего лишь картинка, и для того, чтобы она работала, необходимо поместить ее на сервер с помощью FileZilla Client. Если вы сохраняете изображения для постов на своем хостинге, то для вас это уже повседневная процедура. Свои картинки я пристроила на хостинг от Google Picasa, а потому папку images использую крайне редко. Теперь, когда вы загрузили картинку в папку images, скопируйте полный путь до нее, который будет иметь приблизительно такой вид: http://домен/wp-content/images/название картинки.расширение. Этот адрес картинки — вторая составляющая кода, который вы вставите потом в статью.
А вот теперь – код для вставки, и состоит он, как мы уже говорили, из АДРЕСА СТРАНИЦЫ и АДРЕСА КАРТИНКИ:
Если прописать все правильно, ваша красавица кнопка на блоге станет активной и будет перенаправлять посетителей на ту страницу, которую вы назначили, в моем случае, на страницу сервиса по генерации кнопок.
Код для вставки баннера в сайдбар
Допустим, вы написали статью о чем-то супер выдающемся и хотите, чтобы абсолютно все посетители вашего блога могли выудить ее из-под завала новыхпубликаций. Другими словами, чтобы эта статья постоянно находилась на виду. Самый простой путь – сделать интересный и тематически адекватный баннер, чтобы, кликнув по нему, народ сразу же оказывался на нужной странице. На блоге я скоро опубликую статью еще об одном прекрасном сервисе, с помощью которого очень легко сделать не просто примитивный баннер – картинку и надпись, а прямо-таки профессиональный, с интересными эффектами текста и фона. А пока, озаботимся теорией – каким должен быть код баннера для сайта.
Итак, принцип тот же: куда – откуда. Первая часть кода – URL страницы, которая должна предстать на всеобщее обозрение. Вторая часть – ваш баннер, закачанный на хостинг все в ту же папку images.
a href="http://АДРЕС СТРАНИЦЫ" target="_blank"><img src="http://АДРЕС БАННЕРА" width="х" height="х" border="0"Описание баннера"/></a>
Для того, чтобы баннер оказался, наконец, на своем законном месте – в виджете на блоге, используем свободный виджет Текст, помещаем его в сайдбар. Копируем в него код баннера, Сохраняем, Закрываем. Если возникнет необходимость выровнять его по центру, то в начале кода ставим <p style="text-align: center;">, а в конце </p>.
Размещаем баннер в шапке блога
И последний из самых востребованных вариантов — размещение баннера в одном из файлов темы, например, в файле header.php. Повторюсь еще раз — принцип создания кода для вставки баннера и здесь абсолютно тот же, что и в первых двух случаях, так что не пугайтесь и дочитайте статью до конца. Просто здесь нужно будет добавить элементы расположения баннера, т.е. отступы от края, толщину и цвет рамки для того, чтобы можно было найти для него оптимальное место. Обычно в шапке блога используются партнерские баннеры стандартного размера 648×60, устанавливаемые по ссылке. Значит, открываем файл header.php и находим место для вставки кода, что-то вроде < div id="header" > или < div id="header_title" > — позиция вывода логотипа или названия блога. Код баннера – практически тот же, что и в предыдущих случаях, стоит лишь обратить внимание на следующие параметры:
position:absolute – прозрачность баннера;
top: 30px – величина условная, взята для примера. Вы сами устанавливаете это значение, двигая баннер по вертикали, поскольку это расстояние от верхнего края до вашего баннера;
right: 60px – расстояние от вашей картинки до правого края – перемещаем по горизонтали;
border: 1px –толщина рамки вокруг баннера, при значении 0 рамка не появится;
solid #242424 –цвет рамки, в данном случае черный.
<a href=«ПАРТНЕРСКАЯ ССЫЛКА» target="_blank"><img style="position: absolute; top:30px; right:60px; border: 1px solid #242424; " src=«ССЫЛКА НА ИЗОБРАЖЕНИЕ БАННЕРА» alt=«Описание баннера»/></a>
Совсем не обязательно параметры расположения прописывать непосредственно в коде. Можно создать для них новый класс - class= «logo-baner» и указать в нем всю рабочую информацию, поместив его в самый конец файла CSS используемой вами темы. Теперь в коде банера мы не пишем «ширина, высота», а просто в самом конце указываем class= «logo-baner».
.logo-baner {
display: block;
float: right (left);
width: ...px;
height: ...px;
padding: ...px;
margin: ...px;
overflow: hidden;
border: ...px solid #ffffff;
}
38.
Крючок №4. Все вяжется столбиками без накида. 
2.
3.
6.
7.
9. 
11.
13.
14.
