Кнопка Читать далее для Blogspot

Обновлено: 25 июня 2021Опубликовано
кнопка далее
Кнопка “Далее” заменяет ссылку на полную запись блога. Это достаточно удобно для читателя, когда на главной странице блога отображены лишь начало поста, отображающие основной смысл всей статьи. Положительно к такой разбивки относятся и поисковики, так как в этом случае уменьшается процент дублированного контента. Называется это явление коротким словом – кат.
Blogger по умолчанию возможность пользоваться катом. Для того, чтобы скрыть длинную запись вам достаточно лишь нажать на значок значок_кат в простом режиме создания записи или добавить тег <!—more—> в режиме html, который разделит вводную и основную часть текста.

Как создать кнопку read more

  1. Напомню, что отображаемый текст ссылки вы можете заменить во вкладке “Дизайн” (если захотите, чтобы ваша ссылка Далее превратилась в “вся статья целиком”, “читать полностью”…), измените элемент страницы “Сообщение блога” и пропишите желаемый текст ссылки в графе “Текст ссылки на Страницу сообщения”:
    изменить_сообщение_блога
    ссылка_далее
    Теперь рассмотрим, как заменить ссылку “далее” (“читать далее”, “more”, read more” и т.п.) на кнопку Далее.
  2. Админка  Blogger  >  Дизайн  >  Изменить HTML .
  3.  Теперь активируйте  “Расширить шаблон виджета” .
  4.  Теперь найдите   код  ]]></b:skin> , нажав Ctrl + F
  5. Сейчас как раз перед этим кодом, вставьте следующий код.
