Как сделать рекламное место в блоге.

Здравствуйте, друзья, читатели и гости блога. Сегодня поговорим о том, как сделать рекламное место на блоге или компактный блок рекламы. Так это назовём. В результате мы не только экономим место в сайдбаре блога, но и красиво  разместим рекламные баннеры.
Этот может пригодится и для рукодельных блогов. Девчата часто на них проводят всякие конкурс и розыгрыши. Иногда просто целая лента всяких призов и конфеток. В предложенном варианте всё это можно будет собрать более рационально.

Мы уже делали анимированный виджет-информер , но новичкам это оказалось немного сложновато. Пойдём от сложного к простому.

Рабочий вариант можно посмотреть здесь.

Копируем в блокнот следующий код.

<style>#BD {
background:#CCCCCC;
width: 280px;
padding: 2px;
height: 275px;
border: solid #999999 ; 2px;
}
#BD .box{
width: 100%;
height: 275px;
text-align: center;
}
#BD img{
width: 120px;
height: 120px;
}
#BD img:hover{
opacity:.6;
}
#BD .kiri{
float: left;
margin:5px;
width: 120px;
padding: 2px;
border:solid #999999;2px;
height: 120px;

}
#BD .kanan{
float: right;
margin:5px;
width: 120px;
padding: 2px;
border:solid #999999 ; 3px;
height: 120px;
 </style>

<div id="BD"><div class="box">
<div class="kiri"><a href=" адрес страницы куда ведёт ссылка" target="_blank" title=" название"><img alt="реклама" src="адрес картинки " title="блок рекламы"/></a></div>
<div class="kanan"><a href="адрес страницы куда ведёт ссылка " target="_blank" title="блок рекламы"><img alt="реклама" src=" адрес картинки " title="название" ></a></div>
<div class="kiri"><a href="адрес страницы куда ведёт ссылка " target="_blank" title="блок рекламы"><img alt="реклама" src="адрес картинки " title="название" ></a></div>
<div class="kanan"><a href="адрес страницы куда ведёт ссылка " target="_blank" title=" название"><img alt="реклама" src="адрес картинки " title="название"></a></div></div></div>


Как видите, весь  код состоит из двух частей. CSS и HTML. В первом коде можно поменять значения основного фона на свои. Здесь генератор цвета. Ширину и цвет рамки тоже.  Размеры каждой ячейки, соответственно баннера или изображения, 120 X120 px. Ширина же всего блока составляет 275px. Вполне нормально вписывается в боковую панель.

Во втором коде, думаю разобраться не сложно. В строчках, выделенных синим прописываем адрес страницы, куда приведёт ссылка. И красным цветом адрес самой картинки. Тайтлы ( title ) пропишите свои.

Когда код подготовили, идём во вкладку дизайн-добавить гаджет-HTML/JavaScript. Вставляем его туда и перемещаем в нужное место сайдбара. Не забудьте сохранить расположение.

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


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


7 комментариев:

  1. Изумительно! Иногда и в самом деле нужно поместить много картинок-ссылок, и не представляешь как это сделать, ибо не влазят.
    Спасибо огромное!

    ОтветитьУдалить
    Ответы
    1. Maryysia M, пользуйтесь на здоровье. Рада, что понравилось.

      Удалить
  2. Пока такое не надо, нет такого объема рекламодателей, да и не знают они, что у меня дешевая реклама. Хочу нарисовать баннер, чтоб привлечь рекламодателя, но ни как не доходят руки и время мало провожу за компьютером.

    ОтветитьУдалить
  3. Иван, не объять всё сразу.Это я насчёт нарисовать баннер. А я читала у тебя в блоге, что вроде как предлагают установить рекламу. Или тематика тебе не всегда подходит?Авось да пригодится в будущем такое место.

    ОтветитьУдалить
    Ответы
    1. Виктория, были 2 предложения, которые не состоялись, не по моей вине, просто рекламодатели видать передумали. А так, в том месяце, от прямых рекламодателей, заработал 200 рублей, можно сказать за ничего не делая. В этом месяце что та тихо, вот и надо бы нарисовать привлекательный баннер.

      Удалить
  4. Извините, ради бога. Подскажите, как правильно прописать адрес картинки. У меня не получилось правильно создать рекламное место. Картинка не отображается. Я её загружала и на гугл диск и в альбомы picasa. Но понимаю, что адрес пишу неправильно. Подскажите. Дайте совет. Спасибо

    ОтветитьУдалить
    Ответы
    1. Татьяна Адрес изображения примерно такого вида --http://s017.radikal.ru/i401/1505/15/719f1a2b54f7.jpg. В моём случае картинка на радикале храниться.
      Он должен начинаться с http:
      Вышлите мне через форму ниже какие адреса вы вставляете.

      Удалить

Пользовательский поиск