Полная инструкция по настройке шаблона Star Mag для Blogger. Все 23 раздела с пошаговыми примерами, шорткодами и оригинальными скриншотами от автора Wire Templates.
Инструкция переведена с официальной документации и адаптирована для русскоязычных пользователей. Если у тебя ещё нет шаблона — посмотри его обзор и купи в каталоге.
- Установка шаблона
- Логотип шапки
- Меню шапки
- Избранные посты
- Категории на главной
- Контентные блоки
- Лента недавних постов
- Система комментариев
- Настройка меток постов
- Автор и дата поста
- Похожие посты
- Реклама в постах
- Карточки в постах
- Разбивка длинных постов
- Социальные иконки автора
- Виджет Facebook
- Соцсети в сайдбаре
- Подписка по Email
- Посты в сайдбаре
- Комментарии в сайдбаре
- Подвал сайта
- Согласие на cookies
- Варианты вёрстки
- Настройка фида
- Цвета и шрифты
1. Установка шаблона
Перед тем как настраивать виджеты, нужно установить сам шаблон в Blogger. Процесс простой и занимает 2-3 минуты:
- Скачай XML-файл шаблона из библиотеки Gumroad (если ты купил премиум) или из обзора шаблона (если используешь бесплатную версию).
- Открой свой блог в Blogger и перейди в раздел Тема.
- Нажми на стрелочку вниз рядом с кнопкой Настроить.
- Выбери Восстановить.
- Загрузи скачанный XML-файл.
- Шаблон применится автоматически.
Перед установкой нового шаблона сохрани текущий: Тема → стрелочка вниз → Резервное копирование. Если что-то пойдёт не так, всегда сможешь вернуться к старой версии.
После установки шаблон готов к настройке. Все элементы (виджеты) редактируются через раздел Дизайн в админке Blogger. Каждый виджет настраивается отдельно — об этом дальше.
↑ Наверх2. Логотип шапки
Открой Дизайн → нажми на иконку редактирования в виджете Header Logo.
Тёмная версия логотипа
Шаблон поддерживает отдельный логотип для тёмного режима. Чтобы загрузить тёмную версию:
- Сначала загрузи тёмное изображение в любой пост (можно черновик).
- Скопируй ссылку на изображение (правый клик → копировать URL картинки).
- Вставь эту ссылку в поле Link в настройках виджета (как показано на скриншоте выше).
Когда пользователь переключает сайт в тёмный режим, логотип сменится автоматически.
↑ Наверх3. Меню шапки
Открой Дизайн → нажми на иконку редактирования в виджете Header Menu.
Основное и вложенное меню
Структура ссылок задаётся через специальный синтаксис:
Основной пункт меню: Features — обычный пункт меню.
Подменю 1 уровня: _Sub Menu 1 — один подчёркивание перед названием.
Подменю 2 уровня: __Sub Menu 2 — два подчёркивания перед названием.
Иконки для пунктов меню
В шаблоне используется библиотека Bootstrap Icons. Можно добавить иконку рядом с любым пунктом меню.
Формат кода иконки: <i class="bi bi-0-circle"></i>
Как получить HTML-код иконки:
- Перейди в галерею Bootstrap Icons.
- Найди нужную иконку и кликни на неё, чтобы открыть страницу с информацией.
- Скопируй HTML-код иконки из правой панели.
- Вставь код иконки перед текстом пункта меню.
Мега-меню
Мега-меню — это развёрнутое меню с превью постов при наведении. Создаётся через шорткоды:
Недавние посты: megamenu/recent
Случайные посты: megamenu/random
По конкретной метке: megamenu/Your Label
Название метки должно точно совпадать с написанием в постах (важен регистр букв).
4. Избранные посты
Открой Дизайн → нажми на иконку редактирования в виджете Featured Posts Section. Внутри можно добавить виджет HTML/JavaScript или Популярные посты.
Через HTML/JavaScript
Через шорткоды можно настроить, какие посты показывать в блоке избранных:
Недавние посты: featured/recent
Случайные посты: featured/random
По метке: featured/Your Label
Также можно настроить заголовок блока и количество показываемых постов.
Через виджет Популярные посты
Вместо HTML-виджета можно использовать стандартный Популярные посты от Blogger. Шаблон Star Mag красиво его оформит автоматически.
↑ Наверх5. Категории на главной
Открой Дизайн → нажми на иконку редактирования в виджете Custom Categories Section.
В этом блоке можно настроить:
- Title — название категории.
- Caption — короткое описание под названием.
- Custom Link — ссылка, на которую ведёт карточка категории.
Карточки категорий показываются на главной странице в виде красивых блоков, ведущих на разделы блога.
↑ Наверх6. Контентные блоки
Открой Дизайн → нажми на иконку редактирования в виджете Content Blocks Section. Внутри добавь виджет HTML/JavaScript.
Через контентные блоки можно создавать тематические подборки постов на главной. Структура шорткода:
Количество результатов / Тип блока / Метка
Типы блоков
Шаблон поддерживает 6 типов вёрстки контентных блоков:
Block-1: block1/recent — одноколоночный список.
Block-2: block2/recent — двухколоночный список.
Block-3: block3/recent — трёхколоночный список.
Grid-1: 4/grid1/recent — сеточная вёрстка тип 1.
Grid-2: 4/grid2/recent — сеточная вёрстка тип 2.
Video: video/recent — видео-блок.
В каждом шорткоде можно менять тип постов:
recent— недавние постыrandom— случайные постыYour Label— посты с конкретной меткой
Для типов Grid-1, Grid-2 можно указать число постов в начале шорткода (например, 4/grid1/recent покажет 4 поста в сетке).
7. Лента недавних постов
Открой Дизайн → нажми на иконку редактирования в виджете Main Recent Posts.
Это основная лента публикаций на главной странице. Здесь показываются последние посты блога.
Скрытие заголовка ленты
Если нужно убрать главный заголовок над лентой постов, используй шорткод:
(hide)
Шорткод вставляется в поле Read More виджета, как показано на скриншоте выше. После сохранения главный заголовок ленты скроется.
↑ Наверх8. Система комментариев
Новая система комментариев позволяет настроить тип комментариев через виджет Blog Posts. Перейди в Дизайн → Blog Posts → Comment Format.
Шаблон поддерживает три системы комментариев. Выбери одну через шорткод:
Стандартные комментарии 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 можно публиковать изображения и видео без шорткодов — просто скопируй ссылку на медиа и вставь её в поле комментария.
9. Настройка меток постов
Метки (Labels) можно показывать или скрывать в превью постов, а также менять их подпись. Перейди в Дизайн → Blog Posts → Labels Prefix.
Возможные действия:
- Изменить подпись перед метками (по умолчанию — «Labels»).
- Полностью скрыть метки в превью постов, отключив переключатель.
- Оставить метки видимыми, но без префикса.
Метки помогают читателям ориентироваться в темах блога. Если у тебя много категорий, их полезно показывать. Если категорий мало или они не важны для навигации — можно скрыть.
↑ Наверх10. Автор и дата поста
В этом разделе настраиваются два связанных элемента: имя автора и дата публикации.
Настройка автора
Перейди в Дизайн → Blog Posts → Author Format.
Здесь можно:
- Изменить префикс перед именем автора (по умолчанию — «Posted By»).
- Перевести префикс на русский, например, «Автор:».
- Полностью скрыть имя автора, отключив переключатель.
Настройка даты
Перейди в Дизайн → Blog Posts → Date Format.
Здесь можно:
- Изменить формат даты публикации.
- Полностью скрыть дату, если контент должен выглядеть «вечнозелёным» (без привязки к моменту публикации).
11. Похожие посты
Открой Дизайн → нажми на иконку редактирования в виджете Related Posts.
В этом виджете можно настроить заголовок блока и количество показываемых постов. Также поддерживается фильтрация по конкретной метке.
Шорткоды для похожих постов
Все шорткоды начинаются с числа — это количество постов, которые будут показаны:
По теме поста (автоматически): 3/related/default
Недавние посты: 3/related/recent
Случайные посты: 3/related/random
По конкретной метке: 3/related/Your Label
Похожие посты показываются в конце каждой статьи. Это важный элемент для удержания читателя — пользователь, дочитавший статью, с большой вероятностью кликнет на близкую по теме.
↑ Наверх12. Реклама в постах
Открой Дизайн → нажми на иконку редактирования в виджете Ad Code for Posts/Pages.
Вставь свой рекламный код (например, AdSense) в этот виджет. Реклама автоматически появится в начале и конце каждой статьи.
Реклама в середине поста
Для размещения рекламного блока в любом месте внутри поста используется шорткод:
(ads)
Шорткод (ads) вставляется в редакторе поста между параграфами в нужном месте. После публикации в этом месте появится рекламный блок.
(ads) работает только при условии, что рекламный код заполнен в виджете Ad Code for Posts/Pages. Без этого шорткод останется пустым.
Скрытие рекламы в конкретных постах
Если в каком-то посте реклама не нужна, используй шорткод:
(hideAds)
Вставь его в любое место поста. После публикации в этом посте автоматическая реклама не будет показываться.
13. Карточки в постах
Post Cards — это специальные карточки, которые можно вставлять в посты или на страницы. Они помогают выделить важную информацию: ссылку на другой пост, загрузку файла, рекламу продукта или произвольную карточку.
Базовый синтаксис
(getCard) #type=(Card Type) #title=(Card Title) #info=(Card Info) #button=(Card Text) #icon=(Icon Code)
Поддерживается 4 типа карточек: post, download, product, custom.
Карточка типа Post (ссылка на другой пост)
Используется когда нужно красиво порекомендовать другую статью в блоге.
(getCard) #type=(post) #title=(You might Like)
Ссылка карточки: поле ссылки можно оставить пустым или поставить любой символ (например, # или /). Шаблон сам подберёт связанный пост.
Карточка типа Download (загрузка файла)
Используется для предложения файла на скачивание: PDF, шаблон, чек-лист, программа.
(getCard) #type=(download) #title=(Diver_Blogger_template.zip) #info=(74.02kb) #button=(Download)
Ссылка карточки: вставь прямую ссылку на файл. Можно включить опцию открытия в новом окне.
Карточка типа Product (продукт на покупку)
Используется для рекомендации товара или платного продукта.
(getCard) #type=(product) #title=(Diver Premium Template) #info=(09.95$) #button=(Buy)
Ссылка карточки: вставь ссылку на страницу покупки. Можно включить открытие в новом окне.
Карточка типа Custom (произвольная)
Универсальная карточка, которую можно настроить под любую задачу.
(getCard) #type=(custom) #title=(Custom Post Card) #info=(Info) #button=(Button) #icon=(download)
Параметр #icon — здесь указывается код иконки из библиотеки Bootstrap Icons. Можно ставить любую иконку, подходящую под смысл карточки.
Как получить код иконки
Шаблон использует библиотеку Bootstrap Icons. Пошагово:
- Перейди на сайт Bootstrap Icons.
- В поиске сверху найди нужную иконку.
- Кликни на иконку, чтобы открыть её страницу.
- В правой панели скопируй название иконки (без префикса
bi-).
14. Разбивка длинных постов
Длинные статьи (3000+ слов) можно разбить на несколько страниц с пагинацией. Это улучшает поведенческие факторы и удерживает читателя.
Шорткод разбивки
Вставь шорткод между параграфами в редакторе поста, чтобы создать переход на следующую страницу:
(nextPage)
Шорткод можно использовать несколько раз в одном посте — каждое появление создаёт новую страницу. Внизу поста появятся кнопки навигации между страницами.
(nextPage)) можно использовать карточки (getCard) из предыдущего раздела. Они работают одинаково на всех страницах.
15. Социальные иконки автора
Под каждым постом отображается блок с информацией об авторе. В нём можно добавить иконки социальных сетей. Эти иконки берутся из профиля Blogger.
Настройка профиля Blogger
Открой Настройки Blogger → выбери Редактировать профиль Blogger.
Как добавить иконки соцсетей
В поле «О себе» нужно вставить специальный код. Шаги:
- Зайди в Blogger → Настройки → Профиль пользователя.
- В поле описания вставь код со ссылками на свои соцсети.
- Сохрани изменения.
Формат кода для иконок
Каждая иконка социальной сети — это обычная HTML-ссылка с названием соцсети внутри тега. Шаблон Star Mag автоматически распознаёт название и подставляет нужную иконку.
Пример одной ссылки на Instagram:
<a href="https://instagram.com/wiretemplates">instagram</a>
Полный пример профиля с описанием и пятью ссылками:
Hello this is Johan Doe, I am Web Designer and Expert at Wire Templates
<a href="https://facebook.com/wiretemplates">facebook</a>
<a href="https://twitter.com/wiretemplates">twitter</a>
<a href="https://youtube.com/wiretemplates">youtube</a>
<a href="https://instagram.com/wiretemplates">instagram</a>
<a href="https://www.wiretemplates.com/">external-link</a>
Поддерживаемые социальные сети
В блоке автора поддерживаются следующие иконки (название внутри тега должно быть точно такое):
facebook, twitter, youtube, instagram, pinterest, linkedin, blogger, reddit, google, apple, microsoft, facebook-f, 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 нужно выполнить два условия:
- Сначала установить систему комментариев как Facebook (см. раздел 8 этой инструкции).
- Затем зайти на сайт Facebook Like Button и сгенерировать код виджета.
- Скопировать сгенерированный HTML-код.
- В Blogger перейти в Дизайн, добавить в сайдбар новый виджет HTML/JavaScript.
- Вставить туда скопированный код Facebook.
17. Соцсети в сайдбаре
Открой Дизайн → нажми на иконку редактирования в виджете 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 — твоя ссылка на эту соцсеть.
18. Подписка по Email
Открой Дизайн → нажми на иконку редактирования в виджете Follow by Email.
Виджет работает со сторонними сервисами email-рассылок (Brevo, Mailchimp и другими). Просто вставь ссылку на свою форму подписки.
Шорткоды настройки
Базовый шорткод формы: (sibForm)
Заголовок формы: #title=(Follow by Email)
Подзаголовок: #caption=(Get Notified About Next Update Direct to Your inbox)
Заголовок и подзаголовок — опциональные параметры. Можно использовать только базовый шорткод (sibForm) без них.
Создание ссылки на форму подписки
Если у тебя ещё нет формы подписки, её нужно создать в сервисе рассылок. Подробная инструкция от автора шаблона: Как создать ссылку на форму подписки.
19. Посты и комментарии в сайдбаре
В сайдбар можно добавить два дополнительных виджета: блок постов и блок последних комментариев.
Блок постов в сайдбаре
Открой Дизайн → нажми на иконку редактирования в виджете Sidebar Posts Section.
В виджете можно настроить заголовок блока, количество постов и фильтрацию по метке.
Шорткоды для блока постов
Все шорткоды начинаются с числа — это количество показываемых постов:
Недавние посты: 3/sidebar/recent
Случайные посты: 3/sidebar/random
По конкретной метке: 3/sidebar/Your Label
Блок комментариев в сайдбаре
Открой Дизайн → нажми на иконку редактирования в виджете Comments Section.
В виджете можно настроить количество отображаемых комментариев. Блок показывает последние комментарии с разных постов блога с превью текста и ссылкой на пост.
20. Подвал сайта
Подвал в Star Mag состоит из трёх независимых блоков, которые настраиваются отдельно: социальные иконки, меню и копирайт.
Соцсети в подвале
Открой Дизайн → нажми на иконку редактирования в виджете Footer Section.
Соцсети в подвале настраиваются так же, как в сайдбаре — через LinkList Gadget. Поддерживается тот же список иконок:
blogger, facebook, twitter-x, youtube, telegram, instagram, pinterest, linkedin, tiktok, vk, whatsapp, discord, github, rss и другие — всего 32 иконки.
Меню в подвале
Открой Дизайн → нажми на иконку редактирования в виджете Footer Menu.
В подвале обычно размещают ссылки на служебные страницы: «О нас», «Контакты», «Политика конфиденциальности», «Условия использования», «Карта сайта». Эти ссылки нужны для соответствия требованиям Google и AdSense.
Копирайт в подвале
Открой Дизайн → нажми на иконку редактирования в виджете Footer Copyright.
В этом виджете указывается копирайт сайта — обычно с годом и названием.
21. Согласие на cookies
Открой Дизайн → нажми на иконку редактирования в виджете Cookies Consent.
Виджет показывает посетителю всплывающее уведомление о cookies. Это требование GDPR и других законов о защите персональных данных. После согласия посетителя выбор сохраняется в его браузере на указанное количество дней.
Настройка через шорткоды
Текст кнопки согласия: #buttons=(Accepted !)
Срок хранения согласия в днях: #days=(20)
Шорткоды вставляются в настройки виджета. После сохранения уведомление будет показывать новый текст и запоминать выбор пользователя на указанный срок.
22. Варианты вёрстки
Star Mag поддерживает несколько режимов вёрстки сайта. Открой Панель Blogger → нажми на Тема → перейди в Настроить.
Доступные режимы
- Boxed Mode — содержимое сайта помещается в центральный блок с отступами по бокам.
- Sticky Header — шапка сайта остаётся видимой при прокрутке вниз.
- Sticky Sidebar — сайдбар остаётся видимым при прокрутке постов.
- Native Dark Mode — поддержка системного тёмного режима устройства.
Каждая опция включается значением 1 или выключается значением 0.
23. Настройка фида
Открой Панель Blogger → перейди в Настройки → прокрути до Site Feed.
Star Mag поддерживает короткий фид (Short Feed). В этом режиме шаблон загружает меньше данных с сервера Blogger, что ускоряет работу сайта.
Преимущества короткого фида:
- Быстрая загрузка главной страницы.
- Меньше нагрузка на сервер.
- Защита контента от автоматического копирования.
24. Цвета и шрифты
Открой Тема → нажми на Настроить → исследуй разделы Background, Colors и Advanced.
Star Mag полностью кастомизируется через стандартный Theme Designer Blogger. Доступно для изменения:
- Шрифты — стили текста, заголовков, навигации.
- Цвета меню — фон, текст, ховер-эффекты.
- Цвета виджетов — заголовки секций, фоны, разделители.
- Цвета подвала — фон, текст, иконки соцсетей.
- Цвета акцентов — кнопки, ссылки, выделения.
Видеоинструкция от автора
Wire Templates выпустил видеообзор настройки шаблона Star Mag: смотреть на YouTube. Видео на английском, но показывает все шаги визуально — можно понять без знания языка.
↑ НаверхЧасто задаваемые вопросы по настройке
В процессе настройки Star Mag у пользователей возникают одни и те же вопросы. Собрал ответы на самые частые.
Почему не работает слайдер на главной?
featured/Featured, а в постах метка называется Избранное. Проверь, что название метки в шорткоде точно совпадает с написанием в постах (включая регистр букв). Подробнее в разделе «Избранные посты».Как перевести подписи шаблона на русский?
Можно ли поменять рекламные шорткоды на свой код?
(ads) внутри постов автоматически подтянет этот код. Можно использовать как AdSense, так и прямую рекламу.Шаблон работает в бесплатной версии полноценно?
Как добавить новые иконки социальных сетей?
Что делать, если виджет не появляется на странице?
Где скачать обновлённую версию шаблона?
Где задать вопрос автору шаблона?
Нужна помощь с настройкой?
Если что-то пошло не так после прохождения инструкции — напиши мне в Telegram. Помогу разобраться с настройкой Star Mag бесплатно для покупателей.
Написать мне →Источник документации: инструкция переведена и адаптирована из официальной документации Wire Templates для русскоязычных пользователей шаблона. Все скриншоты принадлежат автору шаблона.