Приветствую всех. Календарь на странице блога, как элемент дизайна, почему бы и нет. Сегодня хочу предложить вам простой календарь с отображение дня недели и текущей датой. Сразу оговариваюсь - в нём нет никаких сторонних ссылок на сомнительный сайты. Так что смело можно брать для реализации.
Вы легко сможете изменить его внешний вид, а он точно будет выводить текущую дату. Скопируйте приведённый код и установите его в этом редакторе для просмотра. Потом рассмотрим, что можно поменять на свой вкус и цвет, как говориться.
Измените при необходимости высоту и ширину самого календаря height: 200px; .width: 200px;}
Отмеченные участки синего цвета определяют стили и цвет границ и тени.
Участок жёлтого цвета - размеры и цвет текста дня недели.
Розовый цвет - стили числа текущей даты (цвет, размер ши стиль шрифта, тень текста).
background: #18477d; общий фон
Готовый код устанавливается обычным способом в гаджет HTML/JavaScript в нужном месте макета блога.
Всем добра и до встречи.

Вы легко сможете изменить его внешний вид, а он точно будет выводить текущую дату. Скопируйте приведённый код и установите его в этом редакторе для просмотра. Потом рассмотрим, что можно поменять на свой вкус и цвет, как говориться.
<style>
.pcalendar {
height: 200px;
position: relative;
margin: 0 auto;
width: 200px;}
.calendario { text-align: center;}
.wcalendar {
height: 150px;
margin-bottom: 24px;
width: 190px;
}
#ncalendar {
background: #18477d;
background: linear-gradient(to bottom, #18477d 0%,#2277bd 50%,#1b6aad 51%,#60a9e3 100%);
font-family: 'Hammersmith One', sans-serif;
text-shadow: 0 0 9px #fff;
border-left:4px solid #ccc;
border-right:4px solid #ccc;
border-top:4px solid #ccc;
border-radius: 35px 35px 0 0;
color: #ddd !important;
text-decoration:none !important;
font-size: 20px;
letter-spacing:0px;
font-weight:bold;
line-height: 35px;
height: 40px;
position: relative;
text-transform: lowercase;
}
#gcalendar {
border-radius: 0 0 35px 35px;
border:0px solid #565656;
background:url(https://lh3.googleusercontent.com/-DF59fnpaHhM/UxmbsKmhEkI/AAAAAAAAmLs/Or6qqgj3Xkg/s200/fondo%2520calendario.png) no-repeat center bottom;
color: #0C74B6;
font-family: 'Hammersmith One', sans-serif;
font-size: 130px;
text-shadow: -5px 0 #cdcdcd, 0 1px #000, 0px 0 #cdcdcd, 0 -1px #000, -1px 1px 2px #000;
height:150px;
line-height: 120px;
}
</style>
<div class="pcalendar"><div class="calendario"><div class="wcalendar"><div id="ncalendar"></div><div id="gcalendar"></div></div></div></div>
<link href="http://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet" type="text/css" />
<script>
(function() {
var date = new Date(),
weekday = ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"];
document.getElementById('ncalendar').innerHTML = weekday[date.getDay()];
document.getElementById('gcalendar').innerHTML = date.getDate();}) ();
</script>
.pcalendar {
height: 200px;
position: relative;
margin: 0 auto;
width: 200px;}
.calendario { text-align: center;}
.wcalendar {
height: 150px;
margin-bottom: 24px;
width: 190px;
}
#ncalendar {
background: #18477d;
background: linear-gradient(to bottom, #18477d 0%,#2277bd 50%,#1b6aad 51%,#60a9e3 100%);
font-family: 'Hammersmith One', sans-serif;
text-shadow: 0 0 9px #fff;
border-left:4px solid #ccc;
border-right:4px solid #ccc;
border-top:4px solid #ccc;
border-radius: 35px 35px 0 0;
color: #ddd !important;
text-decoration:none !important;
font-size: 20px;
letter-spacing:0px;
font-weight:bold;
line-height: 35px;
height: 40px;
position: relative;
text-transform: lowercase;
}
#gcalendar {
border-radius: 0 0 35px 35px;
border:0px solid #565656;
background:url(https://lh3.googleusercontent.com/-DF59fnpaHhM/UxmbsKmhEkI/AAAAAAAAmLs/Or6qqgj3Xkg/s200/fondo%2520calendario.png) no-repeat center bottom;
color: #0C74B6;
font-family: 'Hammersmith One', sans-serif;
font-size: 130px;
text-shadow: -5px 0 #cdcdcd, 0 1px #000, 0px 0 #cdcdcd, 0 -1px #000, -1px 1px 2px #000;
height:150px;
line-height: 120px;
}
</style>
<div class="pcalendar"><div class="calendario"><div class="wcalendar"><div id="ncalendar"></div><div id="gcalendar"></div></div></div></div>
<link href="http://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet" type="text/css" />
<script>
(function() {
var date = new Date(),
weekday = ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"];
document.getElementById('ncalendar').innerHTML = weekday[date.getDay()];
document.getElementById('gcalendar').innerHTML = date.getDate();}) ();
</script>
Измените при необходимости высоту и ширину самого календаря height: 200px; .width: 200px;}
Отмеченные участки синего цвета определяют стили и цвет границ и тени.
Участок жёлтого цвета - размеры и цвет текста дня недели.
Розовый цвет - стили числа текущей даты (цвет, размер ши стиль шрифта, тень текста).
background: #18477d; общий фон
Готовый код устанавливается обычным способом в гаджет HTML/JavaScript в нужном месте макета блога.
Всем добра и до встречи.
хотите оформить подписку на новые шпаргалки
Интересно, Виктория! Попробую установить на тестовый блог. Спасибо!
ОтветитьУдалитьИрана, главное без сторонних ссылок. Просто код.
УдалитьЗдравствуй,Вика! Спасибо за очередную красоту! Поставила у себя в блоге https://ch-um2.blogspot.com/ цвет поменяла,а вот размер не получился,когда делаю меньше накладывается на соседний гаджет.
ОтветитьУдалитьЗоя, посмотрела. Он у тебя и так отлично смотрится. Позже поиграюсь сама. Вроде меняла у себя на тестовом нормально было. Зоя, смотри, тут нужно со многими стилями играться - шрифт, высота строк и прочее. Вот уменьшила все и встаёт нормально. Сравни с предложенным кодом в статье
ОтветитьУдалить.pcalendar {
height: 150px;
position: relative;
margin: 0 auto;
width: 150px;}
.calendario { text-align: center;}
.wcalendar {
height: 150px;
margin-bottom: 24px;
width: 190px;
}
#ncalendar {
background: #18477d;
background: linear-gradient(to bottom, #18477d 0%,#2277bd 50%,#1b6aad 51%,#60a9e3 100%);
font-family: 'Hammersmith One', sans-serif;
text-shadow: 0 0 9px #fff;
border-left:4px solid #ccc;
border-right:4px solid #ccc;
border-top:4px solid #ccc;
border-radius: 35px 35px 0 0;
color: #ddd !important;
text-decoration:none !important;
font-size: 20px;
letter-spacing:0px;
font-weight:bold;
line-height: 30px;
height: 30px;
position: relative;
text-transform: lowercase;
}
#gcalendar {
border-radius: 0 0 35px 35px;
border:0px solid #565656;
background:url(https://lh3.googleusercontent.com/-DF59fnpaHhM/UxmbsKmhEkI/AAAAAAAAmLs/Or6qqgj3Xkg/s200/fondo%2520calendario.png) no-repeat center bottom;
color: #0C74B6;
font-family: 'Hammersmith One', sans-serif;
font-size: 100px;
text-shadow: -5px 0 #cdcdcd, 0 1px #000, 0px 0 #cdcdcd, 0 -1px #000, -1px 1px 2px #000;
height:130px;
line-height: 110px;
}
Здесь результат https://bvd-2.blogspot.com/
Спасибо,моя хорошая,поменьше мне больше нравиться,все получилось)
УдалитьСпасибо! Я тоже воспользовалась этим кодом, но сначала по невнимательности моей ничего не получилось, уже потом разобралась, что это часть кода... ))))
УдалитьУх ты, красота!!! Спасибо, Вика! 💋💋💋
ОтветитьУдалитьЕлена, да это я выделила все стили, которые можно править на свой вкус и желания. Пользуйтесь. Можно немного и тени уменьшить все вот эти значения border-left:4px
УдалитьПользуйтесь.
Жутко любопытно! Но пока вынужден использовать рекомендации в качестве шарад для разгадывания.
ОтветитьУдалитьСемён, здесь всё просто. Копируете целиком код, заходите во вкладку Дизайн.Справа вверху есть блок ДОБАВИТЬ ГАДЖЕТ. В открывшемся списке Из всех предложенных гаджетов выбираете HTML/JavaScript он именно так и называется. И вставляете в него этот код. Затем просто - сохранить.
УдалитьДорогая Виктория, я не смогла изменить высоту и ширину календаря, (height: 200px; .width: 200px;} ) котором я установила в мой блог peredkaminom.blogspot.com. Изменяю от 200 до 150 пикселей, но ничего не происходит. Пожалуйста, предоставьте помощь или инструкции.
ОтветитьУдалитьP.S/
Я прочитала ваш ответ выше и скопировала код. Спасибо.
Пепа, а я не вижу календаря на твоём блоге. Не поняла, а сейчас - то получилось?
ОтветитьУдалитьВика, здравствуй, календарь виден только на страницах постов. Я что то сделала.
УдалитьПепа, дорогая. так у тебя сторонний шаблон. У них там свои прибамбасы. Видимо применены условные теги к гаджету HTML/JavaScript, которые запрещают отображать их на главной. Тут уж ничего не поделаешь. Кстати, можешь набрать в поиске для информации - что такое условные теги в блоггер. У меня такого поста нет, так как много об этом написано.
ОтветитьУдалитьЗнаю это. Я сама так и сделала. Скрыла календарь с главной страницы. И знаю, как это сделать. Проблема заключалась в редактировании кода календаря. Мне удалось изменить это с твоей помощью. И именно поэтому я благодарю.
УдалитьА...Поняла, Пепа. Я рада, что всё получилось.
ОтветитьУдалитьа как сделать,чтобы просто буковками в строчку,без фоновой картинки?К примеру "6 января,понедельник"
ОтветитьУдалитьпочему-то когда код отсюда вставляю,не становится по центру
ОтветитьУдалитьМонетка, картинка в строке убери background:urlundefinedhttps://lh3.googleusercontent.com/-DF59fnpaHhM/UxmbsKmhEkI/AAAAAAAAmLs/Or6qqgj3Xkg/s200/fondo%2520calendario.png)
ОтветитьУдалитьА насчёт центра читай комментарии выше.
прочитала,и твой код вставляю,и сама значения меняю,все равно не по центру,видимо из-за того,что шаблон сторонний
ОтветитьУдалитьНе думаю. С настройками нужно играться.
ОтветитьУдалитьну в редакторе отличненько,все по центру,а в шаблоне не получается у меня
ОтветитьУдалитьНу и не парься уже с ним. У тебя там хватает всего.
ОтветитьУдалитьСкажите, а календарь без месяца?
ОтветитьУдалитьИрина, этот да, без месяца. Если хотите можно установить часы с точным временем и календарём. Вот вариант http://www.shpargalochki.ru/2021/06/tsifpovye-chacy-na-cssz-i-jquery.html
ОтветитьУдалитьИли вот такой простенький http://www.shpargalochki.ru/2016/04/prostye-chasy-v-bloge.html
Вика, здравствуйте. Не могу войти в панель инструментов в своем блоге, все время выскакивает список чтения. Подскажите, что я сделала не так. Вчера вставила календарь, все хорошо, задала вам вопрос (он выше), а сегодня хотела попробовать новый вариант календаря но, не смогла зайти в панель инструментов.
ОтветитьУдалитьИрина, календарь не имеет ни какого отношения к этому Войдите в БЛоггер по ссылке https://www.blogger.com/home. В правом верху выбираете название блога Выбираем название блога, нажимаем по нему и открывается слева панель управления блогом.
ОтветитьУдалитьСправа от названия блога нажимаем на черный треугольничек и откроется админка блога
Или же заходим в свой аккаунт гугл, справа на панели инструментов прокручиваем окно вниз и находим иконку Blogger, нажимаем по ней и попадаем в панель инструментов.
Вероятно вы просматривали список чтения, так с него и закрыли блог. Действуйте кака я описала
В левом верхнем углу выбираете название блога
ОтветитьУдалитьИрина, пробуйте ещё по ссылке https://draft.blogger.com/
ОтветитьУдалитьСпасибо вам большое, получилось.
ОтветитьУдалитьИрина, пожалуйста. Как считаете, в чём проблемма была. Обращайтесь.
ОтветитьУдалить