Кнопка “Далее” заменяет ссылку на полную запись блога. Это достаточно удобно для читателя, когда на главной странице блога отображены лишь начало поста, отображающие основной смысл всей статьи. Положительно к такой разбивки относятся и поисковики, так как в этом случае уменьшается процент дублированного контента. Называется это явление коротким словом – кат.
Blogger по умолчанию возможность пользоваться катом. Для того, чтобы скрыть длинную запись вам достаточно лишь нажать на значок
в простом режиме создания записи или добавить тег <!—more—> в режиме html, который разделит вводную и основную часть текста.Как создать кнопку read more
- Напомню, что отображаемый текст ссылки вы можете заменить во вкладке “Дизайн” (если захотите, чтобы ваша ссылка Далее превратилась в “вся статья целиком”, “читать полностью”…), измените элемент страницы “Сообщение блога” и пропишите желаемый текст ссылки в графе “Текст ссылки на Страницу сообщения”:
Теперь рассмотрим, как заменить ссылку “далее” (“читать далее”, “more”, read more” и т.п.) на кнопку Далее. - Админка Blogger > Дизайн > Изменить HTML .
- Теперь активируйте “Расширить шаблон виджета” .
- Теперь найдите код ]]></b:skin> , нажав Ctrl + F
- Сейчас как раз перед этим кодом, вставьте следующий код.
.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 – отступ ссылки от левого края кнопки и другие настройки. Спрашивайте, если нужно будет подстроить кнопку под ваш дизайн.
У меня ничего не отображается... http://diva106.blogspot.com/
Ирина, так у вас записи не под катом - они целиком выведены на главной. Вначале записи нужно отредактировать, а потом уже и код шаблона редактировать. Почитайте внимательно начало статьи - там подробно описано все, если непонятно, то здесь со скриншотами http://www.mycrib.ru/2010/07/blog-post_3057.html
У меня не получается. Весь код тупо появляется в виде текста сверху блога.
Спасибо! Всё получилось!
Мне непонятен Шаг 3. Не получается, пришлось искать код прокруткой. Почему?
Зато у меня сместился другой гаджет
http://mirglazamicheloveka.blogspot.com/
Евгений, запишу видеоурок, только это уже не сегодня 😉
Скорее завтра, о нем вы узнаете из комментариев к этой статье.
Евгений, у вас может не работать поиск по странице (шаг 3) из-за браузера. В некоторых браузерах админка blogger работает некорректно. Лучше всего менять код в Google Chrome или специальных редакторах (notepad или тот же блокнот).
Видеоурок готов. Он здесь http://photoforum.do.am/forum/33-203-1
Надеюсь, что теперь все получится.
У меня на блоге установлен виджет linkwithin, при установке даной кнопочки, все работает, но виджет linkwithin улетает в сторону.
http://s020.radikal.ru/i706/1212/84/d475ed7c68e8.jpg
Подскажите как это вылечить? Я имею ввиду как поднять кнопочку немного выше?
Спасибо!
Попробуйте изменить значение margin-top, задав для него отрицательное значение. Пример: margin-top: -20px;
Значение пикселей подберите самостоятельно.
Спасибо за пост, только цифры менял полностью)
Но всё же основная информация была взята от сюда.
Очень помог ваш пост.
а чтобы выровнять кнопку по центру что указать?
по пикселям двигать не хотелось бы, ибо у всех разные мониторы и на другом это может выглядеть иначе, есть что-то универсальное?
заранее благодарю)
Помогите! Не могу найти кнопку " РАСШИРИТЬ ШАБЛОН ВИДЖЕТА" ! Что делать?
Теперь не нужно искать "расширить шаблон виджета", в блоггере этот пункт с некоторых времен отсутствует. Редактируйте без этого.
А как можно добавить надпись, а не кнопку далее в шаблон блога, если в этом шаблоне ее изначально не было? Я ставлю при создании сообщения "разрыв", но на главной странице это никак не отображается, не видно слова "далее" в конце текста сообщения.
Сергунькина, посмотрите первый и второй скриншот этого сообщения и попробуйте добавить текст "читать дальше" через адсинку, как покаано у меня.
Т.е. во вкладке "Дизайн" нажмите на ссылку "Изменить" сообщения блога и в нужном пункте пропишите текст.
Если это не поможет, то откликнитесь в комментарии к этой статье, будем работать с кодами.
Спасибо, я уже это все пробовала, но не помогает. Думаю, что надо в коде прописывать, но те коды, что я вставляла, не работают у меня почему-то.
Света, в редакторе 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 + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Точно получится!
Если не удасться сделать самостоятельно вышлите мне копию шаблона через обратную связь, внесу сама необходимые изменения.
Наташа, спасибо большое! Вы - просто фея! У меня все получилось. я так рада)) Спасибо!
Рада была вам помочь. Спасибо за отзыв 😉
а вмене сомусь взагалі не находить кода... ]]> чому так...і -сторінки ідуть так 1425 -1620 -1621 -1622 -1820
Адам, если я вас правильно поняла - вы не можете найти код ]]></b:skin>.
Этот код есть абсолютно во всех блогах на площадке blogspot. Если вы не можете его найти, то воспользуйтесь notepad+ (бесплатная программа для редактирования кода).
А КАК СДЕЛАТЬ КНОПКУ СРАЗУ ПОД ТЕКСТОМ?
Роман, измените значение 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; }
width:100px не так нужно width:121px, я скачал изображение оно 121 пиксель в ширину
Привет. Я немного изменил твой код. Подскажи пожалусто что мне сделать чтобы картинка фона не была обрезана немного с боку, пробывал не получилось. С кодом я на интуитивном уровне общаюсь )))
Вот скреншот 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; }
Наталья спасибо!
Все отлично! Кнопка встала как литая, но есть небольшой косяк
После нажатия кнопки слишком сильно прыгает вниз сайта, как это исправить?
Сайт блог: https://zara-bot-ok-info.blogspot.com
В коде ничего не менял
Заранее спасибо!!!