Кнопка Читать далее для Blogspot
Кнопка “Далее” заменяет ссылку на полную запись блога. Это достаточно удобно для читателя, когда на главной странице блога отображены лишь начало поста, отображающие основной смысл всей статьи. Положительно к такой разбивки относятся и поисковики, так как в этом случае уменьшается процент дублированного контента. Называется это явление коротким словом – кат.
Blogger по умолчанию возможность пользоваться катом. Для того, чтобы скрыть длинную запись вам достаточно лишь нажать на значок
в простом режиме создания записи или добавить тег <!—more—> в режиме html, который разделит вводную и основную часть текста.
Напомню, что отображаемый текст ссылки вы можете заменить во вкладке “Дизайн” (если захотите, чтобы ваша ссылка Далее превратилась в “вся статья целиком”, “читать полностью”…), измените элемент страницы “Сообщение блога” и пропишите желаемый текст ссылки в графе “Текст ссылки на Страницу сообщения”:
Теперь рассмотрим, как заменить ссылку “далее” (“читать далее”, “more”, read more” и т.п.) на кнопку Далее.
1.Админка Blogger > Дизайн > Изменить HTML .
2. Теперь активируйте “Расширить шаблон виджета” .
3. Теперь найдите код ]]></b:skin> , нажав Ctrl + F.
4. Сейчас как раз перед этим кодом, вставьте следующий код.
.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 пиксель в ширину