В первой части статьи я писала о том, как создать кнопки для блога онлайн бесплатно. Во второй части разберемся, как заменить в Blogger надпись "Читать далее" на кнопку или картинку.
Итак, нам нужна картинка и ссылка на нее. Картинки лучше брать небольшие.
3 варианта получения ссылки на картинку:
1) В предыдущей статье (она же - первая часть статьи про замену надписи "читать далее") я Вам предложила несколько кнопок, созданных мной в разных цветах, чтобы можно было подобрать под цветовую гамму Вашего блога. Кнопки уже загружены в Blogger. Соответственно, Вы можете сразу, не сохраняя их к себе на компьютер, скопировать только ссылку. Очень надеюсь, что с моим аккаунтом на Google будет всегда все в порядке )))
2) Кнопки берете мои или создаете свои и сохраняете их на компьютер. Затем загружаете в любой черновик статьи на Blogger и копируете ссылку на картинку кнопки.
3) Загружаете кнопки на какой-нибудь хостинг или бесплатное файловое хранилище. Берете ссылку оттуда.
Я буду показывать на скриншотах при замене надписи "читать дальше" на кнопку ссылки из Блоггера.
1. делаем резервную копию блога. Обязательно!!!
2. Чтобы получить ссылку на кнопку, загруженную в Blogger, нужно нажать на картинке правую кнопку мыши и выбрать Копировать адрес ссылки...
Например, ссылка на эту кнопку:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8hMb-ttJbe5LRtkd0qWBaJUFpnNY_BFwLKvTY00aocxP_JLo5e-DWVfBNoQZq8I958N0XAmCsb2FK0u-ypDkql9X9t64ffykAVVyZEZ2UZyg6qexZJKuIljm1JzQMeAT-a3uGmAWydWg/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.
Желаю удачи!
И видео-инструкция.
Просим не судить строго :)
Ничего-то у меня не получается. Вроде всё делаю как надо, а вместо картинки кнопки выходит текст - ссылка на кнопку. В чём причина?
ОтветитьУдалитьЗдравствуйте! Вы кнопки мои берете или свои?
УдалитьКнопку сделала свою. Загрузила в черновик блога. Скопировала ссылку. Вставила в код. И далее по пунктам.
УдалитьПопробуйте на другом "тренировочном" блоге с другим шаблоном.
УдалитьМеня завут Гор яа никак не могу найти код для изменения... что мне делать
УдалитьЗдравствуйте. Это может зависеть от шаблона Вашего блога.
УдалитьЗдравствуйте Мария!
ОтветитьУдалитьПодскажите как заменить уже имеющуюся кнопку, на новую. Я так понимаю нужно просто заменить ссылку изображения кнопки на другую? Не могу найти эту ссылку, весь код перерыла, может вы подскажете?
Здравствуйте! 1) откройте свой блог в браузере Google Chrome, 2) на изображении кнопки нажмите правую кнопку мыши, 3) выберите "просмотр кода элемента", 4) ниже должна открыться доп. панель, где будет цветом выделен код всей кнопки - там должна быть ссылка.
УдалитьСпасибо!
УдалитьМария,у меня не получается. После того, как вставляем код нажимаем энтер, чтобы найти строчку, которую нужно удалить? И еще что за Всплывающий текст при наведении курсора на кнопку"/? Это нам зачем? Его обязательно вставлять?
ОтветитьУдалитьДа, нужно нажать "энтер" для поиска нужной строки. Всплывающий текст можно не добавлять, если не хотите. Для этого из кода уберите кусочек title="Всплывающий текст при наведении курсора на кнопку"
УдалитьВсе равно не удается.( Пишут: Не удалось загрузить шаблон: Ошибка при синтаксическом анализе XML (строка 1547, столбец 226)
УдалитьДевочки, у кого кнопка отображается некорректно или вместо нее появляется текст ссылки, посмотрите внимательно правильно ли вы заменили кусочки кода.
ОтветитьУдалитьУ меня сначала вместо кнопки отобразилась ссылка на нее - оказалось, что я вместе с фразой title="Всплывающий текст при наведении курсора на кнопку" удалила и знаки /> в самом конце кода. После исправления, кнопка все равно отобразилась некорректно - был просто прямоугольничек без надписи, а с ярлычком. Оказалось, что я вставила ссылку на кнопку вместе с протоколом http://, таким образом получилось повторение http://http://. Лишний удалила и все получилось.
Большое спасибо, Елена, за подсказки))) Читателям они пригодятся.
Удалитьи Вам спасибо, Маша) очень много интересной информации в блоге и все очень понятно написано...
УдалитьУ меня не получается((( Я не могу найти то, что нужно удалить. Несколько раз вбивала в поиск, а он не находит этого кода Жаль(((((
ОтветитьУдалитьСпасибо!
ОтветитьУдалитьПожалуйста! :)
УдалитьСпасибо за подробные инструкции. Подскажите, пожалуйста, как настроить гаджет Поиск по блогу и интернету. У меня ищет только по Интернету
ОтветитьУдалитьЗдравствуйте. Я добавила гаджет "Окно поиска" и в настройках гаджета поставила "галочки" в пунктах: "Этот блог" и "Страницы, связанные ссылками с этой страницей".
УдалитьМария, спасибо за такие подробные статьи и инструкции! Вставила кнопку в один из своих блогов: Made By Hands
ОтветитьУдалитьХочу такую кнопку вставить и во второй блог, но там стоит другая кнопка, которую я ставила несколько лет назад и уже не помню откуда и как. Проблема в том, что вместе с кнопкой сместился виджет LinkWithin. И окрасился он тоже вместе с кнопкой. Возможно, он как то объединился с кнопкой в шаблоне?
Второй блог: Yummy Blog
УдалитьВозможно, есть возможность исправить эту проблему? Или возможно удалить старую кнопку и вставить по Вашему примеру?
УдалитьВозможно нужно показать Вам код html из шаблона?
УдалитьЗдравствуйте. Попробуйте через страницу "Контакты" http://samasajt.blogspot.ru/p/var-servicedomainwww.html отправить часть кода HTML (в комментариях код нормально не отображается) начиная с div class="jump-link" до кода с LinkWithin
УдалитьДобрый день!
УдалитьСпасибо, что отозвались. Извините, не было времени сразу Вам написать.
Насколько я поняла, код нужно вставить в форум, который указан на странице контактов. Вот темка с моим вопросом: http://forumbloggera.rolfor.ru/viewtopic.php?id=6#p7
Спасибо Вам большое! Очень облегчили жизнь :)
ОтветитьУдалитьСпасибо ВАМ! Пока тыкаюсь,как слепой котенок))))
ОтветитьУдалитьКнопка встает, но вот текст статьи теперь не обрывается, а печатается весь, а после него красуется моя кнопка... что не так? может в 2019 году что то изменилось?
ОтветитьУдалитьВсе получилось, это оказывается предпросмотр дает такую не совсем верную картину. На самом деле все встает как нужно. Спасибо огромное!
УдалитьДоброго дня. Коли створюю кнопку, виникає помилка "Знайдено більше одного віджету з ідентифікатором: HTML4. Ідентифікатори віджетів повинні бути унікальними". Що робити?
ОтветитьУдалитьЭтот комментарий был удален автором.
ОтветитьУдалитьПочему у меня нет кода который надо удалить? Соответственно и не понятно куда вставлять код со ссылкой.
ОтветитьУдалить