Как установить и настроить шаблон NestSpot для Blogger

NestSpot — один из самых универсальных шаблонов в каталоге Piki Templates: за $15 ты получаешь сразу три версии в одной покупке — классическую светлую, тёмную (Dark Mode) и Arabic RTL для языков с направлением текста справа налево. И это не просто переключатель в настройках, а три отдельных XML-файла, каждый со своим дизайном.

Шаблон отлажен годами — релиз был ещё в июле 2022, с тех пор прошло 7 крупных обновлений до текущей V.1.7.0 (май 2025). В этой инструкции я провожу тебя за руку от установки нужной версии до тонкой настройки каждого виджета. Особое внимание — разделу 1, там разбираю, как выбрать правильную версию из трёх XML-файлов и переключаться между ними без потери настроек.

Я перевёл официальную документацию Piki Templates на русский и проверил каждый шаг. Работай с открытой админкой Blogger в соседней вкладке. Ещё не установил шаблон? Сначала глянь обзор NestSpot — там разбор всех возможностей и сравнение с другими шаблонами Piki.

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

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

1. Установка шаблона: 3 версии в коробке

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

Какие версии в коробке

🌞 Default (светлая) — классический дизайн на белом фоне. Универсальный вариант для большинства проектов: новости, журналы, тематические блоги.

🌙 Dark Mode (тёмная) — полностью тёмный дизайн с проработанной палитрой. Идеально для технологических, гейминг- и киноблогов, где аудитория предпочитает тёмные интерфейсы.

🌍 Arabic RTL — версия с направлением текста справа налево. Для сайтов на арабском, иврите, фарси и других RTL-языках. Это редкая фишка для Blogger.

Базовая установка

Процесс одинаков для любой из трёх версий:

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

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

Как переключаться между версиями

Допустим, ты поставил Default и хочешь попробовать Dark Mode. Процесс простой:

1. Сделай бэкап текущей темы (на всякий случай).
2. Открой Тема → стрелочка вниз → Восстановить.
3. Загрузи XML-файл другой версии (Dark Mode или Arabic).
4. Готово — новый дизайн применился.

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

Какая версия для какой ниши: Default подходит для большинства сайтов. Dark Mode — для технологий, гейминга, киноблогов. Arabic RTL — обязательна, если делаешь сайт на арабском или иврите.

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

Сразу после установки: зайди в Настройки → Site Feed и установи режим Short. Это активирует Native Feed System шаблона и ускорит загрузку сайта (см. раздел 24).

↑ Наверх

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

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

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

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

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

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

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

↑ Наверх

3. Меню шапки

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

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

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

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

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

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

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

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

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

NestSpot использует библиотеку Google Material Icons — более 2000 иконок. Синтаксис отличается от Bootstrap Icons.

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

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

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

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

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

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

↑ Наверх

4. Мега-меню

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

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

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

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

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

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

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

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

Совет: Если мега-меню выводит мало постов или показывает ошибку — убедись, что под указанным ярлыком опубликовано достаточно постов и название ярлыка точно совпадает с написанием в постах (с учётом регистра).

↑ Наверх

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

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

Через HTML/JavaScript

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

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

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

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

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

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

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

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

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

↑ Наверх

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

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

Через HTML/JavaScript

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

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

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

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

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

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

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

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

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

↑ Наверх

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

Через контентные блоки ты собираешь главную страницу из тематических подборок постов. Открой Дизайн → нажми на иконку редактирования в виджете Content Blocks Section. Внутри добавь виджет HTML/JavaScript. Можно добавить несколько таких виджетов — по одному блоку в каждом.

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

Структура шорткода

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

Где источник — это recent (свежие посты), random (случайные) или название метки. А количество результатов (число в начале) используется только в тех типах блоков, которые его поддерживают.

4 типа блоков NestSpot

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

Block-1 — одна колонка, крупные карточки: block1/recent

Block-2 — две колонки: block2/recent

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

Video — блок с видео-постами: video/recent

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

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

Примеры готовых раскладок

Вот как из блоков собрать главную под разные ниши. Добавь несколько HTML/JavaScript виджетов в Content Blocks Section, в каждый — по одному шорткоду:

Технологический блог: block1/Гаджеты → grid1/Софт → video/Обзоры

Новостной портал: block2/Город → grid1/Спорт → block1/Культура

Лайфстайл-блог: grid1/recent → block2/Мода → video/Путешествия

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

Совет для тёмной и Arabic версий: Контентные блоки работают одинаково во всех трёх версиях шаблона. Если ты переключаешься с Default на Dark Mode, настройки виджетов сохранятся. В Arabic-версии блоки автоматически отображаются справа налево.

↑ Наверх

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

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

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

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

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

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

(hide)

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

↑ Наверх

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

Новая система комментариев позволяет настроить тип комментариев через виджет 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. Для Arabic RTL-версии шаблона особенно актуален код ar_AR — комментарии будут отображаться справа налево. Полный список языков Facebook доступен в официальной документации Facebook.

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

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

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

↑ Наверх

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

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

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

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

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

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

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

↑ Наверх

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

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

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

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

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

Здесь можно:

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

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

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

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

Здесь можно:

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

Совет для многотемного сайта: Если у тебя на NestSpot и новости, и вечнозелёные обзоры — настройку даты лучше держать включённой. Свежесть новостей важна для читателей, а обзоры всё равно регулярно обновляются.

↑ Наверх

