Дизайн рекламного блока

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

Для чего это нужно?
Лично я разработала этот рекламный блок для удобства работы с биржами ссылок.
Например, Вы зарабатываете на 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!important;}
.advert a:hover {text-decoration: none!important;}

.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*/

/*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!important;}

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

.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>

ЗАГЛАВИЕ БЛОКА </span>

<div style="clear:both;"

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

</div>

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

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

Дизайн рекламного блока

Добавить комментарий Отменить ответ