Blogger: Расширяемые Посты на JavaScript!

Люблю искать к статьям подходящие картинки. Вот сегодня узнала, что оказывается "Возможность существования плаща-невидимки сведена к математической теореме."

Шапка невидимка для вашего блога!

Здравствуйте! Сегодня мы продолжим беседу о расширяемых сообщениях в блоге. Мы уже с вами поговорили первом способе реализации "расширяемых сообщений" в предыдущем посте (Blogger: Улучшенные расширяемые сообщения [Убираем под кат]). Пост пользовался заслуженной популярностью, хотя и не у всех сразу все получилось, так что пришлось написать еще один пост о структуре языка HTML (Blogger: Структура языка HTML [приложение к статье о расширяемых сообщениях]) после чего стало гораздо легче.

Описанный ранее способ заключался в опубликовании на главной страницы блога только начала статьи, а вот чтобы прочитать статью до конца, читателю предлагалось кликнуть по ссылке "Читать далее" и перейти на страницу статьи. В строгом смысле слова это было не совсем "расширением поста"... а как это назвать по другому мне как-то в голову не приходит.

Сегодня я опишу для вас как создать реально расширяемый пост. Т.е. пост который при щелчке по ссылке (псевдоссылке) разворачивался и сворачивался.

Покажу работу псевдоссылки на примере:

Нажмите на эту ссылку - вылетит птичка!



Что, это не птичка... это лошадка?... - Ну, изините, а я так старалась... :(
А может вы тогда попробуете нажать эту ссылку



Птичка! Даже целых ДВЕ!!! - Я же обещала! :)))

Теперь мы увидели как это работает и можно заняться javascript'ом, с помощью которого это все было реализовано. Итак, закрываем зоопарк - кликаем по этой ссылке (кстати, картинки для примера были взяты с сайта Glitter Graphics).

Пример, надеюсь, посмотрели. Мою аналогия про Шапку-Невидимку поняли. А я продолжаю...

Таким же образом можно, на самом деле, реализовывать, что угодно. Вот на своем видеосайте Russian Video from Russia я таким образом прячу видео, когда публикую полнометражные фильмы в Ютюб'овской 10-минутной нарезке (а кусочками, кстати, смотреть удобнее). А еще таким образом можно просто расширяемые посты делать, расширяемые списки и т.д.

Сегодня мы просто разберем основы, а украшать этот способ будем учиться в следующий раз.

Метод состоит из трех частей:

1) JavaScript функция описание которой мы вставляем ПЕРЕД </head> в Нtml коде нашего макета.

<script type='text/javascript'>
function displ(nnn) {
if (document.getElementById(nnn).style.display == 'none')
{document.getElementById(nnn).style.display = 'block'}
else {document.getElementById(nnn).style.display = 'none'}
}</script>

Функция displ очень простенькая. На входе имя элемента - ну, вот того самого контейнера (коробочки) про которые я рассказывала в заметке о Структуре языка HTML [приложение к статье о расширяемых сообщениях]. И занимается функция вот чем - если на момент обращения к функции элемент был спрятан, то элемент становится видимым, а если элемент был видимым он прячется.

Вторая и третья части метода описываются в самом сообщении.

При редактировании сообщения переходим из режима Создать в режим Изменить Html.

2) Сначала, создаем псевдоссылку она очень похожа на обычную (Blogger: Начала HTML - Ссылки) с единственной разницей вместо указания адреса, куда мы хотим отправить нашего читателя, мы указываем имя функции в нашем случае displ и параметр имя элемента.

Такая псевдоссылка может выглядеть так:

<a href="javascript:displ('var1603093')" title="Читать ОБЯЗАТЕЛЬНО!">Подробности здесь:</a>

Т.е. смотрите в href мы говорим, что будет выполняться javascript функция с именем displ, а параметр у этой функции будет переменная с именем var1603093 Именем переменной может быть любым сочетанием цифр и латинских букв, начинающееся с буквы и оно должно быть уникально в вашем блоге. Я даю название переменным очень простым образом сначала пишу var а потом к ним приписываю дату статьи и номер скрываемого элемента в статье: 1 для первого элемента статьи, который я хочу спрятать, 2 для следующего элемента, который будет спрятан и т.д.

