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

Как стильно оформить на blogspot кнопку "Читать далее"

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

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

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

Как добавить ссылку «Дальше»  Cправка - Blogger

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

• 💡Примечания. Для настройки или изменения самого текста ссылки «Читать…» заходим во вкладку Дизайн>Гаджет Сообщения блога> Изменить и в появившемся окне вы можете менять настройки по своему усмотрению. Пункт 4 на скриншоте. Не забудьте после этого сохранить все настройки.

Как добавить CSS-стили кнопке Read More/Читать далее

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

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

  ❗ /*Скопируйте этот код и вставьте его  вместо старого*/❗ 

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Читать Дальше &#187;</a>
</span></b:if></b:if>
Теперь найдите код  ]]></b:skin>, нажав Ctrl + F
И как раз перед ним, вставьте следующий стили
.readmore{
background-color:#e9dec4;
padding: 5px 5px;
font-size: 12px;
line-height: 14px;
text-align: center;
border: none;
cursor: pointer;} 

Статья из Рубрики Настройка-blogger
Показать все сообщения из рубрики Настройка-blogger

Автор статьи: Aviator - понедельник, 2 сентября 2024 г.