Star Mag — журнальный шаблон Wire Templates для Blogger, построенный вокруг шорткодов: почти каждый блок на главной и в постах настраивается не через настройки темы, а через строку вида тип/метка, вписанную в нужный гаджет. Это удобно, но и сбивает с толку, если делаешь это в первый раз — одна лишняя буква в названии метки, и блок просто не покажет посты.
В этой инструкции разбираю все разделы настройки шаблона: от установки XML-файла до карточек Post Cards, мега-меню и рекламных шорткодов. Если у тебя ещё нет шаблона, обзор со сравнением бесплатной и премиум-версии есть в каталоге.
- Установка шаблона
- Логотип шапки
- Меню шапки
- Блок избранных постов
- Категории на главной
- Контентные блоки
- Лента последних постов
- Система комментариев
- Метки постов
- Автор и дата поста
- Похожие посты
- Реклама в постах
- Карточки Post Cards
- Разбивка длинных постов
- Соцсети в профиле автора
- Виджет Facebook
- Соцсети в сайдбаре
- Подписка по Email
- Посты и комментарии в сайдбаре
- Подвал сайта
- Согласие на cookies
- Варианты вёрстки
- Настройка фида
- Цвета и шрифты
- Реальные проблемы покупателей
- FAQ
1. Установка шаблона
Есть три способа поставить XML-файл Star Mag в Blogger, но два из них по сути делают одно и то же, просто разными руками.
Через «Восстановить тему»
Скачай архив с шаблоном и распакуй его любым архиватором — внутри будет файл с расширением .xml. Дальше в Blogger: Тема → стрелочка рядом с «Настроить» → Восстановить. Выбираешь распакованный XML — и тема встаёт на сайт целиком, со всеми виджетами и разметкой.
Через «Изменить HTML»
Второй вариант — открыть XML-файл в блокноте, выделить весь код (Ctrl+A, Ctrl+C, на Mac — Cmd+A, Cmd+C) и вставить его в Тема → Изменить HTML, полностью заменив то, что там было. Результат тот же, что и при «Восстановить», просто без диалога загрузки файла — иногда так удобнее, если XML открыт у тебя прямо в браузере.
Перед тем как ставить новую тему — сохрани текущую: Тема → стрелочка вниз → Резервное копирование. Если после установки что-то съедет, сможешь откатиться одним файлом, а не разбираться руками, что именно сломалось.
Если на блоге уже стоит другая тема с кучей виджетов
Если до этого на блоге стоял чужой шаблон с большим количеством виджетов и гаджетов, при установке Star Mag часть старых элементов может остаться «висеть» в разделе Layout — они не удаляются автоматически при простой замене темы. Один из рабочих способов почистить это: сначала залить пустой (blank) шаблон через «Изменить HTML», сохранить — это уберёт лишние виджеты и секции от прошлой темы, — а уже после этого установить XML Star Mag тем же способом, что описан выше. Это нужно не всегда, а только если после установки в Layout остаются виджеты, которых в Star Mag быть не должно.
После установки все элементы страницы редактируются в разделе Дизайн (Layout) — каждый блок отдельным виджетом. Дальше по инструкции разбираю их по порядку.
↑ Наверх2. Логотип шапки
Дизайн → Header Logo → иконка редактирования. Загружаешь картинку — она встаёт в шапку сайта.
Отдельный логотип для тёмного режима
В Star Mag можно задать вторую версию логотипа — ту, что покажется, если посетитель включит тёмную тему сайта. Файл этой картинки нужно сначала куда-то залить: проще всего — прикрепить к любому черновику поста, скопировать оттуда прямую ссылку на изображение (правый клик по картинке → «Копировать адрес изображения») и вставить эту ссылку в поле Link того же виджета Header Logo. После сохранения переключение темы будет менять логотип автоматически, без перезагрузки страницы.
↑ Наверх3. Меню шапки
Дизайн → Header Menu → иконка редактирования. Пункты меню — это обычный LinkList-гаджет Blogger, но синтаксис названий определяет вложенность.
Пункт первого уровня: Features — пишешь название как есть, без символов.
Подменю 1 уровня: _Sub Menu 1 — одно подчёркивание перед названием.
Подменю 2 уровня: __Sub Menu 2 — два подчёркивания перед названием.
_Sub Menu 1, а уже под ним __Sub Menu 2. Если порядок перепутать, вложенность построится неправильно.
Иконки рядом с пунктами меню
Значки берутся из библиотеки Bootstrap Icons — она встроена в шаблон, ставить ничего не нужно.
- Открой галерею Bootstrap Icons и найди нужную иконку через поиск.
- Кликни на неё — откроется страница с кодом.
- Справа будет готовый HTML-тег вида
<i class="bi bi-0-circle"></i>— скопируй его. - Вставь этот код прямо перед текстом пункта меню, в том же поле, где название ссылки.
Лишний пробел или обрезанная часть класса — самая частая причина, по которой иконка не показывается вообще: вместо значка в меню остаётся пустое место.
Мега-меню
Мега-меню — это выпадающий блок с превью постов вместо простого списка ссылок. Настраивается тоже шорткодом в названии пункта:
Недавние посты: megamenu/recent
Случайные посты: megamenu/random
Посты по метке: megamenu/Название метки
Название метки должно быть написано ровно так же, как в постах — включая регистр букв: megamenu/Обзоры и megamenu/обзоры для шаблона — два разных значения.
4. Блок избранных постов
Дизайн → Featured Posts Section → иконка редактирования. Внутрь секции можно добавить один из двух виджетов: HTML/JavaScript с шорткодом или стандартный Blogger-виджет Популярные посты.
Через HTML/JavaScript
В этом виджете задаётся заголовок блока, количество постов и источник — через шорткод:
Недавние посты: featured/recent
Случайные посты: featured/random
По метке: featured/Название метки
featured/Обзоры и featured/обзоры шаблон считает разными метками.
Через виджет «Популярные посты»
Если не хочется возиться с шорткодами, вместо HTML/JS-виджета в ту же секцию можно поставить обычный гаджет Blogger «Популярные посты» — шаблон сам оформит его в нужном стиле, без дополнительных настроек.
↑ Наверх5. Категории на главной
Дизайн → Custom Categories Section → иконка редактирования.
У каждой карточки три поля: Title — название категории, Caption — короткая подпись под названием, и Custom Link — куда ведёт клик по карточке. Обычно сюда ставят ссылку на страницу с меткой соответствующей рубрики, например /search/label/Обзоры.
6. Контентные блоки
Дизайн → Content Blocks Section → иконка редактирования, внутри — виджет HTML/JavaScript.
Это блоки для тематических подборок на главной — то же самое, что «Избранное», только с выбором из шести вариантов вёрстки. Общий шаблон шорткода: Количество постов / Тип блока / Метка, но количество постов указывается не для всех типов — см. таблицу ниже.
Block-1: block1/recent — одна колонка списком.
Block-2: block2/recent — две колонки.
Block-3: block3/recent — три колонки.
Grid-1: 4/grid1/recent — сетка, количество постов задаётся числом впереди.
Grid-2: 4/grid2/recent — сетка второго типа, тоже с числом впереди.
Video: video/recent — блок для видео-постов.
Вместо recent в любом из шорткодов можно поставить random (случайные посты) или название метки — тогда блок будет собирать посты именно по ней.
4/grid1/recent) работает только для Grid-1 и Grid-2. У Block-1/2/3 и Video своё фиксированное количество постов, менять его через шорткод нельзя.
7. Лента последних постов
Дизайн → Main Recent Posts → иконка редактирования. Это основная лента блога — то, что видит читатель сразу под избранным и контентными блоками, и что чаще всего листает.
Скрыть заголовок ленты
Если над лентой не нужен крупный заголовок (например, если он уже есть выше по дизайну главной), вставь в поле Read More того же виджета шорткод:
(hide)
После сохранения заголовок ленты пропадёт, а сама лента постов останется на месте.
↑ Наверх8. Система комментариев
Дизайн → Blog Posts → Comment Format. Тип комментариев переключается одним шорткодом в этом поле — можно оставить стандартные Blogger-комментарии или подключить Disqus или Facebook.
Стандартные Blogger: #type=(blogger)
Disqus: #type=(disqus) #shortname=(твой-shortname)
Facebook: #type=(facebook)
Facebook с языком интерфейса: #type=(facebook) #lang=(код_языка)
Для Disqus shortname — это идентификатор твоего сайта на Disqus, который ты задаёшь при регистрации сайта в их системе, не выдуманное слово.
Язык виджета Facebook-комментариев
Если выбрал #type=(facebook), по умолчанию виджет подписей («Комментировать», «Поделиться» и т.д.) будет на английском. Чтобы переключить на русский, добавь #lang=(ru_RU). Из других частых кодов: en_US, es_ES, de_DE, fr_FR, it_IT, pt_BR, ja_JA. Полный список поддерживаемых Facebook кодов языков — в официальной документации Facebook, там их несколько десятков.
Медиа прямо в комментариях Blogger
Если оставил стандартные комментарии Blogger — читатели могут вставлять в них картинки и видео без всякого кода: достаточно скопировать прямую ссылку на файл и вставить её текстом в поле комментария, Blogger сам превратит её в превью.
9. Метки постов
Дизайн → Blog Posts → Labels Prefix.
Здесь два независимых переключателя: показывать метки под превью поста или нет, и какой текст ставить перед ними (по умолчанию — «Labels», можно поменять хоть на «Рубрики», хоть вообще оставить пустым — тогда метки будут идти без подписи).
Если категорий в блоге много и они реально помогают ориентироваться — метки стоит оставить видимыми. Если рубрика всего одна-две, толку от них немного, и можно смело выключать переключатель.
↑ Наверх10. Автор и дата поста
Автор
Дизайн → Blog Posts → Author Format.
По умолчанию перед именем стоит «Posted By» — меняешь на «Автор:» или что угодно своё, либо выключаешь показ имени автора полностью тем же переключателем.
Дата
Дизайн → Blog Posts → Date Format.
Формат даты можно поменять на свой, а можно скрыть дату целиком. Второе имеет смысл для инструкций и обзоров, которые не привязаны к конкретному моменту — свежий на вид пост без даты читатели воспринимают охотнее, чем тот же материал с меткой «опубликовано 3 года назад», даже если факты в нём всё ещё актуальны.
↑ Наверх11. Похожие посты
Дизайн → Related Posts → иконка редактирования. Блок показывается в конце статьи и держит читателя на сайте — самое логичное место, чтобы предложить следующую статью, пока внимание ещё не переключилось.
Шорткод всегда начинается с числа — сколько постов показать:
По теме текущего поста: 3/related/default
Недавние посты: 3/related/recent
Случайные посты: 3/related/random
По конкретной метке: 3/related/Название метки
default — самый удобный вариант из четырёх: шаблон сам подбирает посты по общим меткам с текущей статьёй, руками ничего указывать не нужно. recent и random имеет смысл ставить только если постов с похожими метками мало и блок иначе будет полупустым.
12. Реклама в постах
Дизайн → Ad Code for Posts/Pages → иконка редактирования. Сюда вставляется рекламный код (AdSense или любой другой) — он автоматически встанет в начале и в конце каждой статьи, без правки самих постов.
Реклама посередине текста
Чтобы вставить рекламу в произвольном месте внутри поста (не только в начале/конце), пиши в редакторе поста между абзацами шорткод:
(ads)
(ads) подтягивает тот же код, что стоит в виджете Ad Code for Posts/Pages. Если виджет пустой — шорткод просто ничего не покажет, ошибки не будет, но и рекламы тоже.
Отключить рекламу в конкретном посте
Если в отдельной статье реклама не нужна — например, на странице «Контакты» или в гостевом посте, где по договорённости с автором сторонней рекламы быть не должно, — вставь в неё шорткод:
(hideAds)
Достаточно одного вхождения шорткода где угодно в тексте поста — автоматическая реклама (в начале и конце) в этом посте перестанет показываться.
↑ Наверх13. Карточки Post Cards
Post Cards — карточки-блоки, которые вставляются прямо в текст поста через шорткод: приглашение прочитать другую статью, ссылка на скачивание, продвижение товара или просто произвольный блок с иконкой.
Общий синтаксис
(getCard) #type=(тип) #title=(заголовок) #info=(доп. текст) #button=(текст кнопки) #icon=(код иконки)
Набор параметров зависит от типа карточки — не все четыре нужны одновременно, ниже разбираю по отдельности.
Post — ссылка на другую статью блога
(getCard) #type=(post) #title=(Тебе может понравиться)
Ссылку для этой карточки можно вообще не указывать или поставить любой символ вроде # — шаблон сам подберёт связанный пост по теме, руками искать конкретную статью не нужно.
Download — ссылка на файл
(getCard) #type=(download) #title=(star-mag-shpargalka.pdf) #info=(120 kb) #button=(Скачать)
Здесь в ссылку карточки вставляется прямой адрес файла — например, PDF-шпаргалки или чек-листа для читателей. Опционально можно включить открытие ссылки в новой вкладке.
Product — продвижение платного продукта
(getCard) #type=(product) #title=(Star Mag Premium) #info=(от 21$) #button=(Купить)
Ссылка ведёт на страницу покупки. Указывай реальную цену и валюту продукта на момент публикации — эти цифры быстро устаревают, так что стоит время от времени их перепроверять, а не оставлять раз и навсегда.
Custom — произвольная карточка
(getCard) #type=(custom) #title=(Заголовок) #info=(Пояснение) #button=(Текст кнопки) #icon=(download)
Единственный тип, где нужен параметр #icon — код иконки из библиотеки Bootstrap Icons (тот же способ получения кода, что и для меню в разделе 3: находишь иконку в галерее, копируешь название без префикса bi-).
#type или #icon — самая частая причина, по которой карточка выводится пустой или без иконки. Если что-то не показалось, в первую очередь проверяй пробелы внутри скобок.
14. Разбивка длинных постов
Статью на 3000+ слов можно разбить на несколько страниц с постраничной навигацией внизу — так читатель не пугается одной длиннющей простыни текста, а поведенческие показатели заодно улучшаются.
(nextPage)
Шорткод ставится между абзацами в редакторе поста — каждое его появление создаёт разрыв на новую страницу. Использовать его можно сколько угодно раз в одной статье.
(getCard) из раздела 13 работают одинаково на любой странице разбитого поста — привязки к первой странице нет.
15. Соцсети в профиле автора
Под каждым постом Star Mag показывает блок с именем автора — в него можно добавить иконки соцсетей. Данные для этого блока шаблон берёт не из отдельного виджета, а прямо из профиля Blogger.
Куда вписывать ссылки
Настройки Blogger → Пользователь → Редактировать профиль Blogger, поле «О себе». Туда вставляется обычный текст с HTML-ссылками, где текстом ссылки служит название соцсети:
<a href="https://instagram.com/твой_аккаунт">instagram</a>
Шаблон распознаёт слово внутри тега (instagram, facebook и так далее) и подставляет вместо текста нужную иконку. Можно перечислить сразу несколько ссылок подряд — по одной на строку:
Пара строк о себе для профиля Blogger
<a href="https://facebook.com/твой_аккаунт">facebook</a>
<a href="https://t.me/твой_канал">telegram</a>
<a href="https://vk.com/твой_аккаунт">vk</a>
Какие названия распознаются
facebook, facebook-f, twitter, youtube, instagram, pinterest, linkedin, blogger, reddit, google, apple, microsoft, rss, behance, stack-overflow, telegram, tumblr, dribbble, codepen, snapchat, email, github, stumbleupon, vk, whatsapp
vk, telegram и whatsapp — название нужно писать строго в нижнем регистре, заглавные буквы шаблон не распознает.
Скрыть блок автора
Если блок с автором вообще не нужен под постами — Дизайн → Blog Posts → Show Author Profile, снять галочку.
16. Виджет Facebook
Отдельно от блока автора в сайдбар можно добавить виджет с кнопкой «Нравится» страницы Facebook — он показывает счётчик подписчиков прямо на сайте.
- Сгенерируй код на официальной странице Facebook Like Button — там вводишь ссылку на свою страницу и получаешь готовый HTML.
- В Blogger: Дизайн → добавь в сайдбар новый виджет HTML/JavaScript.
- Вставь туда скопированный код с сайта Facebook.
17. Соцсети в сайдбаре
Дизайн → Social Widget (Section) → иконка редактирования. В отличие от блока автора, здесь работает не текст профиля, а обычный LinkList-гаджет Blogger — список ссылок с названием и URL для каждого пункта.
Список поддерживаемых иконок здесь шире, чем в блоке автора:
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 — свою ссылку на эту соцсеть.
18. Подписка по Email
Дизайн → Follow by Email → иконка редактирования. Виджет не рассылает письма сам — он просто красиво оформляет форму подписки твоего сервиса рассылок (Brevo, Mailchimp и других) и вставляет её в сайдбар.
Базовый шорткод: (sibForm)
Заголовок формы (опционально): #title=(Подпишись на рассылку)
Подзаголовок (опционально): #caption=(Новые статьи прямо на почту)
Заголовок и подзаголовок можно не указывать вовсе — тогда останется только сама форма с полем email и кнопкой.
Если формы подписки у тебя ещё нет — как её создать в сервисе рассылок, разработчик шаблона описал в отдельной инструкции: создание ссылки на форму подписки.
↑ Наверх19. Посты и комментарии в сайдбаре
Блок постов
Дизайн → Sidebar Posts Section → иконка редактирования.
Недавние посты: 3/sidebar/recent
Случайные посты: 3/sidebar/random
По конкретной метке: 3/sidebar/Название метки
Число впереди — количество постов в блоке, регистр в названии метки должен точно совпадать с тем, что стоит в постах.
Блок комментариев
Дизайн → Comments Section → иконка редактирования.
Здесь настраивается только количество показываемых комментариев — блок сам подтягивает последние с разных постов, вместе с коротким превью текста и ссылкой на обсуждение.
20. Подвал сайта
Подвал Star Mag состоит из трёх независимых блоков — соцсети, меню и копирайт, каждый настраивается отдельно.
Соцсети в подвале
Дизайн → Footer Section → иконка редактирования. Работает так же, как соцсети в сайдбаре (раздел 17) — тот же LinkList и тот же список поддерживаемых иконок.
Меню в подвале
Дизайн → Footer Menu → иконка редактирования. Сюда обычно выносят служебные страницы: «О нас», «Контакты», «Политика конфиденциальности», «Условия использования» — без них AdSense не одобрит сайт, а Google не считает такой блог полноценным.
Копирайт
Дизайн → Footer Copyright → иконка редактирования. Обычно сюда пишут год и название сайта.
21. Согласие на cookies
Дизайн → Cookies Consent → иконка редактирования. Всплывающее уведомление о cookies — по сути требование GDPR и похожих законов о персональных данных. После того как посетитель нажмёт кнопку согласия, выбор запоминается в его браузере на заданное число дней.
Текст кнопки: #buttons=(Принять)
Срок хранения согласия в днях: #days=(30)
22. Варианты вёрстки
Тема → Настроить. В Star Mag есть четыре независимых переключателя вёрстки, каждый включается значением 1 и выключается значением 0:
- Boxed Mode — сайт помещается в центральную колонку с полями по бокам вместо полной ширины экрана.
- Sticky Header — шапка остаётся видна при прокрутке страницы вниз.
- Sticky Sidebar — сайдбар «прилипает» и остаётся на экране, пока читатель листает длинный пост.
- Native Dark Mode — поддержка системной тёмной темы устройства читателя.
Sticky Sidebar имеет смысл в основном для длинных постов — на коротких страницах он просто не успевает проявить себя, сайдбар и так помещается на экране целиком.
↑ Наверх23. Настройка фида
Настройки Blogger → Site Feed. Star Mag поддерживает короткий фид (Short Feed) — в этом режиме браузер читателя подгружает меньше данных с серверов Blogger, что ускоряет отрисовку главной страницы.
24. Цвета и шрифты
Тема → Настроить → разделы Background, Colors, Advanced. Star Mag целиком кастомизируется через стандартный Theme Designer Blogger — отдельно можно менять шрифты, цвета меню, цвета виджетов, цвета подвала и цвет акцентов (кнопки, ссылки, выделения).
25. Реальные проблемы покупателей
Ниже — не точечные баги отдельных виджетов (они разобраны внутри соответствующих разделов), а более общие сложности, с которыми реально сталкиваются на форумах и в комментариях владельцы шаблонов Wire Templates и Blogger-тем в целом.
Виджеты «замолкают» после смены настроек фида
Самая частая жалоба на форумах о Blogger-шаблонах вообще: после того как в настройках блога меняют Site Feed на «None» (иногда — просто экспериментируя с настройками, не подозревая о последствиях), внезапно перестают работать сразу несколько блоков — недавние посты, избранное, похожие посты, комментарии в сайдбаре. При этом ошибки нигде не появляется, блоки просто показывают пусто. Причина ровно та, что описана в разделе 23 — виджеты берут данные из фида блога.
Установка поверх сильно кастомизированной темы
Если раньше на блоге стояла чужая тема с большим количеством собственных виджетов, после установки Star Mag часть старых гаджетов может «зависнуть» в разделе Layout — простая замена темы их не убирает. Способ почистить это описан в разделе 1 (установка через blank-шаблон перед загрузкой XML).
Сторонние комментарии (Disqus, Facebook) блокируются браузером
Комментарии Disqus и Facebook встраиваются как отдельный iframe с чужого домена. Некоторые браузеры с усиленной приватностью (в первую очередь Safari, иногда Firefox с включённой строгой защитой от трекеров) могут воспринимать такой iframe как сторонний трекер и молча блокировать его — без явной ошибки, просто пустое место на месте блока комментариев. Если у части читателей комментарии не показываются, а у других всё в порядке — вероятная причина именно в этом, а не в настройках шаблона.
Активация лицензии и обновления для премиум-версии
Доступ к обновлённым XML-файлам премиум-шаблонов идёт через личный кабинет на площадке покупки (обычно Gumroad) — иногда после смены площадки или почты покупатели не сразу находят, где искать активную лицензию и свежую версию файла. Если шаблон куплен давно, разумно сверяться напрямую в личном кабинете, а не полагаться на память о том, «где что лежало».
↑ НаверхFAQ
Вопросы, которые чаще всего повторяются при настройке шаблонов такого типа.
Почему блок «Похожие посты» или «Избранное» вдруг перестал показывать посты?
У части читателей не показываются комментарии Disqus или Facebook — почему?
Можно ли использовать свой рекламный код вместо примеров из инструкции?
(ads) внутри постов автоматически подтянет именно этот код, менять сами шорткоды не нужно.После установки шаблона в Layout остались старые виджеты от прошлой темы — как убрать?
Где искать актуальный XML-файл премиум-версии после обновления шаблона?
Обязательно ли добавлять виджет Facebook Like в сайдбар?
Если после инструкции что-то не встало на место — напиши мне, разберёмся вместе.
Написать мне →
