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

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

Понравилась статья?

Поделись с друзьями!

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


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


Установка


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

Код
<div id="insertABlock">$MESSAGE$</div>


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

Код
<div id="insertABlock">$MESSAGE$</div>  
<div class="ABlockTo">Содержимое блока</div>
, где вместо "Содержимое блока" вставляем код рекламного блока / почтовой формы или любого другого виджета.


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

Код
<script>
$( $( ".ABlockTo" ) ).insertAfter( "#insertABlock p:last-child" );  
</script>

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

Настройка


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

Код
<script>
$( $( ".ABlockTo" ) ).insertAfter( "#insertABlock p:nth-child(N)" );  
</script>
, где N - порядковый номер абзаца, после которого будет отображаться блок.


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

Код
<script>
$( $( ".ABlockTo" ) ).insertAfter( "#insertABlock p:nth-child(3)" );  
</script>

Добавил: Admin Просмотров: 978 Категория: Интересные решения Комментарии
avatar
1
Отлично работает замостил в блоге, получилось, более мене чтобы нормально было и не было сразу в глаза, я прописал после 6 p nth-child(6) и конечно стили:
Цитата
.ABlockTo {margin: 0 auto;display: table;}
чтобы блок отображался по центру, а не маячил слева. Надеюсь, что кликабельность это повысит, а то есть посещалка в 2 тыс и дохода как говорится кот наплакал.

Еще вопрос, можно ли этот скрипт как-то доработать, чтобы в посте можно было два блока мостить или же просто добавить еще один:
Цитата
<div class="ABlockTo2">Содержимое блока 2</div>


И дополнительно в скрипт дописать:
Цитата
$( $( ".ABlockTo2" ) ).insertAfter( "#insertABlock p:nth-child(15)" );
avatar
2
Небольшая проблемка все же есть, иногда дублирует блок рекламы, создает себе клон, получается два блока, второй пустой. Как я понимаю, из-за того, что я использую в материалах классы, для стилизации контента в итоге получается у нас уже не 1 nth(4) а два так как дивов несколько.
avatar
0
3
Дайте ссылку на сайт? Можно в ЛС
avatar
4
Решил проблему, скрипт в итоге выглядит так:
Код
<script>  
  $( $( ".ABlockTo" ) ).insertAfter( "#insertABlock p:eq(4)" );  
</script>

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