Как сделать строку как у NOLIX и DAOS

Разместив у себя на сайте строчку от NOLIX, я не был удовлетворен приемлемой ценой за 1000 показов, поскольку почему-то на моем сайте никто не хотел покупать строчку дорого, а отдавать посетителей по 1-3 рубля не очень хотелось, поскольку только в Яндекс Директ я плачу за один переход минимум 4 рубля. К тому же я решил, что CTR многих объявлений не высок, прежде всего, из-за того, что многие делают их мало кликабельными это раз, а во вторых зачастую рекламируют то, что заведомо вряд ли бы было интересно аудитории данного сайта.

У меня появилась цель сделать что-то подобное у себя на сайте, используя рекламную строчку по максимуму, т.е. размещать только те объявления, которые бы были кликабельны. В итоге, передо мной встали две задачи:

  • реализовать все примерно в том же стиле, как и у Nolix и Daos
  • сделать систему подсчета кликов

В этой статье мы рассмотрим только первый вопрос, а второй подробно рассмотрен в статье: как подсчитать количество кликов по ссылке »

Постараюсь подробно объяснить как сделать нечто подобное, что Вы видите сейчас на моем сайте. Итак, Вам нужно сделать следующие:

1. Установить в шапке сайта (сразу после тега <body>) следующий код:

<body>
...
<div id="rekstr">
<script type="text/javascript" language="JavaScript" src="rttr.js"></script>
</div>
...
</body>

Примечание

Возможно Вам придется установить этот код не сразу после тега body, поскольку зачастую после этого него идет div, который задает ширину всей страницы. Например, у меня на сайте между моей рекламной строкой и тегом body стоит ещё один тег div. Лучше поэкспериментируйте или попросите помощи на форуме, если не разбираетесь в HTML.

2. Зайдите в свой файл стилей (обычно он называется style.css или main.css) и добавьте следующие строки:

#rekstr {
-moz-border-radius: 2px 2px 2px 2px; //задает закругление
background: url("rekl4.gif") repeat-x scroll 0 0 transparent;
border: 2px solid #FFF60C;
font-family: Tahoma;
height: 40px;
overflow: hidden;
width: 100%;
}
#rekstr a {
color: black;
display: block;
font-size: 24px;
font-weight: normal;
text-decoration: none;
margin-left:10px;
}
#rekstr a:hover {
color: black;
display: block;
font-weight: normal;
text-decoration: underline;
}
#rekstr {
line-height: 40px;
text-align: left;
}

Если Вы плохо разбираетесь в CSS, то Вам следует ознакомится со статьей: тег style (там как раз введение в CSS) или прочитать в других местах об CSS. В принципе, если Вас устраивает и такая строчка как у меня на сайте, то можете скопировать этот код и использовать его. Изображение rekl4.gif (а также ещё три хороших фона) можно скачать здесь: rekl.rar или же заменить строку

background: url("rekl4.gif") repeat-x scroll 0 0 transparent;

на строку с определенным цветом, например, желтым фоном:

background: YELLOW;



Я подготовил другие заготовки картинок, чтобы Вы могли выбрать подходящий фон. Уверен, что Вы и без меня так же сможете найти и другие неплохие варианты, которые подойдут для вашего дизайна.

3. Теперь немного о файле rttr.js, который мы подключаем в первом пункте. Обратите внимание на то, в какую директорию Вы его разместите. Я советую хранить подобные файлы в директории js. Этот файл содержит ротатор Ваших рекламных строчек. У меня этот файл содержит следующее:

function setrate(id) {
$.ajax({
type: "POST",
url: "/sts/click.php",
data: "id=" + id
});
}
var h=(Math.random()*10);
if (h < 2)
document.write("<a href='' onclick='javascript:setrate(1)'>Первая строка</a>");
else if (h >= 2 && h < 4)
document.write("<a href='' onclick='javascript:setrate(2)'>Вторая строка</a>");
else if (h >= 4 && h < 6)
document.write("<a href='' onclick='javascript:setrate(3)'>Третья строка</a>");
else if (h >= 6 && h < 8)
document.write("<a href='' onclick='javascript:setrate(4)'>Четвертая строка</a>");
else
document.write("<a href='' onclick='javascript:setrate(5)'>Пятая строка</a>");

Обратить внимание на функцию ЯваСкрипта – setrate, которая нужна для подсчета количества кликов по ссылке. Если у Вас нету такой цели, то можете убрать из каждой ссылки onclick=”javascript:setrate(..)”, а также описание функции setrate. На самом деле есть и другие более простые способы подсчета количества кликов по ссылке. Например, через Яндекс Метрику или же воспользоваться сократителем ссылок, который показывает статистику когда и сколько было кликов. Но мне было интересно самому изобрести свои наработки.

Строка var h=(Math.random()*10); и дальнейшие проверки обеспечивают ротатор, который показывает все пять строк в одинаковом количестве на большой выборке. Здесь можно легко отредактировать условия if, чтобы, например, одна строчка показывалась чаще другой. Вообще можно реализовать все это и через PHP. Однако я решил использовать JavaScript, т.к. потом есть удобный механизм отправки через AJAX информацию о клике по ссылке.

Советую прочитать следующую статью, которая целиком и полностью посвящена подсчету количества кликов »




Читайте также:

• Фреймы (теги <frame>, <frameset>, <noframe>, <iframe>)

• Свойство CSS position в HTML

• HTML тег <ul> – подробное описание с примерами

• HTML теги <h1>-<h6> – заголовочные теги внутри страницы

• Элементы тега <form>: радиокнопки, списки, флажки, текстовые поля

• HTML тег <embed>

• HTML тег <object>

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.