3) Теперь выделяем кусок нашего поста, который для начала мы хотим скрыть, а потом показать при щелчке по ссылке.

В начале куска вставляем следующий код:
<span id="var1603093" style="display: none;">

а заканчиваем спрятанный кусок разумеется вот этим:
</span>

Небольшие пояснения: Кусок нашей статьи заключаем внутри блочного элемента span предназначенного для выделения фрагмента документа с целью изменения его (этого фрагмента свойств). Вот мы его свойства и меняем - делаем фрагмент изначально невидимым и присваиваем ему имя (в данном случае var1603093).

Постойте, не торопитесь еще копировать... Послушайте - почитайте еще немного мои лирические отступления. Код я этот написала довольно давно, когда только стала изучать javascript. И всем он был хорош и замечателен... вот только одна мысль мне не давала покоя, что увидят люди, которые по тем или иным причинам отключили у себя в браузере javascript. А ничего они не увидят! И что же делать - считать если отключили javascript, то сами виноваты... Не хорошо - хотя все люди которые используют подобный метод, похоже так и считаю (т.е. я ни разу еще не видела код, который бы позволял людям с отключенным javascript прочесть весь текст). Последние две недели я особенно плотно работала над этой проблемой (обещала же написать этот пост, а публиковать несовершеннй код я не могла). И, наконец, пару дней назад нашла совершенно очевидный результат. Описания span в пункте 3) мы будем прятать внутри javascript'а. Тогда если у человека включен javascript у него в статье будут стоять соответствующий span и часть статьи будет изначально спрятана, а появляться будет по клику по псевдоссылке, а если человек выключил javascript тогда описание элемента span со свойством display:none не появится в его статье и стало быть он увидит наш пост со всеми деталями.

Возможно, некоторым покажутся мои рассуждения никому не нужной филантропией, но я позволю с этим поспорить. Люди занимающиеся поисковой оптимизацией знают, что поисковые роботы любят сайты сделанные для людей! И если пригласить поисковый робот на страничку в которой часть текста изначально скрыта под грифом display:none т.е. не показывать, то он (поисковый робот ваш спрятанный фрагмент и индексировать не будет), а если описание span display:none поместить внутрь javascript, то он проигнорирует этот span, зато нормально проиндексирует изначально спрятанный кусок.

Т.е. в результате небольшого усилия мы получили код: дружественный для читателя, для поисковых роботов и для RSS-ридера. Наконец, Алиса ("Кошка у камелька"), я поняла слова о недружественности убирания под кат для RSS-ридоров. Этот способ получился дружественным! ;)

Теперь показываю весь код для пункта 2) Действительно, если у читателя отключен javascript и от него мы ничего прятать не будем, хорошо бы спрятать нашу псевдоссылку (Но у меня не получилось, так что оставляем как есть... и ничего страшного если читатель у видит фразу что "Подробности ниже"). Так что код остался без изменения:

<a href="javascript:displ('var1603093')" title="Читать ОБЯЗАТЕЛЬНО!">Подробности ниже:</a>

и весь код для пункта 3)

Этот код мы ставим перед началом спрятанного фрагмента:

<script type="text/javascript"> document.write('<span id="var1603093" style="display: none;">');</script>

А этот код мы ставим в конце спрятанного фрагмента:

<script> document.write('</span>');</script>

Ну, вот этот код вы уже можете использовать, только не забывайте менять переменные. Имя переменной в псевдоссылке должно быть уникально и совпадать с именем id в span, которым она управляет.

Еще один момент. Blogger в последнее время стал очень "разборчивый" и когда вы попытаетесь опубликовать вашу статью, вы скорее всего увидите такое вот предупреждение:


Бороться с этим просто: Ставим галочку на "Не показывать ошибки HTML для тела этого сообщения".

И напоследок кликаем сюда.

Всем здоровья и счастья!
Света


Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...