Гаджет текущей даты и времени для блоггер



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

Или в шаблоне изменить HTML (сейчас "тема") в тело поста слева/справа, выше/ниже строки <data:post.body/>. Почитайте статью Оформление, выравнивание, убрать под кат текст в блоге; раздел Выравнивание текста.

При переходе на страницу сообщения, посетители будут видеть время и текущую дату. Пример на скриншоте
Скрипт для установки гаджета в макет блога

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

<script type="text/javascript">
function clock() {
var d = new Date();
var month_num = d.getMonth()
var day = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();

month=new Array("января", "февраля", "марта", "апреля", "мая", "июня",
"июля", "августа", "сентября", "октября", "ноября", "декабря");

if (day <= 9) day = "0" + day;
if (hours <= 9) hours = "0" + hours;
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;

date_time = "" + day + " " + month[month_num] + " " + d.getFullYear() +
" г.&nbsp;&nbsp;&nbsp;"+ hours + ":" + minutes + ":" + seconds;
if (document.layers) {
 document.layers.doc_time.document.write(date_time);
 document.layers.doc_time.document.close();
}
else document.getElementById("doc_time").innerHTML = date_time;
 setTimeout("clock()", 1000);
}
</script>
<script type="text/javascript">
 clock();
</script>


Этот небольшой HTML код сохраните в макете (вкладка дизайн), где Вы хотите видеть гаджет времени и даты.

<span id="doc_time">
 Дата и время
</span>

Слова "дата и время" можно удалить из кода. Размер и цвет шрифта будут соответствовать настройкам в конструкторе тем. При желании измените настройки, используя CSS.

<style>
#HTML10{
background: #eeeeee;
font-size: 14px; color:#0e5198;
height: 15px;
}</style>

CSS добавьте отдельным гаджетом или лучше под кодом времени и даты, второй небольшой HTML код. В адресной строке посмотрите ID виджета и измените в коде HTML10, на свой.

Это самый простой код CSS. Можно добавить рамочку с фоном и без, в меню "содержание блога", ярлык Рамки, на любой вкус.

На сегодня вся информация, буду благодарна за поддержку в соц сетях. На вопросы отвечу в комментариях или работает контактная форма. Всем всего доброго.

Новый пост по теме:   Виджет времени с датой и днем недели для блоггер;

Рекомендую статьи по теме:

TEXT.RU - 100.00%




Автор статьи ✎ Olga Protasova Выпуск ✹ 11/10/2017 Ярлыки ►


Открыть комментарии →

7 коммент. :

  1. Ольга, большое спасибо за отличную и очень обширную подборку советов и дополнений для blogger и вообще для сайтов! Ваши часики и дата очень пригодились. У меня стоял до этого другой вариант, но AdBlock скрывал их, а у Вас смотрю нет ) + была внешняя ссылка. Хорошо бы ещё день недели здесь показывать из 2-х символов, а секунды можно бы и убрать. Они на сайте не очень актуальны.
    С Вашего позволения, блоггеры не всегда хорошо знакомы с кодом, я не всегда понимаю, что именно имеется в виду. На этой странице я несколько раз вчитывался, пока до меня дошло, что нужно использовать 2 гаджета. Можно об этом было упомянуть вначале. Я не очень понимаю, что Вы имеете в виду под словом макет, видимо вкладку Дизайн блога и первый код разместил в футере, а второй в гаджете в том месте, где должны быть часики. Дальше, я не понял фразы "В адресной строке посмотрите ID виджета". В какой адресной строке? В шаблоне я посмотрел ID виджета и заменил HTML10 на свой. Нам надо фоном выделять в коде элемент, который нужно заменить, тогда нам, тупым становится понятней )) Ещё раз спасибо!

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Алексей. Немного внесла изменения в статью, думаю, так будет понятнее. Но я всегда на связи, так что по любым вопросам обращайтесь.

      Посмотреть ID виджета в адресной строке: когда в дизайне нажимаете "изменить" гаджет, во вкладке сверху адресная строка. В конце адреса ID виджета.

      Вот ссылка на статью, там есть скриншот: goo.gl/DdXFwf или меню "содержание", ярлык "дизайн" статья 42.

      Удалить
  2. Ольга, спасибо за ответ. У меня при нажатии Изменить или Добавить гаджет появляется небольшое окно с именем страницы, но без адресной строки, видимо это от браузера зависит.
    Ещё понравилось, как у Вас оформлен раздел Содержание блога с полосой прокрутки, на мой взгляд - удобная форма навигации. Тоже хотелось бы такой )

    ОтветитьУдалить
    Ответы
    1. Алексей здравствуйте. Содержание блога-все статьи писала вручную, а прокрутку вставить легко. Вот ссылка на статью:

      http://www.bdblogov.ru/2013/08/scrolling-text.html

      или "содержание"-ярлык "гаджеты", статья 1.

      Удалить
    2. Здравствуйте, Ольга. Спасибо! Достаточно ссылки. Но у Вас ещё и оформление классное! :) Я так понял, что один блок <div для всех пунктов.

      Удалить
    3. Алексей, правильно поняли. В редакторе сообщений перейти по вкладке HTML и вставить код в начале страницы, внизу закройте закрывающим div.

      Оформление, это нумерованный список плюс CSS.

      Удалить
    4. Спасибо за подробные ответы, Ольга. Подписался в G+ на русском и даже объявление своё поставил ) Извините за вопросы дилетантские, мог бы и в коде у Вас посмотреть, всё время забываю, не привык ещё )

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *