Здравствуйте, друзья, читатели и гости блога. Сегодня поговорим о том, как сделать рекламное место на блоге или компактный блок рекламы. Так это назовём. В результате мы не только экономим место в сайдбаре блога, но и красиво разместим рекламные баннеры.Этот может пригодится и для рукодельных блогов. Девчата часто на них проводят всякие конкурс и розыгрыши. Иногда просто целая лента всяких призов и конфеток. В предложенном варианте всё это можно будет собрать более рационально.
Рабочий вариант можно посмотреть здесь.
Копируем в блокнот следующий код.
<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>
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. Вставляем его туда и перемещаем в нужное место сайдбара. Не забудьте сохранить расположение.
Пожалуй, сегодня всё. Спасибо, что заглядываете в мои шпаргалки. Не стесняйтесь задавать вопросы в комментариях. Или пишите через форму связи. До новых встреч.
здесь можно оформить подписку на новые шпаргалки
Изумительно! Иногда и в самом деле нужно поместить много картинок-ссылок, и не представляешь как это сделать, ибо не влазят.
ОтветитьУдалитьСпасибо огромное!
Maryysia M, пользуйтесь на здоровье. Рада, что понравилось.
УдалитьПока такое не надо, нет такого объема рекламодателей, да и не знают они, что у меня дешевая реклама. Хочу нарисовать баннер, чтоб привлечь рекламодателя, но ни как не доходят руки и время мало провожу за компьютером.
ОтветитьУдалитьИван, не объять всё сразу.Это я насчёт нарисовать баннер. А я читала у тебя в блоге, что вроде как предлагают установить рекламу. Или тематика тебе не всегда подходит?Авось да пригодится в будущем такое место.
ОтветитьУдалитьВиктория, были 2 предложения, которые не состоялись, не по моей вине, просто рекламодатели видать передумали. А так, в том месяце, от прямых рекламодателей, заработал 200 рублей, можно сказать за ничего не делая. В этом месяце что та тихо, вот и надо бы нарисовать привлекательный баннер.
УдалитьИзвините, ради бога. Подскажите, как правильно прописать адрес картинки. У меня не получилось правильно создать рекламное место. Картинка не отображается. Я её загружала и на гугл диск и в альбомы picasa. Но понимаю, что адрес пишу неправильно. Подскажите. Дайте совет. Спасибо
ОтветитьУдалитьТатьяна Адрес изображения примерно такого вида --http://s017.radikal.ru/i401/1505/15/719f1a2b54f7.jpg. В моём случае картинка на радикале храниться.
УдалитьОн должен начинаться с http:
Вышлите мне через форму ниже какие адреса вы вставляете.