Как заменить текст "читать дальше" на картинку. Часть 2

07.07.2014

как заменить "Читать дальше" в blogger на кнопку или картинку
Разделение статьи на анонс и остальной текст очень удобно, когда на Главной странице в Blogger располагается несколько сообщений.

В первой части статьи я писала о том, как создать кнопки для блога онлайн бесплатно. Во второй части разберемся, как заменить в Blogger надпись "Читать далее" на кнопку или картинку.
Итак, нам нужна картинка и ссылка на нее. Картинки лучше брать небольшие. 

3 варианта получения ссылки на картинку:

1) В предыдущей статье (она же - первая часть статьи про замену надписи "читать далее") я Вам предложила несколько кнопок, созданных мной в разных цветах, чтобы можно было подобрать под цветовую гамму Вашего блога. Кнопки уже загружены в Blogger. Соответственно, Вы можете сразу, не сохраняя их к себе на компьютер, скопировать только ссылку. Очень надеюсь, что с моим аккаунтом на Google будет всегда все в порядке )))

2) Кнопки берете мои или создаете свои и сохраняете их на компьютер. Затем загружаете в любой черновик статьи на Blogger и копируете ссылку на картинку кнопки.

3) Загружаете кнопки на какой-нибудь хостинг или бесплатное файловое хранилище. Берете ссылку оттуда.

Я буду показывать на скриншотах при замене надписи "читать дальше" на кнопку ссылки из Блоггера. 

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

2. Чтобы получить ссылку на кнопку, загруженную в Blogger, нужно нажать на картинке правую кнопку мыши и выбрать Копировать адрес ссылки...




Например, ссылка на эту кнопку:
http://4.bp.blogspot.com/-Ka1snkH3ap4/U6CK0Pu6wsI/AAAAAAAADiw/TOF_-HYe2X4/s1600/cooltext1609534569.png

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

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

Меняйте ссылку на ссылку своей картинки и title.

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



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


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

Далее нажимаем кнопку Просмотреть шаблон. Кнопка должна появиться сразу после анонса статьи. Слева.

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

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

! Если при просмотре Главной страницы Вашего блога новая кнопка "Читать дальше" не отображается - нажмите на клавиатуре клавишу F5.

Желаю удачи!


И видео-инструкция.
Просим не судить строго :)



Видео с канала Privetickplay TV

