Настройка шаблона WindSpot для Blogger

WindSpot — один из самых популярных новостных шаблонов от Piki Templates, и при первом запуске он может показаться сложным: десяток виджетов, шорткоды, мега-меню, контентные блоки. Эта инструкция проведёт тебя за руку от установки XML-файла до тонкой настройки каждого элемента.

Я перевёл официальную документацию Piki Templates на русский, проверил каждый шаг и добавил решения проблем, с которыми реально сталкиваются пользователи (например, почему мега-меню выдаёт ошибку 404). Скриншоты — оригинальные, от автора шаблона. Работай с инструкцией параллельно с открытой админкой Blogger в соседней вкладке — так быстрее всего.

Ещё не установил шаблон? Сначала посмотри обзор WindSpot — там разбор всех возможностей, сравнение с другими шаблонами и кому он подходит.

📋 Навигация по инструкции

1. Установка шаблона
2. Логотип шапки
3. Меню шапки
4. Мега-меню
5. Топ-трендовые посты
6. Избранные посты
7. Категории на главной
8. Контентные блоки
9. Лента недавних постов
10. Система комментариев
11. Настройка меток постов
12. Автор и дата поста
13. Похожие посты
14. Реклама в постах
15. Карточки в постах
16. Разбивка длинных постов
17. Социальные иконки автора
18. Виджет Facebook
19. Соцсети в сайдбаре
20. Подписка по Email
21. Посты и комментарии в сайдбаре
22. Подвал сайта
23. Согласие на cookies
24. Варианты вёрстки
25. Настройка фида
26. Цвета и шрифты

1. Установка шаблона

Перед тем как настраивать виджеты, нужно установить сам шаблон в Blogger. Процесс простой и занимает 2-3 минуты:

1. Скачай XML-файл шаблона из библиотеки Gumroad (если ты купил премиум) или из обзора шаблона (если используешь бесплатную версию).
2. Открой свой блог в Blogger и перейди в раздел Тема.
3. Нажми на стрелочку вниз рядом с кнопкой Настроить.
4. Выбери Восстановить.
5. Загрузи скачанный XML-файл.
6. Шаблон применится автоматически.

⚠️ Обязательно сделай бэкап
Перед установкой нового шаблона сохрани текущий: Тема → стрелочка вниз → Резервное копирование. Если что-то пойдёт не так, всегда сможешь вернуться к старой версии.

После установки шаблон готов к настройке. Все элементы (виджеты) редактируются через раздел Дизайн в админке Blogger. Каждый виджет настраивается отдельно — об этом дальше.

Особенность WindSpot: После установки сразу зайди в Настройки → Site Feed и установи режим Short. Это активирует Native Feed System шаблона и ускорит загрузку сайта (см. раздел 25 этой инструкции).

↑ Наверх

2. Логотип шапки

Открой Дизайн → нажми на иконку редактирования в виджете Header Logo.

Виджет Header Logo в разделе Дизайн

Тёмная версия логотипа

Шаблон поддерживает отдельный логотип для тёмного режима. Чтобы загрузить тёмную версию:

1. Сначала загрузи тёмное изображение в любой пост (можно черновик).
2. Скопируй ссылку на изображение (правый клик → копировать URL картинки).
3. Вставь эту ссылку в поле Link в настройках виджета (как показано на скриншоте выше).

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

↑ Наверх

3. Меню шапки

Открой Дизайн → нажми на иконку редактирования в виджете Header Menu.

Основное и вложенное меню

Структура ссылок задаётся через специальный синтаксис:

Основной пункт меню: Features — обычный пункт меню.

Подменю 1 уровня: _Sub Menu 1 — один подчёркивание перед названием.

Подменю 2 уровня: __Sub Menu 2 — два подчёркивания перед названием.

Пример настройки меню с подменю

Важно: Подменю 1 уровня должно идти выше подменю 2 уровня в списке.

Иконки для пунктов меню

WindSpot использует библиотеку Google Material Icons — это важное отличие от шаблонов Wire Templates (Star Mag, SEO Next), которые работают на Bootstrap Icons. У Material Icons свой синтаксис.

Формат кода иконки: <span class="material-symbols-rounded">toggle_on</span>

Как получить HTML-код иконки:

1. Перейди в галерею Google Material Icons.
2. Найди нужную иконку через поиск и кликни на неё, чтобы открыть страницу с информацией.
3. Скопируй Icon Font Code из правой панели (название иконки, например toggle_on, home, search).

