Обновлено: 07.10.2019 года. Всем здравствуйте. Простой в установке и настройке скрипт времени и даты для наших блогов. Аккуратные часики и дата, можно вставить добавить гаджет в любое место макета блога.
Или в шаблоне изменить HTML (сейчас "тема") в тело поста слева/справа, выше/ниже строки <data:post.body/>. Почитайте статью Оформление, выравнивание, убрать под кат текст в блоге; раздел Выравнивание текста.
При переходе на страницу сообщения, посетители будут видеть время и текущую дату. Пример на скриншоте
Или в шаблоне изменить 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() +
" г. "+ 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. Можно добавить рамочку с фоном и без, в меню "содержание блога", ярлык Рамки, на любой вкус.
Это самый простой код CSS. Можно добавить рамочку с фоном и без, в меню "содержание блога", ярлык Рамки, на любой вкус.
На сегодня вся информация, буду благодарна за поддержку в соц сетях. На вопросы отвечу в комментариях или работает контактная форма. Всем всего доброго.
Новый пост по теме: Виджет времени с датой и днем недели для блоггер;
Рекомендую статьи по теме:
Новый пост по теме: Виджет времени с датой и днем недели для блоггер;
Рекомендую статьи по теме:
Рекомендуемый контент:
Ольга, большое спасибо за отличную и очень обширную подборку советов и дополнений для blogger и вообще для сайтов! Ваши часики и дата очень пригодились. У меня стоял до этого другой вариант, но AdBlock скрывал их, а у Вас смотрю нет ) + была внешняя ссылка. Хорошо бы ещё день недели здесь показывать из 2-х символов, а секунды можно бы и убрать. Они на сайте не очень актуальны.
ОтветитьУдалитьС Вашего позволения, блоггеры не всегда хорошо знакомы с кодом, я не всегда понимаю, что именно имеется в виду. На этой странице я несколько раз вчитывался, пока до меня дошло, что нужно использовать 2 гаджета. Можно об этом было упомянуть вначале. Я не очень понимаю, что Вы имеете в виду под словом макет, видимо вкладку Дизайн блога и первый код разместил в футере, а второй в гаджете в том месте, где должны быть часики. Дальше, я не понял фразы "В адресной строке посмотрите ID виджета". В какой адресной строке? В шаблоне я посмотрел ID виджета и заменил HTML10 на свой. Нам надо фоном выделять в коде элемент, который нужно заменить, тогда нам, тупым становится понятней )) Ещё раз спасибо!
Здравствуйте Алексей. Немного внесла изменения в статью, думаю, так будет понятнее. Но я всегда на связи, так что по любым вопросам обращайтесь.
УдалитьПосмотреть ID виджета в адресной строке: когда в дизайне нажимаете "изменить" гаджет, во вкладке сверху адресная строка. В конце адреса ID виджета.
Вот ссылка на статью, там есть скриншот: goo.gl/DdXFwf или меню "содержание", ярлык "дизайн" статья 42.
Ольга, спасибо за ответ. У меня при нажатии Изменить или Добавить гаджет появляется небольшое окно с именем страницы, но без адресной строки, видимо это от браузера зависит.
ОтветитьУдалитьЕщё понравилось, как у Вас оформлен раздел Содержание блога с полосой прокрутки, на мой взгляд - удобная форма навигации. Тоже хотелось бы такой )
Алексей здравствуйте. Содержание блога-все статьи писала вручную, а прокрутку вставить легко. Вот ссылка на статью:
Удалитьhttp://www.bdblogov.ru/2013/08/scrolling-text.html
или "содержание"-ярлык "гаджеты", статья 1.
Здравствуйте, Ольга. Спасибо! Достаточно ссылки. Но у Вас ещё и оформление классное! :) Я так понял, что один блок <div для всех пунктов.
УдалитьАлексей, правильно поняли. В редакторе сообщений перейти по вкладке HTML и вставить код в начале страницы, внизу закройте закрывающим div.
УдалитьОформление, это нумерованный список плюс CSS.
Спасибо за подробные ответы, Ольга. Подписался в G+ на русском и даже объявление своё поставил ) Извините за вопросы дилетантские, мог бы и в коде у Вас посмотреть, всё время забываю, не привык ещё )
Удалить