Открой Дизайн → нажми на иконку редактирования в виджете 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 — стало проще и удобнее. Также добавлена возможность гибко настраивать заголовок блока.

↑ Наверх

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

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

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

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

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

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

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

(ads)

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

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

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

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

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

(hideAds)

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

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

↑ Наверх

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

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

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

(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=(NestSpot_Blogger_template.zip) #info=(74.02kb) #button=(Download)

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

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

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

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

(getCard) #type=(product) #title=(NestSpot Premium Template) #info=(15$) #button=(Buy)

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

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

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

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

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

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

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

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

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

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

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

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

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

Известная проблема (была решена): В ранних версиях NestSpot карточка типа Post показывала только последний опубликованный пост, игнорируя случайные. С версии V.1.4.0 (сентябрь 2023) исправлено — теперь Post Card корректно поддерживает random.

↑ Наверх

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

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

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

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

(nextPage)

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

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

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

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

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

↑ Наверх

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

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

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

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

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

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

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

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

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

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

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

Пример одной ссылки на 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. Их название в теге должно быть в нижнем регистре.

Обновление V.1.7.0: В новой версии добавлена поддержка иконок Threads, X (новый Twitter) и Mastodon. Это позволяет привязать к посту все актуальные соцсети 2025-2026 года.

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

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

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

Исправлено в V.1.6.0: Раньше при отключении автора через эту опцию возникали проблемы с отображением имени и фото в некоторых случаях. В версии V.1.6.0 проблема полностью исправлена.

↑ Наверх

17. Виджет Facebook

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

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

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

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

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

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

Для Arabic-версии NestSpot: Виджет Facebook автоматически адаптируется к направлению текста справа налево, если в коде указан язык ar_AR. Это сэкономит время на настройке RTL-версии сайта.

↑ Наверх

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

Открой Дизайн → нажми на иконку редактирования в виджете 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 — твоя ссылка на эту соцсеть.

↑ Наверх

19. Подписка по 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.

↑ Наверх

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

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

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

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

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

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

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

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

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

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

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

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

Решение частой проблемы: Если виджет Sidebar Posts не отображает посты — используй формат шорткода 6/sidebar/recent с числом в начале. Это самая частая ошибка в комментариях к документации NestSpot — пользователи забывают указать количество.

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

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

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

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

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

↑ Наверх

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

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

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

Открой Дизайн → нажми на иконку редактирования в виджете 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 в подвале доступно только для премиум-пользователей. В бесплатной версии ссылка автора должна оставаться.

↑ Наверх

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

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

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

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

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

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

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

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

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

↑ Наверх

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

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

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

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

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

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

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

История обновлений: С версии V.1.5.0 настройки Sticky Sidebar и Sticky Menu перенесены в Theme Designer для более удобного управления. До этого они находились в HTML-коде шаблона. Также в V.1.5.0 добавлен Box Mode прямо в Theme Designer.

↑ Наверх

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

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

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

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

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

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

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

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

↑ Наверх

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

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

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

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

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

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

Особенность 3 версий: Если ты используешь Dark Mode-версию шаблона, цвета по умолчанию уже подобраны под тёмный фон — не нужно настраивать с нуля. Просто подгони акцентные цвета под свой бренд. Для Arabic-версии цветовая схема такая же, как у Default.

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

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

↑ Наверх

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

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

Что значит «3 версии в одной покупке»?

После покупки в библиотеке Gumroad ты получишь три отдельных XML-файла: классическую светлую версию (Default), тёмную (Dark Mode) и Arabic RTL для языков с направлением текста справа налево. Это три полноценных шаблона со своими дизайнами. Переключаться между ними можно через Тема → Восстановить в Blogger без потери контента (см. раздел 1).

Как переключиться между Default и Dark Mode версиями?

Сделай бэкап текущей темы, открой Тема → стрелочка вниз → Восстановить, и загрузи XML-файл другой версии. Посты, страницы и комментарии останутся на месте. Виджеты обычно сохраняют настройки автоматически, но иногда нужно перенастроить шорткоды в Content Blocks.

Можно ли использовать Arabic-версию для русского сайта?

Технически да, но не стоит. Arabic-версия настроена под направление текста справа налево (RTL) — это критично для арабского и иврита. Для русского языка (LTR — слева направо) используй Default или Dark Mode. Arabic-версия нужна только если основной язык сайта арабский.

Почему виджет Sidebar Posts не отображает посты?

Самая частая ошибка — шорткод без числа в начале. Должен быть 6/sidebar/recent, а не просто sidebar/recent. Это подтверждено в комментариях официальной документации Piki Templates — поддержка отвечает именно так. Также проверь, что название метки точно совпадает с написанием в постах.

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

NestSpot использует Google Material Icons — более 2000 иконок. Синтаксис для меню: <span class="material-symbols-rounded">название</span>. Чтобы получить код иконки, зайди в галерею Google Material Icons, найди нужную и скопируй её Icon Font Code.

Подходит ли NestSpot для AdSense?

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

Чем NestSpot отличается от WindSpot?

Оба от Piki Templates. NestSpot дешевле ($15 против $21) и универсальнее — 3 версии в комплекте включая Arabic RTL. WindSpot строже, имеет Ajax Search, заточен под классическое новостное СМИ. NestSpot — для многотемных блогов, где нужно гибко смешивать рубрики, и для RTL-сайтов.

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

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

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

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

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

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

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

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

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

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