Копирование Icon Font Code из галереи Google Material Icons

4. Вставь код иконки в текст пункта меню в формате <span class="material-symbols-rounded">название</span>

Пункт меню с добавленной иконкой Material Icons

↑ Наверх

4. Мега-меню

Мега-меню — это развёрнутое меню с превью постов при наведении. Создаётся через шорткоды:

Недавние посты: megamenu/recent

Случайные посты: megamenu/random

По конкретной метке: megamenu/Your Label

Название метки должно точно совпадать с написанием в постах (важен регистр букв).

Метки (Labels) в редакторе поста Blogger

Как выглядит настройка мега-меню

Ограничение: Мега-меню нельзя использовать внутри подменю — только в основных пунктах.

Частая проблема: Если Мега-меню показывает ошибку 404 или выводит мало постов — проверь, что под указанным ярлыком есть минимум 6 опубликованных постов, и что название ярлыка точно совпадает (с учётом регистра). Это самая частая жалоба пользователей по документации.

↑ Наверх

5. Топ-трендовые посты

Блок трендовых постов в верхней части главной страницы. Открой Дизайн → нажми на иконку редактирования в виджете Top Trending Posts. Внутри можно добавить виджет HTML/JavaScript или Популярные посты.

Через HTML/JavaScript

Виджет HTML/JavaScript в Top Trending Posts

Через шорткоды можно настроить, какие посты показывать в блоке. Все шорткоды начинаются с числа — это количество показываемых постов:

Недавние посты: 6/trending/recent

Случайные посты: 6/trending/random

По метке: 6/trending/Your Label

Регистр меток: Названия меток в шорткоде должны точно совпадать с написанием в постах — в нижнем или верхнем регистре.

Через виджет Популярные посты

Виджет Популярные посты как альтернатива HTML/JS

Вместо HTML-виджета можно использовать стандартный Популярные посты от Blogger — он выведет самые читаемые материалы по статистике блога.

↑ Наверх

6. Избранные посты

Открой Дизайн → нажми на иконку редактирования в виджете Featured Posts Section. Внутри можно добавить виджет HTML/JavaScript или Популярные посты.

Через HTML/JavaScript

Виджет HTML/JavaScript в Featured Posts Section

Через шорткоды можно настроить, какие посты показывать в блоке избранных:

Недавние посты: 6/featured/recent

Случайные посты: 6/featured/random

По метке: 6/featured/Your Label

Также можно настроить заголовок блока и количество показываемых постов.

Регистр меток: Названия меток в шорткоде должны точно совпадать с написанием в постах — в нижнем или верхнем регистре.

Через виджет Популярные посты

Альтернативный вариант через виджет Популярные посты

Аналогично топ-трендовым постам, можно использовать стандартный виджет Популярные посты от Blogger вместо HTML/JavaScript.

↑ Наверх

7. Категории на главной

Открой Дизайн → нажми на иконку редактирования в виджете Custom Categories Section.

Custom Categories Section — карточки категорий на главной

В этом блоке можно настроить:

• Title — название категории.
• Caption — короткое описание под названием.
• Custom Link — ссылка, на которую ведёт карточка категории.

Карточки категорий показываются на главной странице в виде красивых блоков, ведущих на разделы блога. Для новостного сайта это must-have: «Город», «Спорт», «Культура», «Бизнес» — каждая рубрика своей карточкой.

В бесплатной версии Custom Categories Section работает, но с ограничениями по количеству карточек. Полный набор доступен в премиум-версии.

↑ Наверх

8. Контентные блоки

Открой Дизайн → нажми на иконку редактирования в виджете Content Blocks Section. Внутри добавь виджет HTML/JavaScript.

Настройка Content Blocks через HTML/JavaScript

Через контентные блоки можно создавать тематические подборки постов на главной. Структура шорткода:

Количество результатов / Тип блока / Метка

Параметр «Количество результатов» используется только в типах блоков, которые его поддерживают.

Типы блоков

WindSpot поддерживает 4 типа вёрстки контентных блоков:

Block-1: block1/recent — одноколоночный список.

Block-2: block2/recent — двухколоночный список.

Grid-1: grid1/recent — сеточная вёрстка.

Video: video/recent — видео-блок.

В каждом шорткоде можно менять тип постов:

