среда, 17 декабря 2008 г.

Сообщения, которые можно "читать далее"

Поводом для написания этого поста послужил анализ посещений в Google Analytics. Cреди поисковых запросов, ведущим на мой блог был запрос "как в blogger описание разделить". Так посетители моего блога подтолкнули меня дать им пояснение по этому вопросу.



Для того чтобы эта функция работала, необходимо включить страницы сообщений. Для этого перейдите в панель настроек блога, затем выберите Архивирование и поставьте Да в разделе Включить страницы сообщений?.

Расширяемые краткие описания сообщений


Эта функция позволит отображать любое количества текста от начала сообщения, с добавлением ссылки Читать далее. Это может быть полезно если Ваши статьи очень длинные, например как мои.


Редактирование шаблона HTML


Для того, чтобы отредактировать шаблон HTML необходимо:

  1. Перейти на Панель инструментов Blogger
  2. В нужном блоге щёлкнуть по ссылке Макет
  3. В верхней части Вы увидите строку вкладок
  4. Перейдите на вкладку Изменить HTML
  5. Перед Вами шаблон блога
  6. Отметьте галочкой Расширить шаблоны виджета
  7. Приступайте к редактрированию шаблона


Редактирование таблицы стилей CSS

Внесите небольшие дополнения в CSS. Таблица стилей расположена в HTML-шаблоне блога между тегами <style> и </style>. Если у Вас нет таких тегов, то добавьте их перед тегом </head>.

Для классических шаблонов.

<MainOrArchivePage> 
span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage> 
span.fullpost {display:inline;} 
</ItemPage>

Для макетов.

<b:if cond='data:blog.pageType == "item"'> 
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;} 
</b:if>


Так мы определили класс "fullpost"


Ссылки "Читать далее"

Добавьте в шаблон после тега <data:post.body/> следующий код:

Для классических шаблонов

<MainOrArchivePage><br />

<a href="<$BlogItemPermalinkURL$>">Читать далее</a>
</MainOrArchivePage>

Для макетов


<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<br />
<a expr:href='data:post.url'>Читать далее</a>
</b:if>
</b:if>

Так мы создали ссылку "Читать далее".


Создание расширяемых сообщений

Теперь, для того чтобы воспользоваться функцией "читать далее" используйте теги <span class="fullpost"></span>.


Например:

Это начало сообщения. <span class="fullposst">А это - все остальное.</span>

Основано на материалах справочного центра Blogger

Важно: теперь кнопка "читать далее" встроена в Blogger.

19 коммент.:

Света комментирует...

Я вот тоже об этой функции все задумывалась... У Кайла в блоге она была несколько месяцев, потом надоело - он её убрал. Что до меня я люблю сразу всю статью целиком видеть - тем более что заставляя читателя кликать "Читать далее" ты уводишь его с главной страницы, что наверно не есть хорошо, он может и забыть случайно как много хороших постов ты уже опубликовал. С другой стороны видела я тут на днях хорошее СЕОшное видео, где мужик объяснял про уникальность контента. Т.е. все страницы блога индексируются отдельно и выходит, что твоя новая статья сама по себе не уникальна потому что она вся целиком лежит на главной странице -- это конечно заставляет задуматься.

Так что буду думать!

Спасибо за статью.
Света

IvanXP комментирует...

Можно, например, сделать так, что на главной будет краткое содержание статьи из которой всё будет понятно. А вот для любознательных читателей можно спрятать подробности за ссылкой "Читать далее".

IvanXP комментирует...

По поводу уникальности контента.
Дело в том что конструкция "fullpost" попросту прячет часть текста от пользователя, но сам текст загружается. Это видно по коду страницы

Web-pilot комментирует...

А у меня возникла следующая проблема- тегов style не было, но я их добавил, как ты и советовал, а вот тег data:post.body не находит поиск никак! :( Может есть возможность его тоже вручную прописать?! Если да, то буду очень благодарен за подсказку, где это сделать! Выручай, любезный. :)

IvanXP комментирует...

А можно ссылку на шаблон, который Вы используете. Попробую разобраться.

Web-pilot комментирует...

Если действительно не затруднит... http://btemplates.com/download/720/ это шаблон Flowers

IvanXP комментирует...

Re: Web-pilot.
Вы просто невнимательно искали, а вернее, видимо неправильно ввели строку для поиска. Вот пример с вашим шаблоном: Тестирование

web-pilot комментирует...

Уууу, Шаман!!! ;) Самое интересное, что в "тестировании" всё действительно работает,НО в его же исходном коде (Ctrl+U) этих тегов не находит!Скрипты сплошные ;)А ищу я элементарно- copy, Ctrl+F, paste и далее команда "найти далее". В Opere и Firefox всегда все находит, а тут что-то не "схватывает"... Или я что-то притупил совсем ( что немудрено ) или...
Словом, так и не разобрался я, в чем там фокус! Но, спасибо за внимание в любом случае! :)

IvanXP комментирует...

В исходном коде блога, который Вы смотрите через браузер этих тегов нет. Дело в том, что это специальные теги которые генерируют содержимое блога, т.е. читатель их не видит. Вы, видимо не то правили. Поэтому, добавил раздел "Редактирование шаблона HTML". Почитайте его внимательно и всё будет понятно.

web-pilot комментирует...

Благодарю! Думаю, этот раздел пригодится многим! :))

RsnAdult комментирует...

возможно ли сделать следующее?
в тех постах где это необходимо, добавлять ЧИТАТЬ ДАЛЕЕ. Там же где посты короткие, такой ссылки нет.
Потому что описанный выше вариант добавил Читать далее в каждый пост.

IvanXP комментирует...

Да, такое возможно.
Этот способ был подробно рассмотрен в статье Blogger: Улучшенные расширяемые сообщения (Убираем под кат) ! блога ВСЕ для BLOGGER(а) на BLOGSPOT(e)!

RsnAdult комментирует...

спасибо огромное!
собрал блог за день из ваших факов.
очень круто. ТОлько вот флеш плеер осталось впаять и все пучком.

IvanXP комментирует...

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

muha комментирует...

спс

Александр комментирует...

Находил я как-то в интернетах аж три способа сделать «кат» — все они выполняются через разные пляски с бубном вокруг кода шаблона. Ни один из них нормально не работал — кажется, конкретно вот этот, который вы описываете, совершенно не распознается Фаерфоксом: ссылка «читать далее» как ни в чем ни бывало висит в самом конце сообщения, тогда как должна, по идее, висеть там, где я ее повесил (где-то посередине).
Скажите, этот способ реализации «ката» для Фаерфокса приемлем? Спасибо.

IvanXP комментирует...

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

murom комментирует...

Вы пишете: "Таблица стилей расположена в HTML-шаблоне блога между тегами style и /style. Если у Вас нет таких тегов, то добавьте их сразу после тега /head."

Не ошиблись ли Вы? В статье, ссылку на которую Вы даёте "Blogger: Улучшенные расширяемые сообщения (Убираем под кат)!" предлагается добавить теги style и /style ПЕРЕД тегом /head...

IvanXP комментирует...

Да, я ошибся. контейнер style должен быть внутри head. Исправил досадную ошибку.
Спасибо!

Отправить комментарий

Примечание. Отправлять комментарии могут только участники этого блога.

 
item