Скрипт приветствия по времени суток для Blogger: JavaScript для автоматической смены приветствия в Blogger

Код для отображения приветствия в зависимости от времени суток на Blogger

Создания приветствия на блоге Blogger, которое будет меняться в зависимости от времени суток. Приведу несколько примеров, как это можно реализовать.

Автоматические приветствия на блоге — это простой и эффективный способ сделать сайт более дружелюбным для посетителей. Приветствие показывает, что блог «живой» и обращается к читателю персонально в зависимости от времени суток. В этой статье мы разберём, как его добавить на Blogger.

Зачем использовать автоматическое приветствие?

• Персонализация контента — даже маленький элемент персонализации делает блог более живым и интересным.
• Привлечение внимания — яркое приветствие с красивым дизайном (например, в речевом облачке) привлекает читателей.

Как работает автоматическое приветствие?

Суть проста: скрипт проверяет текущее время на устройстве посетителя и выводит соответствующее сообщение:

• Утро (например, 4:00 — 12:00) → «Доброе утро!»
• День (12:00 — 18:00) → «Добрый день!»
• Вечер (18:00 — 23:00) → «Добрый вечер!»
• Ночь (0:00 — 4:00) → «Доброй ночи!»

Дополнительно можно добавлять дни недели, текущее время и т.д., чтобы придать блогу более динамичный вид.

Ниже представлены два примера скриптов:

• первый – в "речевом облачке",
• второй – с блога Советы начинающим блоггерам

Оба можно вставить в гаджет HTML/JavaScript  на Blogger, например в боковую колонку (sidebar section).

Показать статью

Пример рабочего скрипта в "речевом облачке"

<div class="speech-bubble" id="greeting-box"></div>

<script>
  (function() {
    var today = new Date();
    var hours = today.getHours();
    var minutes = today.getMinutes().toString().padStart(2, "0");
    var day = today.getDate().toString().padStart(2, "0");
    var monthNames = [
      "января","февраля","марта","апреля","мая","июня",
      "июля","августа","сентября","октября","ноября","декабря"
    ];
    var month = monthNames[today.getMonth()];
    var year = today.getFullYear();

    var text = "";

    if (hours >= 8 && hours < 12) {
      text += "<div class='line'>Доброе утро!</div>";
    } else if (hours >= 12 && hours < 18) {
      text += "<div class='line'>Добрый день!</div>";
    } else if (hours >= 18 && hours <= 23) {
      text += "<div class='line'>Добрый вечер!</div>";
    } else if (hours >= 0 && hours < 4) {
      text += "<div class='line'>Доброй ночи!</div>";
    } else if (hours >= 4 && hours < 8) {
      text += "<div class='line'>Доброе утро!</div>";
    }

    text += "<div class='line small'>Сегодня " + day + " " + month + " " + year + " г., " + hours + ":" + minutes + "</div>";

    document.write(text);
  })();
</script>

<style>
.speech-bubble {
  position: relative;
  text-align: center;
  margin: 15px auto;
  padding: 10px;
  background: #FFEEBC;
  border: 1px solid #FFCB8C;
  border-radius: 10px;
  box-shadow: 0.3em 0.3em 0.6em -0.3em rgba(0,0,6,0.3);
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  display: inline-block;
  max-width: 90%;
  color: SteelBlue;
}

.speech-bubble:after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 20px;
  border-width: 12px 12px 0;
  border-style: solid;
  border-color: #FFEEBC transparent transparent transparent;
}

.speech-bubble:before {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 19px;
  border-width: 14px 14px 0;
  border-style: solid;
  border-color: #FFCB8C transparent transparent transparent;
}

.line {
  margin: 4px 0;
}

.small {
  font-size: 11px;
  color: #4682B4;
}
</style>

Пример рабочего скрипта, который я взял с блога Советы начинающим блоггерам и немного его доработал.

💬 Этот код выводит динамическое приветствие, которое меняется в зависимости от времени суток. Например:

• Доброе утро, день, вечер или ночь
• Текущий день недели (например, среда)
• Текущая дата (например, 3 сентября 2025 года)

Это можно использовать, чтобы персонализировать блог и добавить ощущение "живого общения" с посетителем.

<span style="color: #b33c16;font-size: larger;">
  <script type="text/javascript">
    // Приветствие
    const day = new Date();
    const hour = day.getHours();
    let greeting = "";
    if (hour >= 5 && hour < 12)
      greeting = "Доброе утро";
    else if (hour >= 12 && hour < 18)
      greeting = "Добрый день";
    else if (hour >= 18 && hour < 24)
      greeting = "Добрый вечер";
    else
      greeting = "Доброй ночи";
    document.write(greeting + "!");
  </script>

  <br/> Сегодня<br/>

  <script type="text/javascript">
    // Дата
    const d = new Date();
    const days = ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"];
    const months = ["января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря"];
    const dateStr = days[d.getDay()] + " " + d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear() + " г.";
    document.write(dateStr);
  </script>
</span>

🟩 Не устанавливайте одновременно оба скрипта, они могут конфликтовать между собой и неправильно отражать текущие время и дату.