33 комментария:

  1. Ничего-то у меня не получается. Вроде всё делаю как надо, а вместо картинки кнопки выходит текст - ссылка на кнопку. В чём причина?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! Вы кнопки мои берете или свои?

      Удалить
    2. Кнопку сделала свою. Загрузила в черновик блога. Скопировала ссылку. Вставила в код. И далее по пунктам.

      Удалить
    3. Попробуйте на другом "тренировочном" блоге с другим шаблоном.

      Удалить
    4. Меня завут Гор яа никак не могу найти код для изменения... что мне делать

      Удалить
    5. Здравствуйте. Это может зависеть от шаблона Вашего блога.

      Удалить
  2. Здравствуйте Мария!
    Подскажите как заменить уже имеющуюся кнопку, на новую. Я так понимаю нужно просто заменить ссылку изображения кнопки на другую? Не могу найти эту ссылку, весь код перерыла, может вы подскажете?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! 1) откройте свой блог в браузере Google Chrome, 2) на изображении кнопки нажмите правую кнопку мыши, 3) выберите "просмотр кода элемента", 4) ниже должна открыться доп. панель, где будет цветом выделен код всей кнопки - там должна быть ссылка.

      Удалить
  3. Анонимный25.07.2014, 10:37

    Мария,у меня не получается. После того, как вставляем код нажимаем энтер, чтобы найти строчку, которую нужно удалить? И еще что за Всплывающий текст при наведении курсора на кнопку"/? Это нам зачем? Его обязательно вставлять?

    ОтветитьУдалить
    Ответы
    1. Да, нужно нажать "энтер" для поиска нужной строки. Всплывающий текст можно не добавлять, если не хотите. Для этого из кода уберите кусочек title="Всплывающий текст при наведении курсора на кнопку"

      Удалить
    2. Анонимный31.07.2014, 11:09

      Все равно не удается.( Пишут: Не удалось загрузить шаблон: Ошибка при синтаксическом анализе XML (строка 1547, столбец 226)

      Удалить
  4. Девочки, у кого кнопка отображается некорректно или вместо нее появляется текст ссылки, посмотрите внимательно правильно ли вы заменили кусочки кода.
    У меня сначала вместо кнопки отобразилась ссылка на нее - оказалось, что я вместе с фразой title="Всплывающий текст при наведении курсора на кнопку" удалила и знаки /> в самом конце кода. После исправления, кнопка все равно отобразилась некорректно - был просто прямоугольничек без надписи, а с ярлычком. Оказалось, что я вставила ссылку на кнопку вместе с протоколом http://, таким образом получилось повторение http://http://. Лишний удалила и все получилось.

    ОтветитьУдалить
    Ответы
    1. Большое спасибо, Елена, за подсказки))) Читателям они пригодятся.

      Удалить
    2. и Вам спасибо, Маша) очень много интересной информации в блоге и все очень понятно написано...

      Удалить
  5. У меня не получается((( Я не могу найти то, что нужно удалить. Несколько раз вбивала в поиск, а он не находит этого кода Жаль(((((

    ОтветитьУдалить
  6. Спасибо за подробные инструкции. Подскажите, пожалуйста, как настроить гаджет Поиск по блогу и интернету. У меня ищет только по Интернету

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Я добавила гаджет "Окно поиска" и в настройках гаджета поставила "галочки" в пунктах: "Этот блог" и "Страницы, связанные ссылками с этой страницей".

      Удалить
  7. Мария, спасибо за такие подробные статьи и инструкции! Вставила кнопку в один из своих блогов: Made By Hands
    Хочу такую кнопку вставить и во второй блог, но там стоит другая кнопка, которую я ставила несколько лет назад и уже не помню откуда и как. Проблема в том, что вместе с кнопкой сместился виджет LinkWithin. И окрасился он тоже вместе с кнопкой. Возможно, он как то объединился с кнопкой в шаблоне?

    ОтветитьУдалить
    Ответы
    1. Возможно, есть возможность исправить эту проблему? Или возможно удалить старую кнопку и вставить по Вашему примеру?

      Удалить
    2. Возможно нужно показать Вам код html из шаблона?

      Удалить
    3. Здравствуйте. Попробуйте через страницу "Контакты" http://samasajt.blogspot.ru/p/var-servicedomainwww.html отправить часть кода HTML (в комментариях код нормально не отображается) начиная с div class="jump-link" до кода с LinkWithin

      Удалить
    4. Добрый день!
      Спасибо, что отозвались. Извините, не было времени сразу Вам написать.
      Насколько я поняла, код нужно вставить в форум, который указан на странице контактов. Вот темка с моим вопросом: http://forumbloggera.rolfor.ru/viewtopic.php?id=6#p7

      Удалить
  8. Спасибо Вам большое! Очень облегчили жизнь :)

    ОтветитьУдалить
  9. Спасибо ВАМ! Пока тыкаюсь,как слепой котенок))))

    ОтветитьУдалить
  10. Кнопка встает, но вот текст статьи теперь не обрывается, а печатается весь, а после него красуется моя кнопка... что не так? может в 2019 году что то изменилось?

    ОтветитьУдалить
    Ответы
    1. Все получилось, это оказывается предпросмотр дает такую не совсем верную картину. На самом деле все встает как нужно. Спасибо огромное!

      Удалить
  11. Доброго дня. Коли створюю кнопку, виникає помилка "Знайдено більше одного віджету з ідентифікатором: HTML4. Ідентифікатори віджетів повинні бути унікальними". Що робити?

    ОтветитьУдалить
  12. Этот комментарий был удален автором.

    ОтветитьУдалить
  13. Почему у меня нет кода который надо удалить? Соответственно и не понятно куда вставлять код со ссылкой.

    ОтветитьУдалить

Kwork.ru - услуги фрилансеров от 500 руб.

Загляните и на другие страницы ^