Рекламный блок между абзацами материала

Уважаемый гость! Для скачивания файлов с нашего портала необходимо авторизоваться:

На днях, пользователь нашего сайта попросил реализовать скрипт для автоматического вывода div в тексте материала. Задумка интересная, ведь с данным решением можно посреди статьи выводить блок с рекламой, с почтовой формой или же с социальными кнопками — вариантов применения множество.

Требования. Скрипт будет вставлять блок после определенного тега <р>, поэтому, структура Вашего материала должна состоять из абзацев, обернутых в тег <р>.

Установка

В Панели управления сайтом переходим во вкладку "Дизайн". Далее открываем шаблон "Страница материала и комментариев к нему" модуля, где будет отображаться блок. Находим системный код "$MESSAGE$" и оборачиваем его в див с идентификатором #insertABlock.

Код

<div id="insertABlock">$MESSAGE$</div>

Далее под div-ом с #insertABlock создаем новый див с классом .ABlockTo. В результате мы должны получить следующий код:

Код

<div id="insertABlock">$MESSAGE$</div>
<div class="ABlockTo">Содержимое блока</div>

, где вместо "Содержимое блока" вставляем код рекламного блока / почтовой формы или любого другого виджета.

Веред закрывающим тегом вставляем скрипт:

Код

Установка завершена

Настройка

Изначально, скрипт будет отображать блок после последнего абзаца, но мы можем настроить скрипт на отображение блока после N-ого абзаца:

Код

, где N - порядковый номер абзаца, после которого будет отображаться блок.

Таким образом, если мы хотим, чтобы блок отображался после 3-го абзаца, то перед закрывающим тегом прописываем:

Код

Добавил: Admin Просмотров: 1584 Категория: Интересные решения Комментарии

Порядок вывода комментариев:

Спам

Linuxsoid • 09:03, 20.10.2016

Отлично работает замостил в блоге, получилось, более мене чтобы нормально было и не было сразу в глаза, я прописал после 6 p nth-child(6) и конечно стили:

Цитата

.ABlockTo {margin: 0 auto;display: table;}

чтобы блок отображался по центру, а не маячил слева. Надеюсь, что кликабельность это повысит, а то есть посещалка в 2 тыс и дохода как говорится кот наплакал.

Еще вопрос, можно ли этот скрипт как-то доработать, чтобы в посте можно было два блока мостить или же просто добавить еще один:

Цитата

<div class="ABlockTo2">Содержимое блока 2</div>

И дополнительно в скрипт дописать:

Цитата

$( $( ".ABlockTo2" ) ).insertAfter( "#insertABlock p:nth-child(15)" );

Спам

Linuxsoid • 09:54, 20.10.2016

Небольшая проблемка все же есть, иногда дублирует блок рекламы, создает себе клон, получается два блока, второй пустой. Как я понимаю, из-за того, что я использую в материалах классы, для стилизации контента в итоге получается у нас уже не 1 nth(4) а два так как дивов несколько.

Admin • 15:28, 20.10.2016

Дайте ссылку на сайт? Можно в ЛС

Спам

Linuxsoid • 20:08, 20.10.2016

Решил проблему, скрипт в итоге выглядит так:

Код

Лучше изменить nth-child(N) на eq(N) это решает проблему с дублями вкорне)). Результат можно увидеть в блоге - http://linuxsoid.com/ в любом из модулей. Проблема решена, это так для тех кто захочет увидеть как работает. Блок 278х80, это работа скрипта. smile