• recent — недавние посты
• random — случайные посты
• Your Label — посты с конкретной меткой

Регистр меток: Названия меток в шорткоде должны точно совпадать с написанием в постах.

Видео-блок для медиа: Тип video/recent особенно полезен для развлекательных и новостных порталов — он красиво выводит посты с встроенными видео прямо на главной.

↑ Наверх

9. Лента недавних постов

Открой Дизайн → нажми на иконку редактирования в виджете Main Recent Posts.

Виджет Main Recent Posts в разделе Дизайн

Это основная лента публикаций на главной странице. Здесь показываются последние посты блога.

Скрытие заголовка ленты

Если нужно убрать главный заголовок над лентой постов, используй шорткод:

(hide)

Шорткод вставляется в поле Read More виджета. После сохранения главный заголовок ленты скроется.

↑ Наверх

10. Система комментариев

Новая система комментариев позволяет настроить тип комментариев через виджет Blog Posts. Перейди в Дизайн → Blog Posts → Comment Format.

Comment Format в виджете Blog Posts

Шаблон поддерживает три системы комментариев. Выбери одну через шорткод:

Стандартные комментарии Blogger: #type=(blogger)

Disqus: #type=(disqus) #shortname=(Your Shortname)

Facebook: #type=(facebook)

Facebook с выбором языка: #type=(facebook) #lang=(Your Language Code)

Языковые коды для Facebook-комментариев

Доступные коды языков: en_US, es_ES, ar_AR, id_ID, th_TH, de_DE, ga_GA, it_IT, ne_NE, ja_JA, vi_VN, pt_BR, fr_FR, ru_RU.

Для русского языка используй код ru_RU. Полный список языков Facebook доступен в официальной документации Facebook.

Вставка медиа в комментарии Blogger

В стандартных комментариях Blogger можно публиковать изображения и видео без шорткодов — просто скопируй ссылку на медиа и вставь её в поле комментария.

Изображения и видео отображаются прямо в комментариях

↑ Наверх

11. Настройка меток постов

Метки (Labels) можно показывать или скрывать в превью постов, а также менять их подпись. Перейди в Дизайн → Blog Posts → Labels Prefix.

Настройка отображения меток через Labels Prefix

Возможные действия:

• Изменить подпись перед метками (по умолчанию — «Labels»).
• Полностью скрыть метки в превью постов, отключив переключатель.
• Оставить метки видимыми, но без префикса.

Метки помогают читателям ориентироваться в темах блога. Для новостного сайта они особенно полезны — позволяют переходить между рубриками.

Особенность WindSpot V.1.7.0: В новой версии к ссылкам меток /search автоматически добавлен тег nofollow. Это предотвращает утечку SEO-веса на технические страницы поиска и улучшает индексацию основных страниц с контентом.

↑ Наверх

12. Автор и дата поста

В этом разделе настраиваются два связанных элемента: имя автора и дата публикации.

Настройка автора

Перейди в Дизайн → Blog Posts → Author Format.

Author Format — настройка префикса перед именем автора

Здесь можно:

• Изменить префикс перед именем автора (по умолчанию — «Posted By»).
• Перевести префикс на русский, например, «Автор:».
• Полностью скрыть имя автора, отключив переключатель.

Настройка даты

Перейди в Дизайн → Blog Posts → Date Format.

Date Format — настройка формата даты

Здесь можно:

• Изменить формат даты публикации.
• Полностью скрыть дату, если контент должен выглядеть «вечнозелёным».

Совет для новостного сайта: На новостном портале дату лучше показывать — читатели хотят знать, насколько свежая информация. А вот для аналитических статей и обзоров, которые остаются актуальными годами, дату можно скрыть.

↑ Наверх

Открой Дизайн → нажми на иконку редактирования в виджете Related Posts.

Виджет Related Posts в разделе Дизайн

В этом виджете можно настроить заголовок блока и количество показываемых постов. Также поддерживается фильтрация по конкретной метке.

Шорткоды для похожих постов

Все шорткоды начинаются с числа — это количество постов, которые будут показаны:

По теме поста (автоматически): 3/related/default

Недавние посты: 3/related/recent

Случайные посты: 3/related/random

По конкретной метке: 3/related/Your Label

Параметр default автоматически показывает посты, которые тематически связаны с текущей статьёй. Это самый умный вариант — шаблон сам подбирает связанные публикации по меткам.

