Дизайн рекламного блока для сайта

Предлагаю Вашему вниманию дизайн рекламного блока для сайта с несколькими цветовыми решениями.

✪ DEMO⇊ СКАЧАТЬ

Для чего это нужно?
Лично я разработала этот рекламный блок для удобства работы с биржами ссылок.
Например, Вы зарабатываете на GoGetLinks, размещая на страницах своего сайта краткие заметки о других сайтах. Или Вы работаете с автоматической биржей Sape и также можете помещать ссылки в стилизованный рекламный блок.

Размещение кратких заметок или ссылок внутри специального блока делает сайт привлекательнее как для вебмастеров, которые размещают рекламу на вашем сайте, так и для пользователей.

На моем сайте такой блок выглядит так:

Чтобы разместить такой блок на своем сайте прежде всего скопируйте себе CSS стили рекламного блока:

/*Advertise*/
/* GREY */.grey {border: 2px solid #f0ebeb;}
.grey div span.block {background: #f0ebeb; color: #817e7e;}
.grey div span.out {background: #f0ebeb;}
.grey a {color: #0066cc;}
 
/* BLUE */.blue {border: 2px solid #dcfcff;}
.blue div span.block {background: #dcfcff; color: #1f6362;}
.blue div span.out {background: #dcfcff;}
.blue a {color: #0066cc;}

/* ROSE */.rose {border: 2px solid #eddadc;}
.rose div span.block {background: #eddadc; color: #a6424e;}
.rose div span.out {background: #eddadc;}
.rose a {color: #ff0000;}

/* GREEN */.gree {border: 2px solid #a5f9a5;}
.gree div span.block {background: #a5f9a5; color: #035603;}
.gree div span.out {background: #a5f9a5;}
.gree a {color: #000000;}

/* ORANGE */.orange {border: 2px solid #fdb960;}
.orange div span.block {background: #fdb960; color: #a85f00;}
.orange div span.out {background: #fdb960;}
.orange a {color: #a85f00;}

/*block styles*/.advert { 
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px;}

.advert a {text-decoration: underline;}
.advert a:hover {text-decoration: none;}

.advert div {
 height: 19px;
 }

.advert div span.block 
{display:block;
 float:left; 
 padding-right: 20px;
 margin-left: -6px;
 margin-top: -6px;
 padding: 5px;           

 font-weight: bold;
 font: Impact, fantasy;
 font-size: 8pt;
 border-radius: 0px 0px 10px;
 -webkit-border-radius: 0px 0px 10px;
 -moz-border-radius: 0px 0px 10px;}
 
.advert div span.out, .advert div span.inner {
 display:block;
 width: 15px;
 height: 18px; 
 }
 .advert div span.out {
 float: left;
 margin-top: -5px;
 }

.advert div span.inner {
 border-top-left-radius: 15px 10px;  
 -webkit-border-top-left-radius: 15px 10px;
 -moz-border-radius-topleft: 15px 10px;
 background: #ffffff;
}
 
/*END-Advertise*/

Далее выберите место, где должен размещаться рекламный блок и вставьте следующий HTML:

<div class="advert grey"> 
<div><span class="block"> 

ЗАГЛАВИЕ БЛОКА </span> 
<span class="out"><span class="inner"></span></span></div>  
<div style="clear:both;"

ТЕКСТ БЛОКА <a href="">ссылка блока</a> 
</div>

Это HTML код серого блока. Вы видите в самом начале написан стиль advert grey. Если Вы хотите использовать другие цвета, тогда слово grey Вам нужно поменять на соответствующий цвет.
Голубая палитры – blue
Розовая палитра – rose
Зеленая палитра – gree
Оранжевая палитра – orange

При знании стилей CSS вы сами можете создавать собственную палитру цветов, это совсем не сложно.