Как добавить рекламный код в нужной части статьи?


Добавляем рекламный код в нужной части статьи

Чтобы вставить рекламный блок после необходимого нам элемента на странице (например, в начале, центре или конце статьи), нужно определится с этим элементом. В нашем случае это будет тег параграфа ‘p’, можно использоваться дивы и другие элементы на странице, например если нужно вставить рекламу после конкретной картинки, то это будет тег ‘img’.

После этого нужно пройтись по всем тегам ‘p’ в цикле. В этом поможет библиотека jQuery и её метод .each. Библиотека имеет отдельную функцию с аналогичным названием и используется как jQuery.aech. Для обхода всех тегов на странице подойдет первый вариант, на примере его мы напишем простенький скрипт прохода по всем тегам на странице внутри определённого блока ‘div’, что даст возможность вставить рекламный блок (адсенс или любой другой партнерской программы) в нужное место на странице.

Убедитесь что на странице подключена библиотека jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Я подключаю через сторонний сервер от google (ajax.googleapis.com). Это позволяет обойти периодические проверки на актуальность библиотеки, подключил один раз и забыл.

Представим структура где основной контент страницы — статья, которая располагается внутри div-блока с ID ‘content’. Текст статьи разбит на параграфы и обернуты в теги ‘p’. Наша задача пройтись в цикле по всем элементам ‘p’ внутри ‘div’ блока с айди ‘content’. Осуществим это с помощью упомянутого в начале статьи метода jQuery ‘each’.

Скрипт обхода тегов в цикле и вставка рекламного кода в нудном месте

Экспериментальная страница с готовым примером выглядит следующим образом:

<html><br /> <head><br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><br /> </head><br /> <body></p> <div id='content'> <p id='Zero'>1</p> <p id='First'>2</p> <p id='Second'>3</p> <p id='Third'>4</p> </div> <p><script> $(function(){ var idname; // перебираем все теги 'p' на странице внутри блока с телом статьи $('#content p').each(function (index, element) { if (index == 1) { $(this).append('111111 div элемент: ' + index + '; id элемента = ' + $(element).attr('id')+'<br />'); } });</p> <p>}); </script><br /> Важно помнить что первый элемент будет блок Zero, потому как цикл перебирается с улевого индекса<br /> </body><br /> </html>

Где index — итерация цикла, указывающая индекс перебираемого массива тегов ‘p’, в нашем случае проверяем является ли элемент массива вторым параграфом. Массив начинается с 0, поэтому сравниваем второй параграф именно как с единицей. Соответственно, каждый проверяемый тег имеет реальное «физическое» значение-1. Параметр element — ссылается на текущий DOM-элемент. Этим мы воспользуемся для поиска нужного нам блока.

Код скрипта проходит по всем тегам ‘p’ внутри блока ‘content’ и добавляет к нужному по счету параграфу «рекламный текст», в нашем случае — индекс элемента и его айди. Для вывода рекламного кода заменяем добавляемый при помощи ‘Append’ текст на его код.

$(this).append(‘YOUR CODE’);

При проверке на своем сайте не забываем поменять названия ID с ‘content’ на айди вашего блока, внутри которого скрипт будет делать обход по элементам. Возникшие вопросы задавайте в комментарии к статье.

Похожие записи:
  1. Версия вк с сохранением музыки скачать бесплатно
  2. Как проверить катушку зажигания мультиметром + диагностика и выявление проблем
  3. Как записать прямую трансляцию видео с помощью Ace Stream Media player
  4. Что делать если повысился пинг в онлайн играх World of Warcraft, Counter-Strike, Allods и других
  5. Как вернуть старый дизайн ютуб и попробовать новый?
Поделитесь в соц. сетях, вам минута времени - а нам приятно!

Ответить

  

Все новости » Статьи: Интернет, наука и техника » Добавляем рекламный код в нужной части статьи