Шапка невидимка для вашего блога!
Здравствуйте! Сегодня мы продолжим беседу
о расширяемых сообщениях в блоге. Мы уже с вами поговорили первом способе реализации "расширяемых сообщений" в предыдущем посте (
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 для тела этого сообщения".
И напоследок кликаем
сюда.
Всем здоровья и счастья!
Света
Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем!
Читать дальше...
И вечный бой!
Люблю искать к статьям подходящие картинки. Вот сегодня узнала, что оказывается "
