Меняем текст читать далее на кнопку

Меняем текст "читать дальше" на кнопку

Надпись "читать дальше", разделяющую начало статьи и основной текст, можно заменить на кнопку. 

      За чем она нужна? В скором времени или уже, у вас скопилось (скопиться) много статей и найти что-то будет не очень удобно. Для этого, мы сокращаем показ текста на главной странице. Настройки эти я показывала тут "Красота спасет мир"

  

  Под №2 у нас есть текст сообщения "Читать дальше", "Дальше" у кого как.

 При создании статьи, в каком-либо промежутке (лучше это делать вначале после пары предложений и/или картинки, нажимаем разорванный листочек (как паказано на картинке). Теперь наша статья будет показываться на главной странице именно до этого места.

 Теперь, если вас все устраивает, оставляете так, если же нет, и вы хотите вместо слов кнопочку смотрим дальше.

Такие кнопочки можно найти в интернете, можно создать самим через конструкторы сайтов.

    Я выбрала для этого бесплатный сервис http://dabuttonfactory.com/ 

Настраиваем текст кнопки, вид, размер

Создали? Сохраняем на компьютер.

Это мой бонус вам от меня. Созданные кнопочки на этом сайте:

Далее расскажу как заменить текст такой кнопочкой.

1. Делаем обязательно резервную копию блога.

2. Далее, я загружала в сообщении блога картинку (кнопку) ниже она представлена.

Чтобы узнать ее адрес, нажимаем на ней правой кнопкой мыши (открыть ссылку в новой вкладке).

Открывается просто кнопочка на отдельной страничке. Вот на этой страничке, при нажатии правой кнопочки, сохраняем ссылку на картинку. На эту кнопочку она выглядит так: 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8oheQK_WF7L18tDYqu6ghP_H5SHcGiVwu8yGVzCIwMb3vvMPopbcxYVtcTT8xeuHWTJL3eh6pwmnwlMHrvB5LJZDgQPMZgF3IgFGcC0ycB3SNpckGKHyOTO07gfffoHoDgwTlR39XWY/s1600/cooltext1609554923.png

3. И так, готовим отрывок HTML кода, который будем вставлять в шаблон.

   <img src="http://ссылка на нашу картинку" alt="Читать далее" title="Всплывающий текст при наведении курсора на кнопку"/>

Меняйте ссылку на ссылку своей картинки и описание кнопки (не обязательно), можно удалить title вовсе.

Пример моей кнопки:

   <img src="http://1.bp.blogspot.com/-plGb9M7CcM0/VPmOXcCzCTI/AAAAAAAAAVg/zXW7juHtLvc/s1600/cooltext1609554923.png" alt="Читать далее" title="Читать дальше"/>

4. Заходим в настройки блога: Шаблон ->> Изменить HTML.

5. Ставим курсор внутри рамки с кодом шаблона. Нажимаем Ctrl+F и в поле поиска копируем и вставляем такой код: <data:post.jumpText/>

6. Аккуратно удаляем этот код, а на его место вставляем сделанный нами. 

Нажимаем кнопку проверить шаблон.

Проверили, если все получилось, сохраняем.

Если хотите сдвинуть кнопку в право, то:

1) Нажмите кнопку Изменить шаблон.
2) Тем же способом ищем код: <div class='jump-link'> вместо него вставляем вот такой: <div class='jump-link' style='text-align:right;' > 

Снова проверяем шаблон, если все в порядке, сохраняем.

Надеюсь статья была вам полезной.