Как кастомизировать виджет "Популярные сообщения" в Blogger

Автор:
виджет Популярные сообщения

Недавно я искал в интернете способы сделать оформление виджета «Популярные сообщения» более современным и красивым. Нашёл несколько готовых решений со стилями и кодом, но оказалось, что большинство из них рассчитаны на старые темы Blogger и не работают в новых шаблонах (например, Contempo или Soho). Из-за этого код или ломал верстку, или вообще не отображал виджет. Поэтому я решил собрать рабочий вариант оформления, который подходит именно для новых тем.

Если вы ведёте блог на Blogger, то наверняка знаете, как важно, чтобы дизайн вашего сайта был не только функциональным, но и привлекательным. Один из популярных виджетов - "Популярные сообщения" (Popular Posts) - по умолчанию выглядит довольно просто и скучно. Но его можно легко преобразить с помощью редактирования HTML и добавления CSS. В этой статье я подробно расскажу, как это сделать. Мы превратим стандартный список в стильную сетку карточек с изображениями, анимациями и responsive-дизайном. Это не только улучшит внешний вид, но и повысит вовлечённость читателей.

Содержание статьи

Почему стоит кастомизировать этот виджет?

  • Он помогает удерживать посетителей на сайте, показывая топ-контент.
  • Стандартный дизайн часто не вписывается в современные темы (например, с минимализмом или карточками).
  • С кастомизацией вы получите: сетку из карточек, hover-эффекты, анимации появления и адаптивность под мобильные устройства.

Давайте разберёмся по шагам. Для этого вам нужен доступ к панели Blogger. Убедитесь, что у вас есть виджет "Популярные сообщения" (добавьте его через "Дизайн" > "Добавить гаджет", если нет).

Заходим в редактор темы

  1. Войдите в панель управления Blogger.
  2. Перейдите в раздел Тема (Theme).
  3. Нажмите кнопку Изменить HTML (Edit HTML). Это откроет редактор кода вашей темы.

Перед изменениями сделайте резервную копию темы. Если что-то пойдёт не так, вы сможете восстановить.

Находим виджет Popular Posts

В редакторе HTML используйте поиск (Ctrl+F или Cmd+F):

  • Введите PopularPost1 (это ID вашего виджета; если у вас несколько, может быть PopularPost2 и т.д.).
  • В правом верхнем углу редактора есть выпадающий список - выберите там PopularPost1, чтобы быстро перейти к блоку.
выпадающий список

Теперь найдите строку:

<b:includable id='main' var='this'>

Это начало основного блока виджета.

Сворачиваем и заменяем блок

  • Слева от строки есть треугольник (стрелка) - кликните на него, чтобы свернуть весь блок (это удобно, чтобы не запутаться в коде).
    • Сворачиваем и заменяем бло
  • Выделите весь свёрнутый блок .
  • Удалите его и вставьте вместо этого новый код:
<b:includable id='main' var='this'>
  <b:if cond='data:view.isSingleItem'>
    <!-- Заголовок -->
    <h3 class='popular-posts-title'>Популярные сообщения из этого блога</h3>
    <div class='popular-posts-grid'>
      <b:loop values='data:posts' var='post'>
        <a class='popular-post-card' expr:href='data:post.url'>
          <div class='popular-post-image' expr:style='"background-image: url(" + (data:post.featuredImage != "" ? data:post.featuredImage : "https://via.placeholder.com/600x400?text=No+Image") + ");"'/>
          <div class='popular-post-overlay'>
            <h3 class='popular-post-title'>
              <data:post.title/>
            </h3>
          </div>
        </a>
      </b:loop>
    </div>
  </b:if>
</b:includable>

Что делает этот код?

  • <b:if cond='data:view.isSingleItem'>: Показывает виджет только на страницах отдельных постов (чтобы не загромождать главную). Если хотите везде - удалите этот if.
  • Заголовок <h3>: "Популярные сообщения из этого блога" (можно изменить текст).
  • Сетка <div class='popular-posts-grid'>: Цикл по постам, каждая карточка - ссылка с фоновым изображением (берёт featuredImage или плейсхолдер).
  • Оверлей с заголовком поста.

После вставки нажмите Сохранить тему (Save theme). Проверьте блог - виджет должен обновиться, но пока без стилей (он будет выглядеть базово).

Добавляем CSS для стилизации

Теперь финальный штрих: добавьте CSS-код в тему. Вернитесь в Тема > Изменить HTML и вставьте этот код перед ]]></b:skin>

/* Popular-posts */
.popular-posts-title {
  font-weight: 700;
  margin: 0 0 30px;
  text-align: left;
  color: #333;
}
.popular-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 20px auto;
  max-width: 1200px;
}

.popular-post-card {
  position: relative;
  display: block;
  height: 220px;
  border-radius: 12px;
  border: 1px #aaa solid;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.popular-post-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.popular-post-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s ease;
}

.popular-post-card:hover .popular-post-image {
  transform: scale(1.08);
}

.popular-post-date {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(164, 164, 164, 0.21);
  backdrop-filter: blur(8px);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* transition: all 0.3s ease; убрано */
}


.popular-post-card:hover .popular-post-date {
  background: rgba(164, 164, 164, 0.21);
  transform: none;
}

.popular-post-overlay {
  background: #ffffffad;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  z-index: 2;
}

.popular-post-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px 0;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.popular-post-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 15px;
  color: white;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.popular-post-link:hover {
  background: rgba(255, 255, 255, 0.35);
}


.popular-post-card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

.popular-post-card:nth-child(1) { animation-delay: 0.1s; }
.popular-post-card:nth-child(2) { animation-delay: 0.2s; }
.popular-post-card:nth-child(3) { animation-delay: 0.3s; }
.popular-post-card:nth-child(4) { animation-delay: 0.4s; }
.popular-post-card:nth-child(5) { animation-delay: 0.5s; }
.popular-post-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .popular-posts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .popular-post-card {
    height: 180px;
  }
}

@media (max-width: 600px) {
  .popular-posts-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .popular-post-card {
    height: 160px;
  }
  
  .popular-post-overlay {
    padding: 12px;
  }
  
  .popular-post-title {
    font-size: 13px;
    margin-bottom: 6px;
  }
  
  .popular-post-date {
    top: 8px;
    right: 8px;
    padding: 3px 6px;
    font-size: 9px;
  }
  
  .popular-post-link {
    padding: 5px 10px;
    font-size: 11px;
  }
}

Сохраняем. Проверяем

Вот такое оформление должно оплучиться

финальный штрих

Теперь вы знаете, как шаг за шагом превратить стандартный и скучный виджет Blogger «Популярные сообщения» в стильный элемент блога.

А самое главное - вы сохранили простоту и удобство работы с Blogger, добавив при этом индивидуальность.

Комментарии

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