Похожие посты показываются в конце каждой статьи. Это важный элемент для удержания читателя — особенно на новостном сайте, где читатель, дочитавший новость, с большой вероятностью кликнет на близкую по теме.

Обновление V.1.5.0: С этой версии Related Posts можно настраивать прямо из Layout без правки HTML — стало проще и удобнее.

↑ Наверх

14. Реклама в постах

Открой Дизайн → нажми на иконку редактирования в виджете Ad Code for Posts/Pages.

Виджет Ad Code for Posts/Pages

Вставь свой рекламный код (например, AdSense) в этот виджет. Реклама автоматически появится в начале и конце каждой статьи.

Особенность WindSpot V.1.5.0: Можно включить автоматическую рекламу сверху и снизу страниц прямо через Layout, без правки HTML. Также шорткод вставки рекламы стал гибче и проще в настройке.

Реклама в середине поста

Для размещения рекламного блока в любом месте внутри поста используется шорткод:

(ads)

Шорткод (ads) в редакторе поста

Шорткод (ads) вставляется в редакторе поста между параграфами в нужном месте. После публикации в этом месте появится рекламный блок.

Важно: Шорткод (ads) работает только при условии, что рекламный код заполнен в виджете Ad Code for Posts/Pages. Без этого шорткод останется пустым.

Скрытие рекламы в конкретных постах

Если в каком-то посте реклама не нужна, используй шорткод:

(hideAds)

Вставь его в любое место поста. После публикации в этом посте автоматическая реклама не будет показываться.

Когда полезно скрывать рекламу: на страницах «О нас», «Контакты», «Политика конфиденциальности» — там реклама неуместна. Также при размещении гостевых статей или при обзорах своих продуктов, где чужая реклама отвлекает от покупки. Шорткод (hideAds) также пригодится, если ты заметил подозрительную активность по кликам и хочешь временно отключить рекламу.

↑ Наверх

15. Карточки в постах

Post Cards — это специальные карточки, которые можно вставлять в посты или на страницы. Они помогают выделить важную информацию: ссылку на другой пост, загрузку файла, рекламу продукта или произвольную карточку.

Базовый синтаксис

(getCard) #type=(Card Type) #title=(Card Title) #info=(Card Info) #button=(Card Text) #icon=(Icon Code)

Поддерживается 4 типа карточек: post, download, product, custom.

Четыре типа карточек: Post, Download, Product, Custom

Карточка типа Post (ссылка на другой пост)

Используется когда нужно красиво порекомендовать другую статью в блоге.

(getCard) #type=(post) #title=(You might Like)

