Стильная кнопка Читать далее на Blogspot: Как изменить стиль Read More в Blogger

Создаем привлекательную кнопку "Читать далее" для вашего блога на Blogger

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

 

Кнопка «Reed more» (Читать далее) заменяет ссылку на полную статью. Это достаточно удобно для читателя, когда на главной странице блога отображено лишь начало поста, отображающее основной смысл всей статьи.... Anand Kumar Mar 6, 2019

Показать статью

Как изменить дизайн кнопки "Читать далее" для Blogspot

1. Перейдите в панель управления Blogger.
2. Перейдите в раздел Тема > Настроить > Редактировать HTML.
3. В редакторе HTML используйте функцию поиска (Ctrl + F) и введите jump-link для поиска старого кода:
   

   <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>

   
   
4. После нахождения старого кода <b:if cond='data:post.hasJumpLink'>... </b:if> просто удалите его из шаблона.
5. Вставьте следующий код  вместо него: 

   <b:if cond='data:blog.pageType != "static_page"'>
     <b:if cond='data:blog.pageType != "item"'>
       <a class='jump-link' expr:href='data:post.url'>Подробнее</a>
     </b:if>
   </b:if>

6. Чтобы стилизовать ссылку, добавьте следующий CSS перед закрывающим тегом ]]>

в вашем шаблоне. Найдите строку </b:skin> и вставьте CSS перед этим тегом.

Вот сам код CSS:

.jump-link {
  display: inline-block;
  background-color: #e9dec4;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: #000;
  text-transform: none;
}

.jump-link:hover {
  background-color: #d9cba7;
}

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

Как вручную вставить ссылку «Читать далее» в сообщение

• При написании сообщения в Blogger нажмите на три точки в меню в панели инструментов, чтобы вставить ссылку для перехода «Дальше», которая будет служить точкой для разрыва текста.
• В режиме редактора появится тег <!--more--> — это специальный тег Blogger, который будет разделять ваше сообщение на две части: одну для краткой версии и другую для полной, доступной после перехода по ссылке.
• После того как вы вставили этот код в HTML-редакторе, просто сохраните или опубликуйте сообщение. Ваша ссылка «Читать далее» будет активной и перенаправит пользователей на полную версию сообщения.
• Это даст вам нужный эффект разрыва текста с переходом на полную статью.