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

кнопка далее
Кнопка “Далее” заменяет ссылку на полную запись блога. Это достаточно удобно для читателя, когда на главной странице блога отображены лишь начало поста, отображающие основной смысл всей статьи. Положительно к такой разбивки относятся и поисковики, так как в этом случае уменьшается процент дублированного контента. Называется это явление коротким словом – кат.
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 – отступ ссылки от левого края кнопки и другие настройки. Спрашивайте, если нужно будет подстроить кнопку под ваш дизайн.

 

Оцените статью
Добавить комментарий

  1. Ирина Кудрявцева

    У меня ничего не отображается... http://diva106.blogspot.com/

    Ответить
  2. Аноним

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

    Ответить
  3. Евгений Бикмаев

    У меня не получается. Весь код тупо появляется в виде текста сверху блога.

    Ответить
  4. Евгений Бикмаев

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

    Ответить
  5. Евгений Бикмаев

    Зато у меня сместился другой гаджет
    http://mirglazamicheloveka.blogspot.com/

    Ответить
  6. Аноним

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

    Ответить
  7. Аноним

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

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

    Ответить
  8. Romchik911

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

    Ответить
  9. Анонимный

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

    Ответить
  10. Аноним

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

    Ответить
  11. Артём

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

    Ответить
  12. Анонимный

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

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

    Ответить
  13. Анонимный

    Помогите! Не могу найти кнопку " РАСШИРИТЬ ШАБЛОН ВИДЖЕТА" ! Что делать?

    Ответить
  14. Mycrib

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

    Ответить
  15. Сергунькина

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

    Ответить
  16. Mycrib

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

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

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

    Ответить
  17. Света

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

    Ответить
  18. Mycrib

    Света, в редакторе 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>

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

    Ответить
  19. Света

    Наташа, спасибо большое! Вы - просто фея! У меня все получилось. я так рада)) Спасибо!

    Ответить
  20. Mycrib

    Рада была вам помочь. Спасибо за отзыв 😉

    Ответить
  21. Адам Толочик

    а вмене сомусь взагалі не находить кода... ]]> чому так...і -сторінки ідуть так 1425 -1620 -1621 -1622 -1820

    Ответить
  22. Mycrib

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

    Ответить
  23. роман алипов

    А КАК СДЕЛАТЬ КНОПКУ СРАЗУ ПОД ТЕКСТОМ?

    Ответить
  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; }

    Ответить
  25. роман алипов

    width:100px не так нужно width:121px, я скачал изображение оно 121 пиксель в ширину

    Ответить
  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
    В коде ничего не менял
    Заранее спасибо!!!

    Ответить