NoobBlog

Перед тем как перейти к коду, давай коротко разберёмся, что мы вообще собираемся сделать. Мы добавим в Blogger аккуратное оформление для вставок кода - с рамкой, приятными цветами и кнопкой «Скопировать». Всё будет работать без сторонних плагинов и лишних скриптов - только стандартный HTML, немного CSS и JavaScript. По сути, это маленькое улучшение, которое делает блог чище и удобнее для читателей. Кто хоть раз вставлял код в Blogger, знает - по умолчанию он выглядит скучно. Серый текст, без отступов, без рамки, всё сливается. А хочется, чтобы было аккуратно - как на нормальных сайтах. Покажу, как оформить код красиво и удобно прямо в Blogger как у меня. Содержание статьи Базовая разметка Подключаем Font Awesome Добавляем кнопку копирования Оформляем блок кода Для чего всё это Базовая разметка Начнём с самого простого - создадим блок, где будет находиться код. Для этого нужны два тега: <pre> и <code> . Первый отвечает за отступы и перен...

Blogger начал тестирование двух инновационных бета-функций - Google Search links и Google Search previews . Эти инструменты интегрируют элементы поисковой системы Google прямо в контент блогов, добавляя автоматические ссылки на результаты поиска и визуальные карточки с описаниями. Функции предназначены для обогащения постов, повышения вовлеченности читателей и упрощения создания интерактивного контента. Пока они доступны только в бета-версии и не всем пользователям платформы, но Google активно собирает отзывы для доработки. Это часть более широкой стратегии компании по сближению Blogger с экосистемой Google, делая блогинг более динамичным и ориентированным на пользователя. Google Search links: автоматические ссылки Эта функция анализирует текст поста и автоматически превращает ключевые слова (имена, названия, термины) в ссылки на результаты поиска Google. Читатель может быстро открыть дополнительную информацию, не теряя контекст - поиск откроется в новой вкладке. Напри...

Если вы используете платформу Blogger, последние изменения могут вас неприятно удивить. Google изменил способ экспорта данных, и теперь стандартный метод переноса контента на WordPress через XML-файл больше не работает напрямую. Для многих блогеров это стало проблемой, ведь перенос записей, комментариев и изображений - задача не из лёгких. Однако решение есть: с помощью RSS-ленты и плагина для WordPress можно по-прежнему сохранить все свои публикации и безболезненно переехать на новый движок. В этой статье я покажу пошагово, как это сделать, чтобы ничего не потерять. Содержание статьи Экспорт контента с Blogger Перенос контента на WordPress Публикация и редактирование Частые проблемы и решения Заключение Экспорт контента с Blogger Раньше всё было просто: заходите в Настройки → Резервное копирование контента , скачиваете XML-файл и импортируете его в WordPress. Сейчас же при попытке скачать архив с блогом вас перенаправляет на сервис Google Takeout , где данные соб...

Когда в блоге становится много статей, возникает необходимость сделать удобную постраничную навигацию. Она помогает читателям быстрее переходить между страницами и находить нужные материалы, а блог в целом становится более аккуратным и профессиональным. По умолчанию Blogger отображает только ссылки «Следующая страница» и «Предыдущая страница». Но удобнее использовать полноценную пагинацию с номерами страниц (1, 2, 3…) и кнопками навигации. На просторах интернета я нашёл готовый скрипт пагинации для Blogger. Ниже делюсь рабочим кодом и несколькими вариантами оформления - вы сможете выбрать стиль, который лучше всего подходит под ваш дизайн. Установка пагинации Чтобы добавить пагинацию в Blogger, нужно вставить в шаблон перед тегом </body> следующий код: <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> var postperpage=5; var numsho...

Карта сайта - это страница, где собраны все публикации вашего блога в удобном списке. Она помогает читателям быстро находить нужные материалы, а также улучшает навигацию по ресурсу. В этой статье разберём, как установить карту сайта в Blogger, какие есть особенности и что можно дополнительно настроить. Что такое карта сайта в Blogger В Blogger карта сайта может быть реализована двумя способами: XML-карта сайта - технический файл для поисковых систем (например, /sitemap.xml ), который нужен для индексации. HTML-карта сайта - обычная страница блога со списком всех статей. Её удобно делать для людей: она облегчает навигацию и повышает юзабилити. Сегодня мы рассмотрим именно HTML-карту сайта. Создание страницы под карту сайта Зайдите в панель управления Blogger. Перейдите в раздел Страницы и нажмите Создать страницу . Назовите страницу, например, «Карта сайта» или «Все статьи». Сохраните черновик, но пока не публикуйте. Вставка скрипта карты сайта Чтобы к...

Недавно я искал в интернете способы сделать оформление виджета «Популярные сообщения» более современным и красивым. Нашёл несколько готовых решений со стилями и кодом, но оказалось, что большинство из них рассчитаны на старые темы Blogger и не работают в новых шаблонах (например, Contempo или Soho). Из-за этого код или ломал верстку, или вообще не отображал виджет. Поэтому я решил собрать рабочий вариант оформления, который подходит именно для новых тем. Если вы ведёте блог на Blogger, то наверняка знаете, как важно, чтобы дизайн вашего сайта был не только функциональным, но и привлекательным. Один из популярных виджетов - "Популярные сообщения" (Popular Posts) - по умолчанию выглядит довольно просто и скучно. Но его можно легко преобразить с помощью редактирования HTML и добавления CSS. В этой статье я подробно расскажу, как это сделать. Мы превратим стандартный список в стильную сетку карточек с изображениями, анимациями и responsive-дизайном. Это не только улучшит внешн...

