17.3.09

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

79 comments

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

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

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

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

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

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

Все для Blogger(а):Птичка.

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

Все для Blogger(а):Птичка.

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

Теперь мы увидели как это работает и можно заняться 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 для тела этого сообщения".

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

Всем здоровья и счастья!
Света
Blogger: кошка.

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

79 комментариев:

  1. Света, а вот вы ни обычный кат не используете, ни java кат в своих постах, хотя они довольно большие. А почему?

    ОтветитьУдалить
  2. Хотелось бы применить эту функцию у себя в блоге, но для меня это все слишком сложно...
    Но у меня еще будут вопросы.
    Уж больно все это заманчива выглядит.
    Особено для постов, где выставляются рецепты - показал картинку, а дальше посетитель решает для себя раскрывать пость или нет.

    ОтветитьУдалить
  3. Светочка, спасибо Вам огромное!!!
    Всё получилось отлично с первого раза!!!
    (по 3-му пункту).

    Очень нужный и полезный у Вас блог!!!
    Жаль, что только сейчас я его нашла, но теперь буду постоянным читателем!
    Спасибо!

    ОтветитьУдалить
  4. Как всегда, все очень доступно, понятно и наглядно, спасибо, пойду пробовать ....

    ОтветитьУдалить
  5. спасибо за пост.
    Занес в свой хэлп по Блоггеру. Трудоемко но интересно.

    ОтветитьУдалить
  6. Как всегда - отличный пост! Все по полочкам, как в аптеке.
    Спасибо большое!

    ОтветитьУдалить
  7. ух ты,вспомнил форум своего провайдера,где все изображения из интернета(для изрображений была локальная галерея)прятали в спойлеры,чтобы не жечь трафик не анлимщиков,вот думаю ставить себе в блог или нет.

    ОтветитьУдалить
  8. Света, пора книгу издавать. Настоящую. Спасибо тебе.

    ОтветитьУдалить
  9. Спасибо, все получилось с первого раза, просто шик! И это вовсе не сложно, степ бай степ и вуаля :)))

    ОтветитьУдалить
  10. Очень хороший вопрос, Бродячий Проповедник!

    Почему я не использую ни обычный кат не используете, ни java кат в своих постах, хотя они довольно большие.

    Java кат, я на самом деле использую очень активно в видео блоге - причина ясна загрузки даже частичной 7 (а иногда даже 15) Youtube'овских кусочков не выдержит ни один комп. Поэтому я их прячу и открываю по ссылке. Прятала я их старым методом, которым была совсем не довольна, потому что люди без javascript не могли добраться до этих видео. Теперь, когда я придумала как это можно обойти. Я изменю скрипты в старых статьях в видеоблоге и возможно начну этим пользоваться здесь, потому что инструмент довольно занятный.

    Что до обычного ката.. как-то не хочется посылать людей с главной страницы на страницу поста -- трудно рационально объяснить почему. Очень хочется чтобы статья была прочитана или хотя бы просмотрена целиком - ведь я это все написала(!), а людям возможно будет лениво загружать еще одну страницу блога, а если они все-таки по ней кликнут вернутся ли они на главную страницу посмотреть что там еще... Вот такие заморочки. Хотя я тут уже почти начала катом пользоваться - абсолютно добровольно вставила его в пост про структуру Html, но теперь все-таки буду наверное использовать java-кат. Хотя в планах еще предложить одно дизайновое улучшение простого ката. Так вот может когда я его доведу до ума, оно мне так понравится, что я буду пользоваться только им ;).

    Вот уж не знаю ответила ли я на ваш вопрос.. такой поток сознания вылился - ну, пускай остаетеся ;)

    Удачи вам во всем!
    Света

    ОтветитьУдалить
  11. Света, а поисковики полностью инедексируют посты и под обычным катом и под java катом?

    ОтветитьУдалить
  12. Любые вопросы, Prokofevna!

    А способ действительно очень приятный, особенно теперь, когда он дружественен со всем чем только можно, я его могу смело всем рекомендовать!

    Удачи во всем!
    Света и Кайл

    ОтветитьУдалить
  13. Спасибо, Лена(trash-and-glam), за добрые слова!

    А мы будем стараться!

    А вы можете задавать вопросы, что еще хочется узнать научиться делать - так мы вместе и будем писать этот блог!

    Удачи во всем!
    Света

    ОтветитьУдалить
  14. Здорово, Егор!

    Если первый способ убирания под кат получился, то и этот получится!

    Удачи!
    Света

    ОтветитьУдалить
  15. Спасибо, Oyurkov!

    Если занести в шаблон поста типа: здесь ссылка-псевдолинк ** это прячем ** это продолжение и менять имена переменных, то и не так трудоемко.

    Я в видео блоге так и копирую образец из одного поста в другой. Можно было бы конечно и каждый раз код писать, но лениво ;).

    Удачи во всем!
    Света

    ОтветитьУдалить
  16. Спасибо, Александр!

    Ваша похвала как маслом по сердцу! :)))

    Удачи и хорошей велосипедной погоды!
    Света

    ОтветитьУдалить
  17. Не знаю, Леня(bar-b-q)!

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

    Удачи во всем!
    Света

    ОтветитьУдалить
  18. Челиточка, спасибо большое!

    Это я все пытаюсь Кайла сподвигнуть книжку написать ... для детей! А я пока лучше так интерактивно пообщаюсь - ведь интереснее намного! :)))

    Слышала, что недавно вышла на английском языке книжка "Blogger для Чайников", вот с удовольствием взялась бы перевести.. если бы какое-нибудь издательство предложило ;)

    Ну, вот помечтала немного....

    Привет Мише!

    Света и Кайл

    ОтветитьУдалить
  19. Отлично, что все получилось, Егор!

    Вы - СУПЕР!!! :)))

    ОтветитьУдалить
  20. Здравствуйте, Бродячий Проповедник!

    Огромный респект за Ваш вопрос! Чтобы на него ответить мне придется провести небольшое исследование, которым я с удовольствием займусь.

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

    Результат запроса: света кайл лошадка наглядно это демонстрирует. Самой было так приятно! :)))

    Остальные способы убирания под кат я проверю и отчитаюсь в ближайшее время.

    Еще раз спасибо!
    Света

    ОтветитьУдалить
  21. Света, Вам спасибо, что нас просвещаете))) Может действительно на свой блог мне тоже вместо обычного ката поставить Java кат?

    ОтветитьУдалить
  22. Здравствуйте, Бродячий Проповедник!

    Тоже мне просветителей нашли. Конечно, мы чего-то знаем и с удовольствием этим делимся. Если о чем-то мы не знаем, а люди спрашивают, обычно бывает интересно поисследовать.. А почему бы и нет? Ведь ИНТЕРЕСНО же! ;)

    Что до Вашего сайта, у вас в шаблоне уже встроен Java-кат (недружественный к отсутствию javascript). Сейчас проведем эксперимент по индексации и поймем чем из катов можно пользоваться, а чем не стоит.

    С уважением,
    Света

    ОтветитьУдалить
  23. Света,спасибо, очень интересный блог! Столько нужной и полезной информации!!!! Создала у себя на блоге расширяемый пост (мучилась с пунктом 2), а остальное просто. Я сделала это!!! Это так увлекательно...
    Успехов Вам!
    С уважением,
    Tatjana

    ОтветитьУдалить
  24. Добрый вечер, волшебница Света! Какая же прелесть!.. Спасибо!!! Но чувствую себя как Лиса и виноград... Под кат вроде давно делаю, хотя и не знала, что эта штука так называется!.. А это чудо очень манит, только боюсь не осилить... Для больших статей классная вещь - можно прятать биографии, стихи и т. д.! Для меня это было бы просто находкой... Ой, боюсь!..

    ОтветитьУдалить
  25. Спасибо большое! То же все получилось и работает :) Я как раз разбиралась, как убирать под кат :) А здесь такая статья. Причем этот способ мне гораздо больше нравится :)

    ОтветитьУдалить
  26. Света, посмотрите, пожалуйста, мой блог. Он у меня очень долг с сегодняшнего утра стал грузиться((( Никогда такого не было((( Может Вы знаете, в чем причина? Спасибо.

    ОтветитьУдалить
  27. Свет Вы наш блоггерский, Светлана! Приходить к Вам в гости - одно удовольствие.

    ОтветитьУдалить
  28. С удовольствием зашла на ваш блог, Tatjana! Послушала своего любимого Chris Spheeris, посмотрела как javascript-кат работает! Здорово работает!

    Значит можно будет двигаться дальше! ;)))

    Хороших выходных,
    Света

    ОтветитьУдалить
  29. Здравствуйте, Юля (Jusha)!

    Спасибо большое за комментарий. Использовать или не использовать кат это дело вкуса. Как я уже давно заметила вы используете Google Docs для полных текстов. Читать - одно удовольствие! Такой приятный шрифт - как-будто книжку читаешь! Наверняка можно и Blogger научить такому шрифту - там в исходном коде документа вроде все описания шрифтов есть. Пишите на email если будет интересно.

    А что до "ой, боюсь-боюсь" заведите себе тренировочный блог - там-то уж не страшно! ;)

    Удачи во всем!
    Света

    ОтветитьУдалить
  30. Здравствуйте, Кристя!

    Мне и самой этот способ нравится больше!

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

    Удачи вам во всех начинаниях!
    Света

    ОтветитьУдалить
  31. Здравствуйте, Бродячий Проповедник!

    Посмотрела на ваш блог повнимательнее, такое ощущение что загрузка видео в "Берегись Автомобиля" притормаживает... Сойдут видео с главной страницы, будет полегче. Сейчас полная загрузка главной страницы блога секунд 35-40. А если кликнуть на "Предыдущие" - 12-14 секунд. На обеих страницах тот же код, тоже число постов. Дело точно в видео! ИМХО

    Удачи!
    Света

    ОтветитьУдалить
  32. Спасибо, Любовь!

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

    Света

    ОтветитьУдалить
  33. Все получилось!
    Вы так легко пишете о сложных вещах! Огромное спасибо!!!
    )))

    ОтветитьУдалить
  34. Вам спасибо, Сергей и Надежда!

    Вообще, это мой самый любимый тип расширяемых постов. И у вас все получилось очень изящно!

    Такими читателями можно гордиться,
    Света

    ОтветитьУдалить
  35. Спасибо большое вам... вроде у меня все получилось :) А что делать с предыдущими кодами? Их убрать?
    Вот ссылка...
    http://blogger4you.blogspot.com/2009/02/blogger-better-way-to-create-expandable.html
    Или можно оставить, а то я неразборчив в HTML !!! :)
    Только с помощью вашего блога...я начинаю кое-что понимать HTML !!!
    Кстати не могли бы вы посмотреть мой блог, как расширить публикации + гаджеты, виджеты, а то совсем все в центре...Надеюсь вы поняли меня о чем я...

    ОтветитьУдалить
  36. Здравствуйте, Love!

    Предыдущий Html-код можно тоже оставить, потому что он ничему не мешает и ни с чем не конфликтует. Классно у вас все работает и похихикала я у вас в блоге всласть.

    Спасибо,
    Света

    ОтветитьУдалить
  37. Наверное feedburner не обновил, а может и сразу было обновление. Я отредактировал один пост в котором примел выше описанный код и дело в том, что на моей страничке подписки http://feeds2.feedburner.com/blogspot/Cvnu пост который содержит это "java кат" оказался не полным...

    ОтветитьУдалить
  38. Выяснилось, что это кат не работает в фидбернере и если даешь ссылку на полную статью в ней тоже приходиться нажимать "читать далее" ...

    ОтветитьУдалить
  39. Здравствуйте, ITuzer!

    Все правильно, кат на javascripte, всегда будет прятать, часть статьи... он для того чтобы сэкономить место и в тоже время не "посылать" читателя слишком далеко ;).

    А что до Feedburner - это от программы, через которую вы просматриваете свой RSS - поток зависит. Видела два разных результата с показом спрятанного и без.

    А вообще, с катами, это как и со всем в нашей жизни - каждый выбират для себя ;).

    Удачи во всем!
    Света

    ОтветитьУдалить
  40. У меня почему-то не получается. Я правильно поняла, что псевдоссылку мы должны присвоить выделенному тексту, который хотим спрятать? А потом в начале и в конце добавить коды. У меня выдается такая ошибка: Ваш код HTML не может быть принят: Tags cannot enclose tags и повторяется эта ссылка. Я даже не смогла ее скопировать, тоже не приниматся

    ОтветитьУдалить
  41. Ура! Заработало!!!!

    Поздравляю, Oksis, выглядит просто волшебно! :)))

    Удачи вщ всем!
    Света

    ОтветитьУдалить
  42. Здравствуйте,у меня проблема с кодом:на блоге черновике сделал как надо,как только это всё перенёс на другой блог то ссылка читать далее не открылась!я смнил уникальный код,сменил ещё раз и ничего!хотя всё тоже самое на другом блоге работает.

    ОтветитьУдалить
  43. А может ссылочку на статью, где не работает дадите? Я бы посмотрела код... хотя есть у меня одна идея! Попробуйте на досуге почитать это: http://blogger4you.blogspot.com/2009/03/blogger-html-structure.html

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

    Удачи во всем!
    Света

    ОтветитьУдалить
  44. Фотографии тюремных наколок

    я уже разместил тот пост,как нить надо будет опять заняться этим,пока что лень=)я спрашу у вас в другом посте о классном облаке тэгов.

    ОтветитьУдалить
  45. Здравствуйте. Интересное решение (хотя мне больше понравилась идея "Убираем под кат" от 22.02.09.). А вот с JavaScript есть проблемы! В Firefox при снятии галочки с "Использовать Java" все работает. А при снятии галочки с "Использовать JavaScript" уже не работает. В Опере то же самое. http://blogoproba.blogspot.com/ (верхний пост)

    ОтветитьУдалить
  46. Естественно, не работает, Ноам!

    Расширяемые посты на JavaScript не работают без JavaScript.

    Хорошая новость и зайдя в ваш блог я лишний раз порадовалась, что даже при отключенном JavaScript'е читатель получит всю информацию, а не так чтобы Читать далее - он кликает, а что читать не появляется...

    Может вам понравится один из этих способов там переход осуществляется на страницу поста:
    http://blogger4you.blogspot.com/2009/02/blogger-expandable-post-summaries-on.html

    http://blogger4you.blogspot.com/2009/02/blogger-better-way-to-create-expandable.html

    или мне еще нравится свежайший способ: http://blogger4you.blogspot.com/2009/08/blogger-read-more-for-laziest-bloggers.html (Но он тоже на JavaScript'е)

    Удачи во всем!
    Света

    ОтветитьУдалить
  47. Вот потихоньку настраиваю свой дизайн и дошла до псевдоссылки.. Обьясните пожалуйста, что значит 'номер элемента' и где он живет? ;-) Спасибо
    Ваша цитата "Я даю название переменным очень простым образом сначала пишу var а потом к ним приписываю дату статьи и номер элемента в статье."

    ОтветитьУдалить
  48. И еще вопрос. После выставления полного кода "Теперь показываю весь код для пункта 3)" у меня задуманный текст спрятался. А где прописывать title типа "читать тут" или "открываем ссылку" в этом коде. Спасибо

    ОтветитьУдалить
  49. Здравствуйте, Soleil-ln!

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

    Про номер элемента очень хороший вопрос! Дело в том что этот скрипт можно использовать несколько раз в одной статье. Ну, вот как здесь я спрятала сначала лошадку, а потом двух птичек. Так номер элемента - на самом деле надо было написать номер спрятанного элемента - у лошадки будет 1, у птичек 2 и т.д.

    А ваш второй вопрос еще лучше - пойду немного подправлю статью! Минут через 10 будет готово, приходите - смотрите! ;)

    Будут еще вопросы - спрашивайте обязательно!
    Удачи во всем!
    Света

    ОтветитьУдалить
  50. Дописала немножко...

    Т.е. вы правы, Soleil-ln, если у читателя отключен javascrip то ему ссылку "Читать тут" показывать не надо, потому что ничего спрятано и не будет.

    Еще раз спасибо,
    Света

    ОтветитьУдалить
  51. А может кто нибудь ответить на мой нубский вопрос?
    вне в блог нужно установить скрипт. У меня есть вайл на компьютере с расширением js. и вызов скрипта. Вызов я скопировал куда надо в html редакторе, а куда девать файл .js ума не приложу.
    Подскажите, пожалуйста )

    ОтветитьУдалить
  52. Код для пункта 2 с поддержкой отключенного JS не работает. Считает крывающую скобку после var**** концом скрипта. Как это поправить?

    ОтветитьУдалить
  53. Здравствуйте Света!
    У меня всё нормально работает по 1-му способу, но я хотела узнать, как сделать ссылку "закрыть" (свернуть), типа как у Вас в этом посте (где "закрываем зоопарк"), чтобы то, что мы прочитали под катом, свернулось назад)))
    Т.е. чтоб не нажимать на эту же ссылку "читать далее", а чтоб в конце этого прочитанного была специальная ссылочка)))
    Надеюсь, понятно объяснила.
    Спасибо большое!)))

    ОтветитьУдалить
  54. Света!Описаный дружественный способ работает,только если псевдоссылка обычная,со скриптами в ссылке ничего не видно на мониторе!И почему у Вас в примере к этому способу- "напоследок кликаем сюда" в коде блога псевдоссылка тоже обычная?Наверное,это способ сподвигнуть читателя на изучение Javascript и html?

    ОтветитьУдалить
  55. Света, с удовольствием (как всегда!) прочитала Вашу статью. А можно вопрос не по теме? Как под картинкой вставить несколько строчек, как у Вас - «Люблю искать к статьям подходящие картинки...»? Пыталась сделать изображение с подписью в качестве таблицы, но тогда не удается разместить текст сбоку.

    ОтветитьУдалить
  56. Здравствуйте. Я месяц не был на своем блоге, и вот что обнаружил: В "Настройки - Форматирование - Шаблон сообщения" у меня был забит код скрытия текста, для того ,что бы не вводить его каждый раз в режиме "Изменить HTML". И, желая напечатать новое сообщение в блоге, я обнаружил, что во вкладке "Изменить HTML" этого кода нет. В "Шаблонах сообщения" он был но, при попытке сохранить настройки появляется ошибка "Ваш код HTML не может быть принят: Tag is broken: SPAN". Пришлось очистить шаблон и сохранить его пустым. А вот если вручную добавлять код в закладке "Изменить HTML" ошибка "Ваш код HTML не может быть принят: Tag is broken: SPAN" все равно есть, но если отметить "Не показывать ошибки HTML для тела этого сообщения" сообщение удачно публикуется на блоге.

    П.С. Пишу из-под Убунту. Ибо из-под Виндовса на вашем блоге отсутствует окно комментариев! На бругих блогах (те которые я посещаю) окно для комментов есть.

    ОтветитьУдалить
  57. На счет окна разобрался. "Касперский Инт. Сек. 2010." блокировал. Пришлось разрешить все исключения браузера. А вот про код пока не понял!

    ОтветитьУдалить
  58. Света, здравствуйте!
    Я с огромным удовольствием пользовалась этим способом прятать под кат. Но вот пару месяцев не пользовалась, сегодня попробовала и почему-то не работает. :( При публикации сообщения возникает надпись: Ваш код HTML не может быть принят: Tag is broken: SPAN. И выделяется вот этоту часть текста в коде от "').
    Не могли бы Вы подсказать, почему вдруг такое стало происходить? Очень не хочется отказываться от этого способа.
    Заранее спасибо.

    ОтветитьУдалить
  59. Почему-то вырезались и не опубликовались кусочки с кодом, которые я приводила в прошлом комментарии :(
    Надеюсь все ж понятно будет в чем вопрос?

    ОтветитьУдалить
  60. Диана, отвечаю не по теме...

    Вообще-то, в табличке все тоже должно работать. У меня же все сделано на div.

    Писала об этом вот здесь: http://blogger4you.blogspot.com/2009/01/blogger-inscript-your-picture.html

    Удачи во всем!
    Света

    ОтветитьУдалить
  61. Спасибо, Кристя, Ноам!

    Поэкспериментирую...

    Игорь Сергеевич, в этом конкретно посте -- у меня совсем наворочено - надо было 2 картинки с возможностью закрывать одной псевдоссылкой... так что не судите строго ;).

    Удачи всем!
    Еще отпишусь!

    Света

    ОтветитьУдалить
  62. Всем спасибо за комментарии. Статью немного переработала:
    1) Ссылку "Смотреть подробности" (в случае выключенного javascript'а) спрятать так и не удалось... [Если у кого есть идеи - буду рада помощи, потому что в течении нескольких часов, я чего только с ней не делала :(] Поэтому код для этой части остался такой же как в "недружественном" скрипте.

    2) Да, редактор Blogger'а стал очень разборчивым и говорит, что не может принять такой Html-код -- бороться с этим просто, говорим Blogger'у что мы знаем, что делаем и ставим галочку "Не показывать ошибки HTML для тела этого сообщения".

    Все остальное у меня работает как часы ;).
    А у вас?

    Света

    ОтветитьУдалить
  63. Светлана! Спасибо большое за такой быстрый ответ. Все работает!

    ОтветитьУдалить
  64. Супер! спрячу картинки и ролики то что надо! и даже хорошая замена кату!

    ОтветитьУдалить
  65. Света, промучался несколько раз пытался, чтото сделать. Вроде все получается. Но после клика на "Подробности здесь" возврата статьи не получается. И в чем дело не пойму. Уже и текст зачинял и все как у Вас написано делал. Но... увы не получилось. А так хотелось бы прятать длинные статьи. Зато переводчи получился классный, тоже правда без ярлычка, но текстовый клик тоже отлично. Спасибо Вам за науку. И очень понравилось окончание Ваших статей скрытое под И напоследок кликаем сюда на "Всем здоровья и счастья Света!!! " придется додумывать как бы такое тоже сотворить у себя. Уж больно хочется, чтоб все мои читатели были здоровы и счастливы!!! И Вам Света тоже здоровья и счастья!!!

    ОтветитьУдалить
  66. А можно вместо надписи была картинка?
    Заранее спасибо.

    ОтветитьУдалить
  67. Спасибо! С 505ого раза получилось!))

    ОтветитьУдалить
  68. Спасибо, за комментарий Петр!

    Вам здоровья, счастья и благополучия! Пусть у вас в жизни все складывается, как Вы хотите!

    Света

    ОтветитьУдалить
  69. Очень легко, Dimmonix@gmail.com!

    Поставьте вместо слов "Подробности ниже:" - Html-код, описывающий картинку: <img src="http://адрес картинки" alt="Подробности ниже:"/> Подробности про картинки можно почитать здесь

    Удачи во всем!
    Света

    ОтветитьУдалить
  70. Главное, что получилось, Carmen Queasy! ;)))

    ОтветитьУдалить
  71. Здравствуйте, Света! Попробовала в тренировочном - получилось. В блоге хотела создать страницу вопросов-ответов и спрятать ответы, чтоб они разворачивались, когда это нужно, но никак. А самое смешное, что повторно в тренировочном опять не получается. Вообще-то вставляла все коды по наитию до конца не разобравшись, поэтому ответьте, пожалуйста, для чайника. По 1 пункту написано - JavaScript функция описание которой мы вставляем ПЕРЕД /head в Нtml коде нашего макета. Но в Html самого поста я не нашла /head. Может мне надо вставить его в Html дизайна? И код 2-го пункта я правильно поняла, что можно объединить с первой частью кода из 3-го пункта? Света, извините, если вопросы покажутся глупыми, но я правда не пойму как спрятать ответы здесь http://denasdoma.blogspot.com/2010/03/blog-post_4562.html

    ОтветитьУдалить
  72. Ура! Получилось! Света, получилось! Пришлось разбираться в предыдущих статьях, но теперь стало понятно. Спасибо, все ответы замечательно спрятались.

    ОтветитьУдалить
  73. Светлана, огромное спасибо! По данному вопросу все получилось сразу! Это все-таки уровень - не только самой разбираться и разобраться, но и преподнести другим, чтоб было не только "вроде все понятно", а и получилось. Браво!

    ОтветитьУдалить
  74. Ой, до 18-го.... Ну ладно, я подожду - не горит!)))

    "нужна помощь - поможем!"

    Света, добрый день! Мне нужна помощь, т.к. практически все твои статьи прочитала, но не шала для себя ответа))) Конечно, я чайник - но чайник тоже хочется кое-чему научиться)))
    Дело в том, что у многих блогеров комменты можно ставить без процедуры модерации или предварительной проверки, что ли. Как мне сделать то же самое? Я уже и в настройки заходила, но никак не могу сообразить, где можно отключить кнопочку модерации? Ко мне заходили несколько знакомых - анонимно, хотели поставить коммент, но у них ничего не получилось...Поэтому больше не хотят ждать, когда я дам "добро" на их посты, некоторые, чего греха таить - "висят" несколько дней, я не всё время тут бываю.
    Пожалуйста, помогите! Может где-то есть уже на эту тему пост, дайте пожалуйста, ссылку)))

    ОтветитьУдалить
  75. Здравствуйте Светлана и Кайл,большое спасибо за ваши статьи. Очень хороший и доступный у вас блог. Я новичек и сама стараюсь во всем разобраться и перерыла много блогов, но ваш самый доступный для чайников. Применила у себя в блоге "шапку невидимку", аж 200 раз. Очень кропотливо, но зато красиво все получилось и наглядно. Если будет минутка посмотрите,как вышло. Может что дельное подскажите.Учитель!http://xangodom-my-biznes.blogspot.com/p/39-2010.html

    ОтветитьУдалить
  76. Здравствуйте! Надеюсь, что тут ещё есть кто-то живой))
    Скажите пожалуйста, а можно ли где-то прописать в коде..или...я не знаю, где ещё, я в этом полный ноль, чтобы работал старый и добрый тег more, как на многих других платформах?
    На блоггере впервые столкнулась с тем, что стандарт [more=читать далее]наш текст[/more] не работает. Была в смятении, да и сейчас...пыталась как-то всё исправить, но не получается, что-то делаю не так, сложная штука)).

    ОтветитьУдалить
    Ответы
    1. В режиме редактирования Html вставляем код:
      <!-- more -->

      Там и в графическом редакторе есть кнопочка... Ищите и найдете :).

      Удалить
    2. Так в том и дело, вставляется этот самый "разрыв" страницы. Т.е. я не могу скрыть часть текста. Пример: идёт текст, потом я прячу часть текста с фоткой, а дальше снова текст.
      Тут всё, что под more уходит и я не знаю, как это исправить. Чаще всего more не перенаправляет даже на страницу с текстом, а просто открывает читателю скрытую часть. Вы писали о чём-то таком, я пыталась это сделать, но не выходит((

      Удалить

Популярные сообщения