Ссылка карточки: поле ссылки можно оставить пустым или поставить любой символ (например, # или /). Шаблон сам подберёт связанный пост.

Карточка Post — рекомендация связанной статьи

Карточка типа Download (загрузка файла)

Используется для предложения файла на скачивание: PDF, шаблон, чек-лист, программа.

(getCard) #type=(download) #title=(GridMag_Blogger_template.zip) #info=(74.02kb) #button=(Download)

Ссылка карточки: вставь прямую ссылку на файл. Можно включить опцию открытия в новом окне.

Карточка Download — кнопка загрузки файла

Карточка типа Product (продукт на покупку)

Используется для рекомендации товара или платного продукта.

(getCard) #type=(product) #title=(GridMag Premium Template) #info=(09.95$) #button=(Buy)

Ссылка карточки: вставь ссылку на страницу покупки. Можно включить открытие в новом окне.

Карточка Product — продвижение товара или продукта

Карточка типа Custom (произвольная)

Универсальная карточка, которую можно настроить под любую задачу.

(getCard) #type=(custom) #title=(Custom Post Card) #info=(Info) #button=(Button) #icon=(download)

Параметр #icon — здесь указывается код иконки. Можно ставить любую иконку, подходящую под смысл карточки.

Карточка Custom — гибкая универсальная карточка

Как получить код иконки

WindSpot использует Google Material Icons. Пошагово:

1. Перейди в галерею Google Material Icons.
2. В поиске сверху найди нужную иконку.
3. Кликни на иконку, чтобы открыть её страницу.
4. В правой панели скопируй название иконки (Icon Font Code).

Копирование кода иконки из галереи Google Material Icons

Дополнительные шорткоды: Полный список кнопок и шорткодов для постов доступен в расширенной документации Piki Templates.

Внимание: Будь аккуратен при копировании кода иконки — лишний символ или пробел сломает отображение карточки.

↑ Наверх

16. Разбивка длинных постов

Длинные статьи (3000+ слов) можно разбить на несколько страниц с пагинацией. Эта функция (Post Split) улучшает поведенческие факторы, удерживает читателя и увеличивает доход от рекламы.

Шорткод разбивки

Вставь шорткод между параграфами в редакторе поста, чтобы создать переход на следующую страницу:

(nextPage)

Шорткод можно использовать несколько раз в одном посте — каждое появление создаёт новую страницу. Внизу поста появятся кнопки навигации между страницами.

Пример разбивки длинного поста на страницы

Совет: Разбивай пост по смыслу, а не механически. Каждая страница должна быть логически завершённой — раздел, тема, глава. Не разрывай посередине абзаца или мысли.

Карточки внутри страниц: Внутри каждой страницы поста (созданной через (nextPage)) можно использовать карточки (getCard) из предыдущего раздела. Они работают одинаково на всех страницах.

Почему это важно для AdSense: Когда читатель переходит на следующую страницу — это новый показ страницы и новые показы рекламных блоков. Длинная статья, разбитая на 4 страницы, даёт до 4 показов вместо одного. На новостном сайте с лонгридами это заметно увеличивает доход.

↑ Наверх

17. Социальные иконки автора

Под каждым постом отображается блок с информацией об авторе. В нём можно добавить иконки социальных сетей. Эти иконки берутся из профиля Blogger.

Настройка профиля Blogger

Открой Настройки Blogger → выбери Редактировать профиль Blogger.

Где найти редактирование профиля Blogger

Как добавить иконки соцсетей

В поле «О себе» нужно вставить специальный код. Шаги:

1. Зайди в Blogger → Настройки → Профиль пользователя.
2. В поле описания вставь код со ссылками на свои соцсети.
3. Сохрани изменения.

Поле «О себе» в профиле Blogger

Формат кода для иконок

Каждая иконка социальной сети — это обычная HTML-ссылка с названием соцсети внутри тега. Шаблон WindSpot автоматически распознаёт название и подставляет нужную иконку.

Пример одной ссылки на Instagram:

<a href="https://instagram.com/pikitemplates">instagram</a>

Полный пример профиля с описанием и пятью ссылками:

Hello this is Jane Doe, I am Web Designer and Expert at Piki Templates
<a href="https://facebook.com/pikitemplates">facebook</a>
<a href="https://twitter.com/pikitemplates">twitter</a>
<a href="https://youtube.com/pikitemplates">youtube</a>
<a href="https://instagram.com/pikitemplates">instagram</a>
<a href="https://www.pikitemplates.com/">external-link</a>

Результат после вставки кода в профиль

Поддерживаемые социальные сети

В блоке автора поддерживаются следующие иконки (название внутри тега должно быть точно такое):

facebook, whatsapp, instagram, pinterest, blogger, reddit, youtube, twitter, linkedin, google, apple, microsoft, facebook-f, rss, behance, stack-overflow, telegram, tumblr, dribbble, codepen, snapchat, email, github, stumbleupon, vk

Для русскоязычных авторов: Хорошо работают иконки vk (ВКонтакте), telegram, whatsapp. Их название в теге должно быть в нижнем регистре.

Скрытие блока автора

Если ты не хочешь показывать блок автора под постами, его можно отключить. Перейди в Дизайн → Blog Posts → Show Author Profile и сними галочку.

Опция Show Author Profile в настройках Blog Posts

↑ Наверх

18. Виджет Facebook

В сайдбар можно добавить виджет лайка страницы Facebook — это типичный социальный элемент, который показывает количество подписчиков страницы.

Расположение виджета Facebook Like в сайдбаре

Как добавить виджет

Для работы виджета Facebook нужно выполнить два условия:

1. Сначала установить систему комментариев как Facebook (см. раздел 10 этой инструкции).
2. Затем зайти на сайт Facebook Like Button и сгенерировать код виджета.
3. Скопировать сгенерированный HTML-код.
4. В Blogger перейти в Дизайн, добавить в сайдбар новый виджет HTML/JavaScript.
5. Вставить туда скопированный код Facebook.

Опциональный виджет: Виджет Facebook не обязателен. Многие авторы предпочитают его не использовать, так как он замедляет загрузку страницы и не всегда нужен русскоязычной аудитории.

↑ Наверх

19. Соцсети в сайдбаре

Открой Дизайн → нажми на иконку редактирования в виджете Social Widget (Section).

Виджет Social Widget Section в сайдбаре

Здесь добавляются ссылки на социальные сети, которые будут показаны в сайдбаре. Виджет работает на основе LinkList Gadget от Blogger — стандартного виджета списка ссылок.

Поддерживаемые иконки

В сайдбаре поддерживается более широкий список соцсетей, чем в блоке автора:

blogger, facebook, twitter-x, youtube, messenger, snapchat, telegram, instagram, pinterest, google, apple, microsoft, dribbble, linkedin, tiktok, stumbleupon, vk, stack-overflow, github, soundcloud, behance, digg, delicious, codepen, flipboard, reddit, tumblr, twitch, rss, skype, whatsapp, discord

Важно: Все названия иконок пишутся в нижнем регистре. Заглавные буквы или опечатки приведут к тому, что иконка не отобразится.

Чтобы добавить иконку, в виджете LinkList создай новый пункт:

• Site Name — название иконки (например, telegram).
• Site URL — твоя ссылка на эту соцсеть.

↑ Наверх

20. Подписка по Email

Открой Дизайн → нажми на иконку редактирования в виджете Follow by Email.

Виджет Follow by Email для подписки на блог

Виджет работает со сторонними сервисами email-рассылок (Brevo, Mailchimp и другими). Просто вставь ссылку на свою форму подписки.

Шорткоды настройки

Базовый шорткод формы: (sibForm)

Заголовок формы: #title=(Follow by Email)

Подзаголовок: #caption=(Get Notified About Next Update Direct to Your inbox)

Заголовок и подзаголовок — опциональные параметры. Можно использовать только базовый шорткод (sibForm) без них.

Создание ссылки на форму подписки

Если у тебя ещё нет формы подписки, её нужно создать в сервисе рассылок. Подробная инструкция от автора шаблона: Как создать ссылку на форму подписки.

Важно: После настройки замени демо-ссылку (которая стоит в шаблоне по умолчанию) на свою собственную. Иначе подписчики будут попадать в чужую базу.

Совет по сервисам: Для небольших блогов подойдёт бесплатный план Brevo (бывший Sendinblue) — до 300 писем в день бесплатно. Для русскоязычной аудитории также можно рассмотреть Unisender или Mailerlite.

↑ Наверх

21. Посты и комментарии в сайдбаре

В сайдбар можно добавить два дополнительных виджета: блок постов и блок последних комментариев.

Блок постов в сайдбаре

Открой Дизайн → нажми на иконку редактирования в виджете Sidebar Posts Section.

Sidebar Posts Section — блок постов в боковой колонке

В виджете можно настроить заголовок блока, количество постов и фильтрацию по метке.

Шорткоды для блока постов

Все шорткоды начинаются с числа — это количество показываемых постов:

Недавние посты: 3/sidebar/recent

Случайные посты: 3/sidebar/random

По конкретной метке: 3/sidebar/Your Label

Регистр меток: Названия меток в шорткоде должны точно совпадать с написанием в постах.

Блок комментариев в сайдбаре

Открой Дизайн → нажми на иконку редактирования в виджете Comments Section.

Виджет Comments Section для показа последних комментариев

В виджете можно настроить количество отображаемых комментариев. Блок показывает последние комментарии с разных постов блога с превью текста и ссылкой на пост.

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

↑ Наверх

22. Подвал сайта

Подвал в WindSpot состоит из трёх независимых блоков, которые настраиваются отдельно: социальные иконки, меню и копирайт.

Соцсети в подвале

Открой Дизайн → нажми на иконку редактирования в виджете Footer Section.

Виджет Footer Section для социальных иконок

Соцсети в подвале настраиваются так же, как в сайдбаре — через LinkList Gadget. Поддерживается тот же список иконок:

blogger, facebook, twitter-x, youtube, telegram, instagram, pinterest, linkedin, tiktok, vk, whatsapp, discord, github, rss и другие — всего 32 иконки.

Регистр: Все названия иконок пишутся в нижнем регистре.

Меню в подвале

Открой Дизайн → нажми на иконку редактирования в виджете Footer Menu.

Виджет Footer Menu — ссылки на ключевые страницы

В подвале обычно размещают ссылки на служебные страницы: «О нас», «Контакты», «Политика конфиденциальности», «Условия использования», «Карта сайта». Эти ссылки нужны для соответствия требованиям Google и AdSense.

Копирайт в подвале

Открой Дизайн → нажми на иконку редактирования в виджете Footer Copyright.

Виджет Footer Copyright для подписи в подвале

В этом виджете указывается копирайт сайта — обычно с годом и названием.

Обновление V.1.7.0: В новой версии копирайт стал гибким — теперь можно вставить длинный текст с дополнительной информацией о сайте, ссылками или юридическими формулировками без поломки вёрстки.

Важно: Изменение и удаление ссылки на Piki Templates в подвале доступно только для премиум-пользователей. В бесплатной версии ссылка автора должна оставаться.

↑ Наверх

23. Согласие на cookies

Открой Дизайн → нажми на иконку редактирования в виджете Cookies Consent.

Виджет Cookies Consent для уведомления о cookies

Виджет показывает посетителю всплывающее уведомление о cookies. Это требование GDPR и других законов о защите персональных данных. После согласия посетителя выбор сохраняется в его браузере на указанное количество дней.

Настройка через шорткоды

Текст кнопки согласия: #buttons=(Accepted !)

Срок хранения согласия в днях: #days=(20)

Шорткоды вставляются в настройки виджета. После сохранения уведомление будет показывать новый текст и запоминать выбор пользователя на указанный срок.

Рекомендуемые значения: Текст кнопки — «Принять» или «Согласен». Срок хранения — 30-90 дней. Не делай срок меньше 7 дней, иначе посетитель будет видеть уведомление почти при каждом визите.

↑ Наверх

24. Варианты вёрстки

WindSpot поддерживает несколько режимов вёрстки сайта. Открой Панель Blogger → нажми на Тема → перейди в Настроить.

Настройка режимов вёрстки в Customize

Доступные режимы

• Boxed Mode — содержимое сайта помещается в центральный блок с отступами по бокам.
• Sticky Header — шапка сайта остаётся видимой при прокрутке вниз.
• Sticky Sidebar — сайдбар остаётся видимым при прокрутке постов.
• Native Dark Mode — поддержка системного тёмного режима устройства.

Каждая опция включается значением 1 или выключается значением 0.

Рекомендуемая конфигурация для новостного сайта: Sticky Header — включить (читатель всегда видит меню рубрик). Sticky Sidebar — включить для длинных статей. Boxed Mode — обычно отключают для новостного формата. Native Dark Mode — включить (тёмная тема популярна, но доступна только в премиум).

↑ Наверх

25. Настройка фида

Открой Панель Blogger → перейди в Настройки → прокрути до Site Feed.

Настройки Site Feed в админке Blogger

WindSpot использует Native Feed System — собственный механизм подгрузки контента (появился с V.1.2.0). Чтобы он работал на полную мощность, нужно установить режим фида Short (короткий).

Преимущества короткого фида:

• Передаётся меньше данных с сервера Blogger.
• Главная и категорийные страницы грузятся быстрее.
• Защита контента от автоматического копирования через RSS.

Важно: Не отключай фид полностью (вариант None) — это сломает систему комментариев и блок избранных постов. Используй только режим «Короткий» (Short).

История развития: Native Feed System появилась в V.1.2.0 (январь 2023) и заменила стандартный Blogger Feed. В версиях V.1.3.0–V.1.6.0 механизм Lazy Load и Native Feed постоянно улучшался для большей скорости. Поэтому важно держать шаблон обновлённым до последней версии.

↑ Наверх

26. Цвета и шрифты

Открой Тема → нажми на Настроить → исследуй разделы Background, Colors и Advanced.

Раздел Customize для настройки внешнего вида

WindSpot полностью кастомизируется через стандартный Theme Designer Blogger. Доступно для изменения:

• Шрифты — стили текста, заголовков, навигации.
• Цвета меню — фон, текст, ховер-эффекты.
• Цвета виджетов — заголовки секций, фоны, разделители.
• Цвета подвала — фон, текст, иконки соцсетей.
• Цвета акцентов — кнопки, ссылки, выделения.

Совет: Сначала выбери основной цвет бренда и используй его для акцентов (кнопки, ссылки, заголовки). Остальные цвета подбирай как оттенки или нейтральные. Для новостного сайта лучше держать дизайн строгим — слишком много цветов снижает ощущение авторитетности издания.

Не все опции видны? Если в разделе Theme → Customize → Advanced отображаются не все опции — это известный момент. Обратись в поддержку Piki Templates со скриншотом, они помогут разблокировать полный набор настроек.

Видеоинструкция от автора

Piki Templates выпустил видеообзор настройки шаблона WindSpot: смотреть на YouTube. Видео на английском, но показывает все шаги визуально — можно понять без знания языка.

↑ Наверх

Часто задаваемые вопросы по настройке

В процессе настройки WindSpot у пользователей возникают одни и те же вопросы. Собрал ответы на самые частые — многие взяты из реальных обращений в поддержку Piki Templates.

Почему Мега-меню выдаёт ошибку 404 или показывает мало постов?

Это самая частая проблема. Причины две: либо под указанным ярлыком меньше 6 опубликованных постов, либо название ярлыка в шорткоде не совпадает с написанием в постах (важен регистр букв). Убедись, что постов достаточно и ярлык написан точно так же, как в постах. Также помни: Мега-меню работает только в основных пунктах меню, не в подменю.

Есть ли в WindSpot тёмный режим?

Да, но только в премиум-версии. В бесплатной версии переключатель тёмной темы недоступен — это подтверждено технической поддержкой Piki Templates. Если тёмная тема важна для твоей аудитории (например, технологический блог), нужна премиум-версия.

Какие иконки использует WindSpot?

WindSpot использует Google Material Icons — это отличается от шаблонов Wire Templates (Star Mag, SEO Next), которые работают на Bootstrap Icons. Синтаксис для меню: <span class="material-symbols-rounded">название</span>. Иконки берутся из галереи fonts.google.com/icons.

Можно ли использовать Custom Categories в бесплатной версии?

Да, но с ограничениями по количеству карточек. Полный функционал Custom Categories Section (без лимитов) доступен в премиум-версии. Это подтверждено поддержкой Piki Templates в комментариях к документации.

Как поменять цвет верхнего слайдера/блока?

Цвета настраиваются через Theme → Customize → Colors и Advanced. Если стандартный синий фон не подходит под твой бренд — найди в Advanced соответствующий параметр цвета. Пользователи успешно меняли цвета под свой бренд. Если опция не находится — напиши в поддержку Piki Templates со скриншотом.

Можно ли ставить AdSense на WindSpot?

Да, отлично подходит. Есть выделенные рекламные слоты: до и после статьи (виджет Ad Code), внутри статьи (шорткод (ads)), в сайдбаре через HTML/JavaScript. Шорткод (hideAds) отключает рекламу в конкретном посте. С V.1.5.0 добавлены неограниченные размещения рекламы. Post Split увеличивает RPM за счёт дополнительных показов.

Какая версия WindSpot сейчас актуальна?

Текущая версия — V.1.7.0 от 16 мая 2025. В ней добавлена поддержка иконок Threads, X, Mastodon, исправлены H1-теги на всех типах страниц, добавлена Schema-разметка для страниц, улучшен Theme Designer. Премиум-владельцы получают обновления бесплатно через Gumroad.

Поддерживает ли русский язык?

Да, все элементы шаблона переводятся через стандартный Blogger Layout — дата, метки, рубрики, кнопки. С V.1.7.0 улучшена автоматическая многоязычность. Полная русификация занимает 30-40 минут.

Что делать, если виджет не появляется на странице?

Проверь три вещи: 1) виджет добавлен в правильную секцию темы; 2) у виджета включён переключатель видимости; 3) шорткоды внутри виджета записаны правильно. Если всё это в порядке, очисти кэш браузера и обнови страницу.

Где задать вопрос автору шаблона?

У Piki Templates есть форма поддержки на сайте. Для русскоязычных пользователей рекомендую сначала спросить меня в Telegram — часто проблема решается быстрее, чем через английскую поддержку. Контакты есть на странице «Контакты» каталога.

Нужна помощь с настройкой?

Если что-то пошло не так после прохождения инструкции — напиши мне в Telegram. Помогу разобраться с настройкой WindSpot бесплатно для покупателей.

Написать мне →

Источник документации: инструкция переведена и адаптирована из официальной документации Piki Templates для русскоязычных пользователей шаблона. Все скриншоты принадлежат автору шаблона.