Как убрать «Популярные сообщения» со страниц Blogger, но оставить в постах Виджет «Популярные сообщения» в Blogger помогает выделить ваши лучшие статьи, но иногда он перегружает главную страницу или списки постов. Хотите, чтобы он отображался только внутри статей? В этой статье я поделюсь простым способом настройки виджета без ошибок в шаблоне. Следуйте этим шагам, и ваш блог станет чище и удобнее! Для начала. В редакторе HTML нажмите «Скачать шаблон», чтобы сохранить текущую версию. Это поможет быстро восстановить блог, если что-то пойдет не так. Пошаговая инструкция Откройте редактор шаблона Зайдите в админ-панель Blogger, выберите Тема → Изменить HTML . В правом верхнем углу нажмите на иконку «Перейти к виджету» (выпадающий список). Найдите виджет PopularPosts1 В выпадающем списке выберите PopularPosts1 - это стандартное имя виджета «Популярные сообщения». Сверните ко...

Как сделать заголовок поста в Blogger тегом H1 для SEO В стандартных шаблонах Blogger заголовок поста часто оформлен тегом <h3> или <h2> . С точки зрения SEO это не идеально, ведь главный заголовок статьи должен быть <h1> , а уже внутри текста можно использовать <h2>, <h3> и другие уровни. В этой статье покажу, как изменить шаблон Blogger тема Contempo так, чтобы: На странице поста заголовок был <h1> . На главной и страницах списка постов - <h2> . Почему важно использовать <h1> только на странице поста SEO : <h1> сигнализирует поисковым системам, что это главный заголовок страницы и определяет её основную тему. Удобство для читателей : экранные дикторы и другие вспомогательные технологии используют иерархию заголовков для навигации, что особенно важно для слабовидящих пользователей. Снижение путаницы : несколько <h1> с разными темами на одной странице могут размыть смысл и мешают поисковикам определить,...

Как установить хлебные крошки (Breadcrumbs) в Blogger шаблон Contempo Хлебные крошки (Breadcrumbs) помогают посетителям сайта легко ориентироваться в структуре блога и улучшить внутреннюю перелинковку. Кроме того, они положительно влияют на SEO, так как поисковые системы учитывают их в результатах выдачи. В этом руководстве вы узнаете, как установить стильные и адаптивные хлебные крошки в Blogger. 1. Откройте HTML-шаблон Перейдите в панель управления Blogger. Выберите Тема → Изменить HTML . Перед началом редактирования сделайте резервную копию шаблона. 2. Найдите нужное место в шаблоне Используйте поиск (Ctrl+F) и найдите строку: <b:includable id='post' var='post'> Сразу под этой строкой вставьте следующий код: <!-- Breadcrumbs --> <b:if cond='data:view.isPost or data:view.isPage'> <nav class='breadcrumbs' itemscope itemtype='https://schema.org/BreadcrumbList' aria-label="breadcrumb"> ...

Как изменить формат даты в шаблоне Contempo в Blogger В шаблоне Contempo дата публикации поста может выводиться в виде «август 08 2025» . Такой порядок слов связан с англоязычным форматом даты, заложенным по умолчанию в шаблон. Для русскоязычной аудитории он выглядит непривычно, поэтому чаще используется формат «8 августа 2025» , где сначала идёт число, затем месяц, а потом год. Кроме того, вы можете настроить любой другой вид отображения даты - например, в виде 08.08.2025 или 8 авг 2025 . Ниже - пошаговая инструкция чтобы изменить формат на более удобный. Важно! Перед любыми изменениями в коде шаблона обязательно создайте резервную копию темы. Это позволит восстановить блог в случае ошибки. В панели управления Blogger откройте раздел Тема . Нажмите Создать резервную копию / Скачать и сохраните файл на компьютер. Шаг 1. Открываем HTML шаблона В разделе Тема нажмите Изменить HTML . Откроется редактор кода шаблона. В окне поиска (Ctrl+F)...

Зачем мне блог в 2025 году В 2025 году блог остаётся мощным и актуальным инструментом, несмотря на обилие соцсетей, видеоформатов и коротких постов. Он нужен не только тем, кто хочет делиться знаниями или вести заметки для себя, но и тем, кто стремится построить личный бренд, зарабатывать в интернете или просто иметь стабильную, независимую платформу. Блог - это не пережиток прошлого, а личный медиаресурс, где ты сам себе редактор, дизайнер и автор. В отличие от соцсетей, где контент быстро тонет в ленте, блог работает на долгую перспективу. Одна статья может приносить трафик годами, особенно если она посвящена решению конкретной проблемы - будь то настройка Linux, установка программ, инструкции для смартфонов или работа с системой. Такие материалы находят через поиск, сохраняют в закладки и пересылают друзьям. А самое главное - они остаются твоими: никто не удалит их, не обрежет охваты и не навяжет формат. Блог - это ещё и пространство свободы. Здесь ты можешь говорить вдумчиво, ...

Навигация играет ключевую роль в удобстве работы с сайтом. Когда страница получается длинной - например, содержит много текста, картинок или комментариев - возникает необходимость быстро вернуться в начало. Конечно, можно прокручивать колесо мыши или тянуть ползунок, но это не всегда удобно. Именно для этого и создаётся кнопка «Наверх» (Back to Top), которая позволяет в один клик подняться к шапке страницы. Это простое решение делает сайт современнее и заботится о ваших посетителях. В этой статье я покажу, как установить простую кнопку «вверх», всего в три шага. Для иконки мы будем использовать иконочный шрифт Font Awesome . Содержание статьи Подключаем иконки Font Awesome Добавляем стили CSS Подключаем скрипт Важно: подключение jQuery Итог Подключаем иконки Font Awesome В шаблоне вашего сайта (перед закрывающим тегом </head> ) вставляем строку: <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css...