.jump-link { background:url(https://4.bp.blogspot.com/_b8IA1ajBJG8/TEEJ26RR5aI/AAAAAAAABa8/1v7GqXMF2GE/continue.png) no-repeat scroll 0 0 transparent;  height:32px;  left:1px;  margin-bottom:-11px;  margin-top:18px;  padding-top:4px;  position:relative;  width:100px;  float:right;  }  .jump-link a {  color:#FFFFFF;  font-size:11px;  margin-bottom:10px;  padding-left:18px;  text-shadow:1px 1px 0 #B56F2B;  font-weight:normal;  }  .jump-link a:hover {  text-decoration:underline;  }

Просмотрите блог после изменений, если у вас получилась кнопка Далее такого вида кнопка_далее, то все сделано правильно, и вы можете сохранять шаблон.

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

  и заменяем код, выделенный желтым. Еще одно изменение, которое вы должны будете обязательно провести, чтобы кнопка отображалась корректно – это проставить значение ширины кнопки в пикселях (выделено оранжевым). Цвет ссылки на кнопке выделен зеленым, его вы тоже можете изменить, выравнивание кнопки – float (right – справа, left – слева), font-size – размер текста ссылки, padding-left – отступ ссылки от левого края кнопки и другие настройки. Спрашивайте, если нужно будет подстроить кнопку под ваш дизайн.

 

Опубликовано Иванова Наталья

27 ответов к «Кнопка Читать далее для Blogspot»

  2. Ирина, так у вас записи не под катом - они целиком выведены на главной. Вначале записи нужно отредактировать, а потом уже и код шаблона редактировать. Почитайте внимательно начало статьи - там подробно описано все, если непонятно, то здесь со скриншотами http://www.mycrib.ru/2010/07/blog-post_3057.html

    Ответить

  4. Спасибо! Всё получилось!
    Мне непонятен Шаг 3. Не получается, пришлось искать код прокруткой. Почему?

    Ответить

  6. Евгений, запишу видеоурок, только это уже не сегодня 😉
    Скорее завтра, о нем вы узнаете из комментариев к этой статье.

    Ответить

  7. Евгений, у вас может не работать поиск по странице (шаг 3) из-за браузера. В некоторых браузерах админка blogger работает некорректно. Лучше всего менять код в Google Chrome или специальных редакторах (notepad или тот же блокнот).

    Видеоурок готов. Он здесь http://photoforum.do.am/forum/33-203-1
    Надеюсь, что теперь все получится.

    Ответить

  8. У меня на блоге установлен виджет linkwithin, при установке даной кнопочки, все работает, но виджет linkwithin улетает в сторону.

    Ответить

  9. http://s020.radikal.ru/i706/1212/84/d475ed7c68e8.jpg
    Подскажите как это вылечить? Я имею ввиду как поднять кнопочку немного выше?
    Спасибо!

    Ответить

  10. Попробуйте изменить значение margin-top, задав для него отрицательное значение. Пример: margin-top: -20px;
    Значение пикселей подберите самостоятельно.

    Ответить

  11. Спасибо за пост, только цифры менял полностью)
    Но всё же основная информация была взята от сюда.
    Очень помог ваш пост.

    Ответить

  12. а чтобы выровнять кнопку по центру что указать?
    по пикселям двигать не хотелось бы, ибо у всех разные мониторы и на другом это может выглядеть иначе, есть что-то универсальное?

    заранее благодарю)

    Ответить

  14. Теперь не нужно искать "расширить шаблон виджета", в блоггере этот пункт с некоторых времен отсутствует. Редактируйте без этого.

    Ответить

  15. А как можно добавить надпись, а не кнопку далее в шаблон блога, если в этом шаблоне ее изначально не было? Я ставлю при создании сообщения "разрыв", но на главной странице это никак не отображается, не видно слова "далее" в конце текста сообщения.

    Ответить

  16. Сергунькина, посмотрите первый и второй скриншот этого сообщения и попробуйте добавить текст "читать дальше" через адсинку, как покаано у меня.

    Т.е. во вкладке "Дизайн" нажмите на ссылку "Изменить" сообщения блога и в нужном пункте пропишите текст.

    Если это не поможет, то откликнитесь в комментарии к этой статье, будем работать с кодами.

    Ответить

  17. Спасибо, я уже это все пробовала, но не помогает. Думаю, что надо в коде прописывать, но те коды, что я вставляла, не работают у меня почему-то.

    Ответить

  18. Света, в редакторе html шаблона найдите отрезок кода:

    <div class='post-body entry-content'>

    Вы увидите код в шаблоне:

    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    Вставьте сразу после него отрезок кода:

    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
    </b:if>

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

    Ответить

  22. Адам, если я вас правильно поняла - вы не можете найти код ]]></b:skin>.
    Этот код есть абсолютно во всех блогах на площадке blogspot. Если вы не можете его найти, то воспользуйтесь notepad+ (бесплатная программа для редактирования кода).

    Ответить

  24. Роман, измените значение margin-top равное 0 в четвертом пункте.
    У вас получиться код:

    .jump-link { background:url(http://4.bp.blogspot.com/_b8IA1ajBJG8/TEEJ26RR5aI/AAAAAAAABa8/1v7GqXMF2GE/continue.png) no-repeat scroll 0 0 transparent; height:32px; left:1px; margin-bottom:-11px; margin-top:0; padding-top:4px; position:relative; width:100px; float:right; } .jump-link a { color:#FFFFFF; font-size:11px; margin-bottom:10px; padding-left:18px; text-shadow:1px 1px 0 #B56F2B; font-weight:normal; } .jump-link a:hover { text-decoration:underline; }

    Ответить

  26. Привет. Я немного изменил твой код. Подскажи пожалусто что мне сделать чтобы картинка фона не была обрезана немного с боку, пробывал не получилось. С кодом я на интуитивном уровне общаюсь )))
    Вот скреншот https://prnt.sc/uxaz27
    Сайт блог https://remont-uroki.blogspot.com/
    Код ниже.
    .jump-link { background:url(https://sun9-53.userapi.com/8aMe7t-ZOLvfRuL69wTv-wVift-unkQrgawQ_g/Nwg-stsEBQg.jpg) no-repeat scroll 0 0 transparent; height:60px; left:0px; margin-bottom:-5px; margin-top:1px; padding-top:20px; position:relative; width:150px; float:right; } .jump-link a { color:#000000; font-size:16px; margin-bottom:100px; padding-left:15px; text-shadow:1px 1px 0 #B56F2B; font-weight:normal; } .jump-link a:hover { text-decoration:underline; }

    Ответить

  27. Наталья спасибо!
    Все отлично! Кнопка встала как литая, но есть небольшой косяк
    После нажатия кнопки слишком сильно прыгает вниз сайта, как это исправить?
    Сайт блог: https://zara-bot-ok-info.blogspot.com
    В коде ничего не менял
    Заранее спасибо!!!

    Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *