Здравствуйте, дорогие посетители сайта Я блоггер. В статье «Как написать и настроить сообщение в блоге» подробно описала все настройки редактора сообщений. Сегодня поговорим о том как в сообщениях на главной странице добавить кнопку «Читать далее».
На многих блогах/сайтах, примерно 70% сайтов в рунете на главной странице видно только анонс статьи, по моему мнению очень удобная функция для навигации по блогу.
Как разделить статью на главной странице и установить кнопку «Дальше»
Как спрятать текст под кат в блоге и как установить кнопку «Дальше» я постараюсь вам сейчас рассказать. В Blogger в редакторе сообщения настроена функция убирать текст под кат и соответствующая кнопочка 
, которая позволяет разделить статью на главной странице.
Когда создаете сообщение после слова на котором вы решите разбить текст, нажимаем на иконку кнопки и текст автоматически разделится, в сообщении вы увидите только пунктирную линию
Результат будет видно когда опубликуете сообщение, если текст разделили не так как хотели, можно вернуться в сообщение и отредактировать. Сообщение можно редактировать миллион раз.
Важно запомнить! Прежде чем опубликовать сообщение надо правильно создать постоянную ссылку (ЧПУ). После публикации статьи ее отредактировать уже нельзя.
По умолчанию текст будет как на скриншоте. Можно текст изменить на свой текст. При клике на ссылку откроется вся публикация и попадете на страницу сообщения.
Как же изменить текст ссылки "Дальше" на свой текст
Заходим в Административную панель Blogger > Дизайн. Открываем блок, который отвечает за сообщения > Сообщения блога, гаджет "Сообщения блога"
Нажимаем изменить и в открывшемся окошке настроек сообщения блога изменяем текст ссылки . В окошке, что обвела красным пишем свой вариант текста.
Как сделать кнопку «Читать далее» в Blogger (blogspot)
И так, мы научились разделять текст для главной страницы, можем изменить текст ссылки. Но если у вас есть желание изменить самостоятельно и немножко украсить свою главную страницу то можно установить красивую, стильную кнопочку ссылку на страницу сообщения.
Для начала нам нужна сама кнопочка.
- Если вы умеете пользоваться фотошопом то создать кнопку не составит большого труда, обычная фигура любой формы и нанесенный на нее текст может служить симпатичной кнопочкой в блоге. К примеру вот такие кнопочки как у меня в блоге я сделала самостоятельно в фоторедакторе Zoner Photo Studio 18 PRO
- Сгенерировать кнопочки онлайн.
Вот несколько хороших ресурсов где можно создать красивые стильные кнопочки на свой вкус и под дизайн своего блога:
- ImageFu.com
- Da Button Factory
- Cool Text: Logo and Graphics Generator
Описывать и делать скриншоты по каждому сервису не буду, разобраться в них легко. Практически в каждом браузере уже стоят переводчики, а яндекс для удобства пользователей сам и переводит, функция переводчик встроена в браузер, всем советую этот браузер!
Я хочу рассказать о способе, который я называю "простой для ленивых". Почему для ленивых, потому что я считаю что не стоит долго останавливаться на этой теме, конечно если вы планируете верстать сайты и стать профессиональным вебмастером то тема дизайн сайта очень важна.
Для одного блога в интернете можно без труда найти кнопочку уже готовую на свой вкус. Конечно доверять всем сайтам не стоит, но можно для безопасности установить кнопку в демо блог и проверить его на вирусы. Возможно для меня это намного проще, чем делать кнопочку самой на данный момент.
В общем я не очень люблю, да и не идут мне графические редакторы. Потому я и нахожу всегда альтернативу для своих целей.
PS. Прошел ровно год как я впервые создала блог и я научилась работать не только с фотошопом, я выучила языки программирования html и css ( не досконально конечно) и теперь создать кнопку для меня не составляет большого труда. Что я для этого делала спросите вы? Когда я редактирую сообщения работаю в html редакторе.
Находим мы значит кнопочку в интернете, копируем адрес ссылки, если вы не знаете как это делать можно почитать статью «Кнопка вверх». Там я подробно описала весь процесс.
С кнопочкой мы разобрались, теперь добавим ее в свой блог. Заходим в Админку блога > Тема > Изменить HTML. Ставим курсор в окно шаблона, вызываем окно поиска (Ctrl+F), вставляем и находим код:
<data:post.jumpText/>
Затем нажимаем Enter, код выделится в другой цвет (подсветка кода). Удаляете его и вставляете другой код:
<img src="http://www.liveinternet.ru/tags/%F2%E5%ED%E5%F0%E8%F4%E5/page2.html" alt="Читать далее" title="Подробнее"/>
Код надо заранее подготовить в блокноте и заменить адрес ссылки кнопки, то что выделено красным.
Настройки:
http://www.liveinternet.ru/tags/%F2%E5%ED%E5%F0%E8%F4%E5/page2.html адрес моей кнопки измените на свой.
Читать далее- текст на кнопке
Подробнее- всплывающий текст при наведении курсора мыши на кнопку, текст можно заменить на свой.
Нажимаем Предварительный просмотр темы. Если видите кнопочку на странице, нажимаем Сохранить тему.
По умолчанию платформы Blogger кнопочка появится в левом углу статьи анонса. Если вам надо кнопочку справа то нужно сделать следующие изменения:
Заходим снова в шаблон, находим код <div class='jump-link'> как я описывала выше и удаляем. На место удаленного кода вставляем другой код:
<div class='jump-link' style='text-align:right;' >
Смотрим на предварительный просмотр, все нормально, сохраняем.
Как в нестандартном шаблоне Blogger (Blogspot) изменить текст кнопки «Read more»
В новой скачанной теме не нужно в редакторе сообщений нажимать на ссылку «Читать далее» виджет установлен по умолчанию автором шаблона, скрипт сам порежет ваше сообщение в нужном месте.
В том случае если вы выбрали шаблон без кнопки, то можно воспользоваться способом выше, как для стандартных шаблонов. Главное, не нужно бояться экспериментировать.
Когда я скачала и установила новую тему, все перевела быстро, а с кнопочкой ну ни как. С месяц приблизительно кнопка была без перевода, с периодичностью к ней возвращалась, но в шаблоне находила только стили Css, а разобраться с тегом который отвечает за текст виджета не получалось.
Заходим в Административную панель Blogger > Тема > Резервное копирование и восстановление (обязательная процедура ) > Тема > Изменить HTML.
В открывшемся окне шаблона открываем окно поиска для поиска тегов и стилей Сss, в окно шаблона ставим курсор, нажимаем на клавиатуре сочетание клавиш Ctrl+F (раскладка клавиатуры любая), в окно поиска вставляем код
<div class='post-body entry-content'>
Код выделится в другой цвет и ниже кода ищем текст « Read more», удаляем его и пишем свой вариант названия ссылки: Читать далее, читать дальше, подробнее, читать полностью.
В моем блоге тег для редактирования выглядит так:
<a expr:href='data:post.url'>Читать далее</a>
Будь вместе с Я Блоггер
У меня теперь неактивна кнопка.
Всё, отремонтировал. Правда пришлось сбросить к дефолту. Почему-то сама ссылка relf-то пропала. Уверен, что я не удалял никуда ничего. потому что помню, что проверял на кликабельность. После этого я не правил вообще ничего в коде.
Вроде бы уже у вас все нормально?! Анонсы на главной и кнопка читать далее как вы хотели справа и активна. В Blogger главное без суеты и без боязни, с html и css кодами работать легко!