И так, хватит рассуждать, давайте приступим и попробуем выполнить задачу.
1. Скрипт вывода сообщения
В подвале перед закрывающимся body или в шапке перед закрывающимся head Вам нужно добаить следующий скрипт.
<script type="text/javascript">
var ads = "no-adb"
var msg = '<div class="no-adb-1">Вы используете расширение AdBlock или подобное. Вы можете добавить этот сайт в белый список, и тем самым внесете свой вклад в его развитие.</div>';
onload=function(){
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className)
{
var hasClassName = new RegExp("(?:^|\s)" + className + "(?:$|\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);
}
return results;
}
}
blocked = 0;
var ad_nodes = document.getElementsByClassName(ads);
for(i in ad_nodes){
if (ad_nodes[i].offsetHeight == 0){
blocked = 1;
ad_nodes[i].innerHTML = msg;
}
}
}
</script>
Во второй строке присваиваем класс no-adb блоку, который будет содержать внутри себя рекламный код. В 3 строке пишем само сообщение, которое увидят пользователи, использующие расширение. Как вы заметили сообщение заключено в блок с классом no-adb-1. Это очень Важно. Само сообщение меняйте как Вам угодно, но класс желательно не трогать, если не хотите потом запутаться 🙂
2. HTML разметка
Теперь добавим саму разметку. Как обычно вставить код разметки нужно в то место, где вы хотите видеть рекламу. Внутрь самой разметки, вставляем скрипт рекламы.
<div class="no-adb"> //Сюда код рекламмы </div>
3. CSS стили
Теперь осталось дело за малым. Добавляем стили блоку который выводит сообщение, а именно no-adb-1. Если Вам надо добавить стили блоку с рекламой то тогда вы должны сами прописать стили для класса no-adb. Не перепутайте их!
.no-adb-1 {
border:1px dotted #eee;
font-size: 16px;
line-height:1.38em;
text-align:center;
color:#444;
background:#ffffd3;
}
Стили, как обычно можем менять под себя и как я говорил раньше можете сделать всплывающее модальное (поп-ап) окошко, которое выведет данное сообщение. Как это сделать? Очень просто, но это уже совсем другой урок...
На этом все, спасибо за внимание 🙂
