Реклама между новостями, постами. Скрипт для юКоз. jQuery
И опять, всё началось не спроста .... ヅ
Чёй-то, последнее время, у меня начало входить это в привычку. Ну да ладно, оставим сантименты на лучшие времена, а сейчас новая задача. Вставка информационного блока между блоков новостей, например, или материалами других модулей.
В который раз, напомню, что:
Если у вас сайт на хостинге юКоз (uCoz), и вы не совершали никаких действий по отключению скрипта - jQuery у вас есть, так как подключена «по умолчанию». Это, тот самый, скрипт «u.js» - который включает в себя эту библиотеку.
Задача ясна. Прикинем как можно наиболее просто это реализовать.
Я вижу, так, навскидку, как минимум два решения этой задачи. С использованием системных кодов, и про помощи JavaScript и jQuery.
Мне интересны оба варианта, так как один - обладает более высокими SEO-параметрами, при правильном использовании, а второй - большей гибкостью - как раз под рекламные блоки - с второстепенной/рекламной информацией.
Простейший вариант
Скопирован, практически один-в-один вот от сюда: «Модуль "Новости сайта" (решение проблем)»
<div style="display:none;">
<div id="reklama">
<strong>=== ТУТ ВАША РЕКЛАМА !!! ===</strong>
</div>
</div>
<script>
$("table.eBlock:eq(1)").after( $("div#reklama") );
</script>Всё бы хорошо, да не очень удобно ...
Давайте рассмотрим плюсы и минусы.
Плюсы:
- - простота.
- - Абсолютно любой контент. И любые сткрипты.
- - Возможность применения информеров не в скриптовом варианте.
Минусы:
- - наличие блоков, считай с мусором (рекламой) в теле страницы, причём используется единовременно - только один. А если их много ... ヅ
- - При редактировании/изменении блока, информации в нём - нужно редактировать шаблон страницы. Возможны ошибки, при неаккуратности ...
- - Увеличение общей массы страницы.
- - Нет случайной выборки. То есть блок статичен. и т.д.
Другие варианты
Нет, велосипед изобретать не собираюсь, хотя и не считаю это напрасным времяпрепровождением, всё просто.
Делаем информацию динамической, то есть используем случайную выборку из блоков с рекламой. Заодно уберём лишний код из шаблона, и, делаем более удобной функцию редактирования/изменения/добавления информации.
Вот такая задачка.
Решение.
Идём в редактор страниц сайта и создаём отдельную страницу, желательно с персональным шаблоном, но можно и с обычным, и назовем её ... Реклама.
Если страницу создали с персональным шаблоном - скрываем её из индекса обычными, для такого случая мета-тегами.
<meta name="robots" content="noindex,nofollow" />Можно и в роботс закрыть.
Если со стандартным шаблоном - только роботс.txt
Содержание страницы ... ヅ ... примерно вот такое ... Классы и идентификаторы - произвольные. Привязаны к будущему скрипту.
<div id="banBlock0">
<div class="mCont">Здесь располагается содержимое id "banBlock0"</div>
</div>
<div id="banBlock1">
<div class="mCont">Здесь располагается содержимое id "banBlock1"</div>
</div>
<div id="banBlock2">
<div class="mCont">Здесь располагается содержимое id "banBlock2"</div>
</div>
<div id="banBlock3">
<div class="mCont">Здесь располагается содержимое id "banBlock3"</div>
</div>
<div id="banBlock4">
<div class="mCont">Здесь располагается содержимое id "banBlock4"</div>
</div>
<div id="banBlock5">
<div class="mCont">Здесь располагается содержимое id "banBlock5"</div>
</div>
<div id="banBlock6">
<div class="mCont">Здесь располагается содержимое id "banBlock6"</div>
</div>
<div id="banBlock7">
<div class="mCont">Здесь располагается содержимое id "banBlock7"</div>
</div>
<div id="banBlock8">
<div class="mCont">Здесь располагается содержимое id "banBlock8"</div>
</div>
<div id="banBlock9">
<div class="mCont">Здесь располагается содержимое id "banBlock9"</div>
</div>
<div id="banBlock10">
<div class="mCont">Здесь располагается содержимое id "banBlock10"</div>
</div>Где:
<div id="banBlock10"> - уникальный на странице блок. Используется при запросе.
<div class="mCont"> - контент для рекламы/информации. Любое содержание, кроме скриптов.
Ну, и сам скрипт, который будет осуществлять выборку из массива рекламы.
<script type="text/javascript">
$(document).ready(function(){
/* Start DocumentReady */
var $this=$("#allEntries table.eBlock:eq(1)"); /* Или eq(<rnd10>) - для случайной выборки */
$this.after('<div class="myinf"><img src="http://likbezz.ucoz.ru/_theme/_st/img/ico/aj2.gif" /></div>');
$this.next('div.myinf').load('/index/0-4 #banBlock<rnd10>');
/* End DocumentReady */
});
</script>Где:
$this=$("#allEntries table.eBlock:eq(1)"); - определяем после какого материала будет наша/ваша реклама. Отсчёт с нуля. Здесь - после второй таблицы table.eBlock в блоке #allEntries(<div id="allEntries">).
<img src="http://likbezz.ucoz.ru/_theme/_st/img/ico/aj2.gif" /> - картинка предзагрузки.
$this.next('div.myinf') - конечный контейнер для блока с рекламой. Здесь «div.myinf». ($this.after('<div class="myinf">)
/index/0-4 - адрес вашей, не моей, страницы с набором рекламных блоков. Можно использовать просто страницу, загруженную в ФМ (файловый менеджер. Здесь и далее)
#banBlock<rnd10> - ID блоков, точнее - их начало. <rnd21> - выдаёт случайное число от 0 (нуля) - до 10. Здесь. Если у вас рекламных блоков 10 - 0,1,2 ... 8,9 - ставить нужно <rnd9>.
$this=$("#allEntries table.eBlock:eq(<rnd9>)"); - можно задать случайный блок. Где <rnd9> - количество новостей на странице минус один (1)
Для тех, у кого не стандартный, или полностью переделанный дизайн каркаса - выборку блока для вставки, можно делать по системным идентификаторам. Или по своим - персональным.
Нарпимер вот так:
$('#allEntries div[id^=entryID]:eq(0)') - выберет первый блок (:eq(0);). На любом сайте ... ヅ ... в юКоз.
Не забываем, при копировании кода, заменять « на < и вот это » на вот это > и убирать «_» ... или копируем только из блока [Смотреть чистый код]
Вот, в принципе и всё, с этим вариантом.
Вариант второй, похожий, но другой. ヅ
Другой по-принципу. Устанавливается в шаблон «вид материалов» - того модуля, где хотим наблюдать рекламу/информацию.
Вот его ... код.
<if($ID$%6='1')>
<div id="myinf$ID$">
<img src="http://likbezz.ucoz.ru/_theme/_st/img/ico/aj2.gif" />
<script type="text/javascript">
$(window).load(function(){
$('#myinf$ID$').load('/index/0-4 #banBlock<rnd10>');
});
</script>
</div>
<endif>Где:
<if($ID$%6='1')> - узнаём, кратно ли ID материала «6» или нет. И, если кратно - выводим случайно выбранный, а можно и не случайно, блок с той же страницы, что и к предыдущему скрипту.
<div id="myinf$ID$"> - так как материалов/рекламных блоков - может быть больше одного, устанавливаем индивидуальный ID блоку приёмнику. и показываем картинку предзагрузки.
$('#myinf$ID$').load('/index/0-4 #banBlock<rnd10>'); - загружаем случайный контент в свой, индивидуальный, контейнер.
В принципе - всё должно быть понятно, а вот мелочи - поясню.
<($ID$%6='1')> - это, примерно, после каждого каждый шестого поста - ваша реклама. Поиграйтесь с цифрами - интересно. ツ
Вариант три. С использованием информера случайных данных.
К сожалению, большому моему сожалению, в шаблоне «вид материалов» информер не пашет. Обидно.
Так что только JS.
<if($ID$%6='1')>
<div id="myinf"><script type="text/javascript" src="http://tng.ucoz.ru/informer/2-1"></script></div>
<endif>Инструкция по соззданию информера - доступна в ПУ (панель управления. Здесь и далее ... )... также можете почитать статеечку «Случайная фраза, выражение, данные. Делаем информер. Для uCoz» ...
Для тех, кто более-менее понял принцип - вот информация к размышлению.
Если данные/реклама - статичны - можно генерировать ссылку на случайный файл, загруженный в ФМ в папку на сайте. Также, можно брать блоки с инфой не с динамических страниц, как мы сделали в самом начале - и, исключительно для удобства редактирования, а со статических, просто загруженных на сайт, сделанных в любом внешнем редакторе.
Кроме того, можно использовать отдельный модуль, раздел или категорию - определить под рекламные материалы - но ... ヅ это чёт больно глобальный замах ... ヅ
Короче, к чему это я всё пишу, а к тому, что при наличии хорошей ИДЕИ - остальное - сущий пустяк.
