Кнопка "Читать далее" : Как изменить ссылку "Read More" в Blogger

Установка на blogspot кнопки "Читать далее"

Кнопки являются очень важным элементом дизайна сайта. В этой статье я покажу, как установить кнопку "Читать далее".   Кнопка должна привлечь внимание читателя и в то же время гармонично вписываться в общее оформление блога.



 Главная страница — важная часть каждого блога. Она должна содержать до 5-6 постов, чтобы максимально привлечь внимание читателя. Удержать читателя дольше — это то, что я называю успехом блога...❞

Кнопка «Reed more» (Читать далее) заменяет ссылку на полную статью. Это достаточно удобно для читателя, когда на главной странице блога отображено лишь начало поста, отображающее основной смысл всей статьи. Положительно к такой разбивки относятся и поисковики, так как в этом случае уменьшается процент дублированного контента. Ниже на скриншоте подробное пошаговое описание как настроить запись и убрать "лишний" с точки зрения СЕО тег "#more" из кода разделения статьи.


Как вставить ссылку «Читать дальше»

  •  В режиме верстки текстового редактора сообщения ставим курсор в том месте статьи, где хотим ее разделить. Пункты 1 и 2 на скриншоте. Сразу после этого увидите под текстом полосу — она отделает анонс от полной записи.
  • Если переключиться в HTML режим, то увидите, что в коде применился специальный тег
    <! —more—>. Пункт 3 на скриншоте.
  • Для настройки или изменения самого текста ссылки «Читать…» заходим во вкладку Дизайн>Гаджет Сообщения блога> Изменить и в появившемся окне вы можете менять настройки по своему усмотрению. Пункт 4 на скриншоте.
    💡Не забудьте после этого сохранить все настройки.

Избавляемся от тега #more&quot;

💡Способ реализуются за счет правки шаблона Blogger для темы Watermark 💡

  • Раздел Тема> Настроить> Редактировать HTML. Ставим курсор в любом месте кода шаблона: Тема> Ctrl+F. В левом верхнем углу окна редактора HTML кода появится окно с текстом «Search».
  • В этом окне надо ввести HTML код: <div class='jump-link’> для поиска и нажать клавишу «Enter»💡(При наличии такого кода в шаблоне HTML будет выполнен переход на него. Первый найденный HTML скрипт в окне редактора выделится тёмно-жёлтым цветом.)💡
  • Удаляем старый код и вставляем новый. Пункт 5 на скриншоте выше.
  • Нажимаем на значок в форме дискеты с всплывающим текстом "Сохранить".  (Этот значок предназначен для сохранения изменений, внесённых в код темы Blogger.)
/*этот код копируем и вставляем вместо старого*/

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div class='readmore'> <a expr:href='data:post.url'><data:post.jumpText/></a> </div> </b:if> </b:if>

Share:

0 Comments:

Отправить комментарий

Если понравилась статья, то оставьте, пожалуйста, комментарии!

Popular Posts

Recent Posts

3-tag:Courses-65px

Unordered List

Text Widget

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate another link velit esse cillum dolore eu fugiat nulla pariatur.

Pages

Comments

3-comments

FOLLOW ME

LATEST

3-latest-65px
Статистика
  • Сообщений
  • Комментариев
  • Просмотров
  • Нашему блогу уже: года.

Latest video-course

1-tag:Videos-800px-video

Campus

4-tag:Campus-500px-mosaic
iklan banner

About

This just a demo text widget, you can use it to create an about text, for example.

Testimonials

3-tag:Testimonials-250px-testimonial

Header Background

Header Background
Header Background Image. Ideal width 1600px with.

Logo

Logo
Logo Image. Ideal width 300px.

Section Background

Section Background
Background image. Ideal width 1600px with.

Section Background

Section Background
Background image. Ideal width 1600px with.

Ads block

Banner 728x90px

Courses

6-latest-350px-course

Section Background

Section Background

Search This Blog

Постоянные читатели

Projects

3/Health/post-list

SEARCH

Definition List

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.

Ordered List

iklan banner

Blogger Themes

Popular

Blogger Tutorials

Blogger Template

Categories

Text Widget

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Copyright © По Секрету Всему Свету | Powered by Blogger Design by PWT | Blogger Theme by NewBloggerThemes.com