Настройка шаблона QuickSpot для Blogger — полное руководство

QuickSpot — скоростной журнальный шаблон от Piki Templates с самым гибким конструктором главной страницы среди всех тем каталога. Его сила в семи типах контентных блоков, включая эксклюзивные Col-Left и Col-Right, — но именно из-за этого многообразия первая настройка может запутать. Эта инструкция разложит всё по полочкам.

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

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

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

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

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

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

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

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

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

Сразу после установки: зайди в Настройки → Site Feed и установи режим Short. Это ускорит загрузку сайта (см. раздел 24). Без этого QuickSpot не покажет максимальную скорость.

↑ Наверх

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

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

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

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

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

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

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

↑ Наверх

3. Меню шапки

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

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

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

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

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

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

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

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

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

QuickSpot использует библиотеку 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. Мега-меню

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

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

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

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

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

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

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

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

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

↑ Наверх

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

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

Через HTML/JavaScript

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

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

Недавние посты: 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. Контентные блоки — 7 типов вёрстки

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

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

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

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

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

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

7 типов блоков

QuickSpot поддерживает семь типов вёрстки — больше, чем любой другой шаблон каталога:

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

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

Block-3 — три колонки, компактно: block3/recent

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

Col-Left — крупный блок слева + лента справа: 6/col-left/recent

Col-Right — крупный блок справа + лента слева: 6/col-right/recent

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

Col-Left и Col-Right — эксклюзив QuickSpot. Этих блоков нет в других шаблонах. Они создают асимметричную журнальную раскладку: один крупный пост и колонка мелких рядом. Число в начале (6/col-left/recent) задаёт количество постов в ленте. Эти два типа, а также Grid-1, поддерживают параметр количества.

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

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

Готовые раскладки главной

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

Журнал новостей: featured/recent → 6/col-left/recent → block3/Спорт

Гейминг-портал: trending/recent → grid1/Обзоры → video/recent

Кулинария: grid1/recent → block2/Десерты → 6/col-right/Напитки

Техно-обзоры: featured/Флагманы → 6/col-left/recent → video/Распаковки

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

↑ Наверх

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. Полный список языков Facebook доступен в официальной документации Facebook.

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

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

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

↑ Наверх

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

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

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

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

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

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

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

↑ Наверх

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

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

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

Перейди в Дизайн → 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.3.0: С этой версии Related Posts можно настраивать прямо из Layout без правки HTML — стало проще и удобнее.

↑ Наверх

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

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

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

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

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

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

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

(ads)

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

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

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

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

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

(hideAds)

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

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

↑ Наверх

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

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 — гибкая универсальная карточка

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

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

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

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

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

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

↑ Наверх

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

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

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

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

(nextPage)

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

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

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

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

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

↑ Наверх

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

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

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

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

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

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

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

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

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

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

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

Пример одной ссылки на 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

↑ Наверх

17. Виджет Facebook

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

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

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

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

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

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

↑ Наверх

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

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

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

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

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

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

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

↑ Наверх

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

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

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

Открой Дизайн → нажми на иконку редактирования в виджете 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.5.0: В новой версии копирайт стал гибким — теперь можно вставить длинный текст с дополнительной информацией о сайте, ссылками или юридическими формулировками без поломки вёрстки.

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

↑ Наверх

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

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

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

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

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

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

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

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

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

↑ Наверх

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

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

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

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

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

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

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

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

↑ Наверх

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

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

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

QuickSpot поддерживает Short Feed — короткий фид. В этом режиме шаблон загружает меньше данных с сервера Blogger, что напрямую ускоряет работу сайта.

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

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

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

Почему это критично для QuickSpot: Шаблон ценится за скорость и прохождение Core Web Vitals. Без режима Short Feed контентные блоки на главной (которых может быть много) будут грузить лишние данные. Это первая настройка, которую стоит включить после установки.

↑ Наверх

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

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

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

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

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

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

Особенность: В бесплатной версии смена цветов ограничена. Полный доступ к Theme Designer (шрифты + все цвета) открывается в премиум-версии.

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

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

↑ Наверх

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

В процессе настройки QuickSpot у пользователей возникают одни и те же вопросы. Собрал ответы на самые частые.

Что такое Col-Left и Col-Right и как их использовать?

Это два эксклюзивных типа контентных блоков QuickSpot, которых нет в других шаблонах. Col-Left показывает крупный пост слева и колонку мелких справа, Col-Right — наоборот. Шорткоды: 6/col-left/recent и 6/col-right/recent. Число задаёт количество постов. Используй их в виджете Content Blocks Section для асимметричной журнальной главной (см. раздел 7).

Почему реклама не показывается?

Это частый вопрос из поддержки. Проверь: 1) рекламный код вставлен в виджет Ad Code for Posts/Pages; 2) шорткод (ads) внутри поста работает только при заполненном виджете; 3) на этом посте не стоит шорткод (hideAds). Новым аккаунтам AdSense также нужно время на одобрение — реклама может не показываться первые дни.

Почему Top Trending не принимает число постов?

У QuickSpot блок Top Trending Posts использует шорткод без числа — trending/recent, а не 6/trending/recent. Количество постов в этом блоке фиксированное. Число поддерживают только Featured, Related, Sidebar и контентные блоки Col-Left/Col-Right/Grid-1.

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

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

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

Да, но только в премиум-версии. В бесплатной версии переключатель тёмной темы недоступен. Native Dark Mode включается в Theme → Customize значением 1 (см. раздел 23).

Можно ли изменить шрифты и цвета?

Да, в премиум-версии доступен полный «Дизайнер тем» Blogger для смены шрифтов и цветов. В бесплатной версии смена цветов ограничена. С версии V.1.2.0 добавлена расширенная поддержка шрифтов из Theme Designer.

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

Оба от Piki Templates, но QuickSpot гибче по главной — 7 типов контентных блоков против 4 у WindSpot, плюс эксклюзивные Col-Left и Col-Right. WindSpot строже и заточен под классическое новостное СМИ, у него есть Ajax Search. QuickSpot — для журнальных, гейминг и тематических проектов с акцентом на визуал и скорость.

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

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

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

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

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

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

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

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

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

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