Как добавить секцию баннеров

Добрый день друзья!Сегодня мы поговорим не совсем про уроки веб дизайна,но на не менее актуальную тему-добавление рекламного блока в блог.Поскольку кушать что-то нужно,будем это считать полезной фишкой.Не секрет то,что многие блоггеры кормятся с рекламы.И начнем мы с того,как вставить рекламный блок в blogger.

Конечный результат  секция из трех баннеров 125x125 пикселей над двухколоночным сайдбаром.Что же приступим..

Шаг 1.
Начинаем как обычно с того что заходим в «админку» блога, закладка «Дизайн» → «Изменить HTML».

Шаг 2.
Находим следующий фрагмент кода или подобный:

<div id='sidebar-right'> <b:section class='sidebar-right' id='sidebar-right' preferred='yes'>

id может быть различным, например, «sidebar», «right-sidebar» или указанный выше. Разобраться несложно, нам нужно самое начало сайдбара.

Как только вы его обнаружите, вставьте перед (потому что наша секция будет выше сайдбара) этим фрагментом следующий код:

<div id='sidebar2'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section></div>

Шаг 3.
Определим стиль секции. Добавим перед CSS стиль (если вы не знаете куда вставлять, ищите тэг ]]></b:skin>, можно вставить сразу перед ним):

#sidebar2 {
float : right;
margin-left:4px; width: 415px; background:#ffffff;
font : 11px Verdana;
}
#sidebar2 .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#sidebar2 .widget h2, #sidebar2 h2 {padding-left: 10px;
text-align:center;padding-left: 18px;
font: 12px/34px "Georgia", Verdana;
text-transform: uppercase;
color: #ffffff;
background: url("http://i263.photobucket.com/albums/ii150/mohamedrias/sidebar_title-2.gif") repeat;font-weight:bold;
}
#sidebar2 a {
color: #969696;
font-size : 12px;
text-decoration : none;
}
#sidebar2 a:hover {
color: #969696;
text-decoration : none;
}
#sidebar2 ul {
border : medium none;
margin : 7px;
padding : 0;
}
#sidebar2 ul li {
list-style-type : none;
border-bottom : 1px dotted #87581f;
margin : 0;
background-position : 0% 100%;
padding-left : 8px;
padding-right : 10px;
line-height : 15px;
padding-top : 5px;
padding-bottom : 5px;
}
#sidebar2 ul li a {
text-decoration: none; background: url(http://i263.photobucket.com/albums/ii150/mohamedrias/side_li_bullet.gif) no-repeat; padding:0 0 0 12px;color: #87581f;
}

Обратите внимание на фрагменты выделенные коричневым, вам нужно изменить их в соответствии со стилем вашего блога. Впрочем, если гамма оказалась для вас подходящей, можно все оставить как есть.

Шаг 4.
Пока с кодом покончено, переходим на вкладку «Элементы страницы», где видим новую секцию. Добавляем в нее HTML/JavaScript виджет со следующем кодом:

<div class="sidebar-ads">
<div class="sidebar-banner"><a href="#">
<img border="0" src="#"/></a></div>
<div class="sidebar-banner"><a style="text-decoration: none;" href="#"><img border="0" src="#" /></a></div>
<div class="sidebar-banner"><a style="text-decoration: none;" href="#"><img border="0" src="#" /></a></div>
<div class="clear"></div><p><a href="mailto:ваш e-mail, ссылка на страницу с тарифами или ссылка на сервис Rotaban" title="Разместить рекламу">Разместить рекламу</a></p>
</div>

Внимание! Как вы понимаете вместо «#» там где «a href=» нужно вписать ссылку по которой ведет баннер, там где «src="#"» - ссылку на картинку баннера в формате 125х125.

Обратите внимание, под баннерам будет ссылка «Разместить рекламу» или «Advertise here», вы можете поставить ссылку на страницу с тарифами на размещение рекламы. Если таковой у вас нет, ваш e-mail или что-то еще.

Шаг 5.
Напоследок добавим стили для баннеров (туда же куда добавляли стили секции):

/* Sidebar – Ads */
.sidebar-ads {
float: left;
width: 410px;margin-left:5px;
margin-bottom: 5px;
}
.sidebar-banner {
padding: 5px;
float: left;
}
#sidebar2 p {background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/adsdotdot-1.gif) no-repeat center left; margin-top:5px;text-align:right;padding-right:10px;}

Вот и все.Более полную информацию вы можете получить на BlogoHelp .Я очень рассчитываю,что информация окажется полезной.Разобраться я здесь не помогу,но у меня работает.А в тонкостях,похоже и на BlogoHelp не разобрались,а просто содрали с БуржуйНет.Ну во всяком случае работает.

Будем считать уроки веб дизайна оконченными.За сим прощаюсь и приятных выходных.

Пока-пока Сильвестр.