Добавляем секцию для баннеров 125х125 в блог

четверг, 16 сентября 2010 г.
Не секрет что баннерная реклама — один из наиболее популярных способов заработка блоггеров. Рекламодатель с удовольствие покупает баннерную рекламу на популярных тематических площадках. Даже если у вас пока не особо раскрученный блог, и за рекламой никто в очередь не встает, баннерами можно меняться с друзьями блоггерами, поэтому в любом случае место под баннеры не помешает. К сожаления, далеко не во всех шаблонах для предусмотрено место.

Очень часто нам попадаются красивые шаблоны для blogger, но бывает от них приходится отказываться по той причине что они не очень удобны и пригодны для монетизации (если вы конечно думаете о заработке на блоге). Поэтому, сегодня я хочу предложить вашему вниманию один из типовых вариантов - секцию под баннеры размером 125х125 пикселей. Подобный блок можно часто видеть в запаздных англоязычных блогах, почему бы не воспользоваться их опытом, за подсказку спасибо автору этого поста.

Итак, начнем: Исходные данные — шаблон, сайдбар две колонки. Конечный результат — секция из 3-х баннеров размером 125х125 пикселей над 2-х колоночным сайдбаром. В принципе, общий принцип механизма добавления секции элементов шаблона в блоге на Blogspot я уже рассматривал - сегодня будет практически то же самое, но с конкретным примером, чего так не хватало в прошлой статье.




Шаг 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;}
Следует сказать, что данный метод тестировался на старых шаблонах, возможно с применением нового Дизайнера Шаблонов в Blogspot структура и специфика HTML код будет несколько иная. В таком случае, придется самому уже додумывать принцип работы. Кроме того, если у вас не получается продать рекламу самостоятельно, можете воспользоваться услугами биржи баннерной рекламы в блогах Rotaban. После регистрации добавляете в биржу свой сайт, а взамен получаете код, которые нужно будет разместить в блоге. Там, в принципе, есть некоторые нюансы, но в целом суть процесса остается неизменной.
На этом можно считать дело законченным, осталось только продать баннеры, чего я вам и желаю!

P.S. Постовой. Для всех читателей кому не безразличная автомобильная тематика, будет интересно глянуть фотографии автомобилей различных марок, красивые тюнинг модификации и уникальные авто.
Затишно і комфортно обставити меблями свій офіс у Львові вам допоможе фабрика меблів - замовляйте шафу-купе, вбудовані меблі та різноманітні інші конструкції.
Тем, кто просто не может жить без общения с друзьями в интернете, рекомендуем скачать jimm бесплатно для установки аськи на свой мобильный телефон.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails