Блог ☯

суббота, 16 сентября 2017 г.

Кнопка «Читать Далее» в блоггер (blogger), как сделать?

В этой небольшой статье я расскажу как сделать красивую кнопку «Читать Далее» в блоггер (blogger) и как вообще это всё работает.

Кнопка «Читать Далее» в блоггер (blogger), как сделать?

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

Разделение называется "Jump Break" - обрыв текста и перепрыжка, если перевести. Иногда пишут "read more" (Читайте еще), а на Русском это называют "Под катом".

Зачем вообще так разделять посты? Кто-то их не разделяет.

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

Плюс данного разделения еще и в том, что оно облегчает главную страницу. Вы можете разместить все тяжёлые элементы (ссылки, картинки, видео) уже внутри поста, а не на главной. Это довольно важный момент.

Почти в любом случае я вам рекомендую ставить такие разделители.

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

Если вы его ставите, тогда на главной странице будет только часть поста, а так-же кнопка «Читать Дальше» или «Читать Далее», вы можете изменять текст этой кнопки.

Заметьте, когда на эту кнопку нажмут, к адресу статьи добавится "#more", в этом ничего страшного нет, даже если это расшарят. Всё что идёт после решётки или знака вопроса в адресе не вредит.

В Blogger для изменения текста проследуйте в настройки, далее дизайн (layout) и найдите настройки постов - гаджет "сообщения блога".

Кнопка «Читать Дальше» в блоггер (blogger), как сделать?

Меняйте "Текст ссылки на Страницу сообщения"

Сам по себе разделитель, jump break, тоже легко сделать. В самом сообщении в панели инструментов вы его найдёте:

Кнопка «Читать Дальше» в блоггер (blogger), как сделать?

Выглядит как разрезанная страница

Ну и последнее, как сделать эти кнопки не стандартными, а чуть красивее?

Кнопка «Читать Дальше» в блоггер (blogger), как сделать?

Пример кнопки «Читать Дальше»

Для этого идите в настройки блога опять, далее - тема, далее - настроить:

Кнопка «Читать Дальше» в блоггер (blogger), как сделать?

Далее заходим в "Дополнительно", листаем в самый низ и находим добавить CSS.

Туда вставляем следующий код:

.jump-link {
 text-transform: uppercase;
 margin: 0 auto;
 font-size: 14px;
 letter-spacing: 2px;
 text-align: right;
 padding-top: 5px;
}
.jump-link a {
 border: 1px solid;
 padding: 10px;
}

Как видите никаких вредных ссылок тут нет, это просто настройки внешнего вида вот этой кнопки, которую мы меняем. Можно тут всё настраивать.

К примеру "padding-top" это отступ кнопки сверху. Так-же важно "text-align" - выравнивание текста, то есть кнопки. Я сделал выравнивание справа так-как хочу привлечь внимание к элементам в сайтбаре, но лучше делать кнопку слева, так людям удобнее.

Можете удалить вторую часть кода, это обводка по границе.

Сохраняете настройки и всё, у вас новая красивая кнопка «Читать Далее» в блоггер (blogger), я сделал только что и это лучше чем стандартная.

Кнопка «Читать Дальше» в блоггер (blogger), как сделать?

Кнопка справа снизу

Если пост вам помог и у вас всё получилось, поделитесь им в социальных сетях и не забудьте оценить его пальцем вверх чуть ниже.

Другие статьи про продвижение, оптимизацию и blogger читайте тут: