Ссылка «Читать далее» для Blogger — создание в текстовом редакторе и через шаблон

Поскольку я любитель постить далеко не миниатюрные записи в блоге, то за последние пару дней на главной собралось достаточно большое количество информации с фотографиями и видео. Страница грузится достаточно долго, а это ведь еще не все сообщения. Не смотря на то, что сервис Blogger позволяет установить количество выводимых на страницу постов, я решил прибегнуть к другому решению. А именно – создавать краткий анонс нужной статьи, в конце которого ставится ссылка «Читать далее». Кликая на нее, пользователю будет доступна полная версия той или иной записи в блоге. Фишка аналогична тегу read more  в WordPress.

Вообще в Blogspot мне встречалось 3 метода решения данной проблемы, имеющие свои преимущества и недостатки:

• Самый простой вариант — использование инструментов админки для вставки ссылки «Читать далее» в Blogger непосредственно при редактировании статьи.
• Во втором способе принцип похожий, но функция добавляется в шаблон.
• Третья реализация позволяет отображать только заголовки, кликая по которым пользователь может открывать то или иное сообщение (а также скрывать его еще одним кликом). Получается что-то вроде скрипта аккордеона.

Первый метод, как по мне, наиболее оптимальный и доступный для пользователей. К его недостаткам можно отнести то, что изменения приходится делать отдельно в каждой публикации. Во всем остальном — сплошные плюсы: вы сами можете выбирать размер краткого анонса заметки, не нужно редактировать макет, разберется даже новичок.

Второй и третий способы реализуются за счет правки шаблона Blogger. Они сложнее и более запутанные, хотя вполне реальные. К сожалению, без косяков тут не обойтись: в одном случае — это отображение ссылки «Читать далее» в каждом сообщении (даже если сокращать его не планируете); во втором — вообще отсутствие анонса и возможности выбирать в какой записи добавлять кнопку «под катом» (для раскрытия поста).

Добавляем в Blogger «Читать далее» через админку

Думаю, выбор данного (первого) метода очевиден. Алгоритм здесь следующий:

1. Заходите в Blogspot и выбираете нужный блог из списка (если у вас их несколько).

2. При наведении на сообщения появляется ссылка «Изменить» — используйте ее для редактирования уже существующей публикации. Если это новая заметка, то кликаете по кнопке «Создать сообщение».

3. Переключаете текстовый редактор в визуальный режим (кнопка «Создать»), после чего находите в панели инструментов соответствующую иконку для вставки разрыва страницы (при наведении подписывается как «Читать далее»).

Сразу после этого увидите в тексте серую полосу — она отделает анонс от полной записи. Если переключиться в HTML режим, то увидите, что в коде используется специальный тег <!—more—>.

Можете реализовать задачу и таким образом, если захотите. Не забудьте только сохранить запись после внесения изменений.

Кнопка «Читать далее» для Blogger в шаблоне

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

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

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

Шаг1. Условные CSS

Рассматриваю вариант решения только «для макетов», а не классических шаблонов. Нам требуется добавить в таблицу стилей немного кода. Для этого находим в макете место, где заканчивается блок заголовка </head> и вставляем перед тэгом следующие строки:

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

Здесь мы определили поведение класса «fullpost» для корректной работы.

Шаг2. Ссылки «Читать далее»

Сначала поставим галочку «Расширить шаблоны виджета» над блоком с кодом слева.

После этого находим строку <data:post.body/> и после нее добавляем:

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

Данная настройка сделает так, что в Blogger ссылка «под катом» будет отображаться на главной + страницах архивов и переадресовывать пользователя на полный текст записи.

Шаг3. Изменение формата сообщений

Теперь в статью, которую вы хотите изменить, нужно добавить небольшой фрагмент кода:

<span class="fullpost"></span>

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

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

Краткое описание должно быть за пределами тегов span, а остальной текст — между этими тегами.

Внимание(!) напоследок могу посоветовать еще один интересный вариант анонсов постов Blogger с картинками, который я рассмотрел в проекте Blogohelp. Кода для вставки чуть больше, но выглядит результат намного эффектнее текущего.

Итого. Лично я рекомендую создавать в Blogger «Читать далее» непосредственно через текстовый редактор. Думаю, большинству пользователей так будет проще и быстрее. Реализовывать какой-то автоматический вариант, если честно, вообще не вижу смысла.