В данной статье вы получите исчерпывающие инструкции: как сделать так, чтобы на главной странице вашего блога статьи отображались в виде анонсов с красивой кнопкой "Читать далее" для раскрытия полного текста. Это очень удобно, если на Главной странице в Blogger у вас располагается несколько сообщений.
Итак, первым делом необходимо сделать "разрыв" в том самом месте вашей статьи, где должен прерваться текст.
Для этого необходимо нажать на значок разорванного пополам листа бумаги:
В результате появится такая пунктирная полоса:
После чего продолжаем дописывать статью, а результат разрыва увидим при публикации на главной странице вашего блога:
(если этот результат вас не устроит - можно в любой момент вернуться к редактированию - удалить пунктир разрыва, поставить его в другом месте - и вновь нажать на публикацию).
Теперь вы можете изменить текст разделителя "Дальше" на любой свой. Для этого заходим в панель управления/редактирования блога в раздел Дизайн.
Находим большой блок "Сообщения блога" и нажимаем на слово "Изменить" справа внизу.
После этого откроется небольшое всплывающее окно, в котором настраиваются сообщения блога. Находим строчку "Текст ссылки на страницу сообщения" и вместо надписи Дальше вписываем любую свою. В данном примере "Читать статью полностью".
Затем не забываем опуститься вниз этого всплывающего окна и нажать на команду Сохранить.
Теперь при просмотре блога вы увидите вместо стандартной надписи Дальше - свой новый текст.
Но это еще не всё, чем я хотела с вами поделиться в этой статье :)
Данный разделительный текст можно заменить на красивую кнопку и переместить из левой части в правую (на мой взгляд справа она смотрится более логично).
- Итак, в первую очередь нам нужна кнопка перехода в виде картинки. Как делать подобные кнопки читайте ЗДЕСЬ.
- Далее нам необходимо получить ссылку на созданную кнопку-картинку. Для этого загружаем ее на хостинг http://radikal.ru/ - и копируем готовую ссылку оттуда.
Как это сделать, показано в видео:
Следующим шагом будет изменение html-кода шаблона. Для этого заходим в настройки блога: Шаблон =>> Изменить HTML.
Кликаем мышкой внутри рамки с кодом шаблона, чтобы там замигал курсор. Затем нажимаем сочетание клавиш Ctrl+F на клавиатуре и в появившемся после этого окошечке (в поле поиска) вставляем вот такой код: <data:post.jumpText/>. Далее кликаем клавишу Enter.
Аккуратно удаляем этот найденный в html-шаблоне кусочек и вместо него вставляем вот такой код:
<img src="ссылка на нашу картинку" alt="Читать далее"/>
(обязательно заранее его редактируем!!! То есть, вместо слов "ссылка на нашу картинку" вставляем ту самую ссылку, которую подготовили на сайте радикал.ру, кавычки остаются).
В моем случае код со вставленной ссылкой выглядит так:
В моем случае код со вставленной ссылкой выглядит так:
<img src="http://s015.radikal.ru/i332/1511/5f/acd88f67f292.png" alt="Читать далее"/>
После вставки кода - жмем на "просмотреть шаблон"...
...и любуемся получившейся кнопочкой. Если всё хорошо - кнопка появилась внизу анонса слева - вас всё устраивает - жмем команду "Сохранить шаблон"
(если что-то пошло не так - выходим из редактора без сохранения изменений)
Теперь, если вы хотите, чтобы кнопка отображалась в правой части, то:
- снова заходим в Шаблон =>> Изменить HTML
- тем же способом находим код: <div class='jump-link'> и удаляем его
- вместо него вставляем вот такой: <div class='jump-link' style='text-align:right;' >
- нажимаем Просмотреть шаблон (теперь кнопка должна быть справа).
- если все хорошо - жмем Сохранить шаблон.
Как видим при просмотре блога - теперь наша кнопка располагается справа:
Желаю успехов! У вас всё получится!!!
Комментариев нет:
Отправить комментарий