Как добавить календарь в блог или веб-страницу

Календарь для блога Blogger

Открыв компьютер под управлением Windows, вы всегда можете узнать текущую дату и время,которые видны в правом нижнем углу панели приложения . Подобные функции также существуют в других операционных системах. Это не означает, что вы не можете добавить календарь на веб-страницу для автоматического отображения дня месяца и недели .

В этом посте мы увидим, как создать код календаря, который можно вставить на любую веб-страницу, в платформы Blogger и Wordpress, а также в другие, которые поддерживают javascript. Этот календарь также можно настроить в семействе шрифтов с помощью Google Fonts .

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

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: 30px;
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuHx4WIeXRhDOLdma-lk8irA0Ip7vtNlMBWqCh9xOyWXSksSkw6aPNV7MOtdDdHjTsbnZ0p97mf2zrdHsxk6avR3YNjmrDvkBHp4DJ4bqWqk3BeVfCiEzP_DWr3r31aJe_Rncn1hUNxk4/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>

Пример как будет работать календарь приведён ниже

Для того, чтобы установить его на Blogger вы идете в Дизайн-> Добавить гаджет -> HTML / Javascript затем вставить в боковую панель или вставьте код на странице в режиме HTML. как поеазано в примере выше. Строка кода взята из Google Fonts для семейства шрифта Hammersmith One, была выделена желтым цветом и может быть заменена другим, следуя инструкции поста указанный выше. Для установки на Wordpress зайдите в Виджеты -> Текст , вставьте код и положение в макете.

Параметры красного цвета могут быть настроены по желанию и связаны с размером календаря ( 200 x 200 пикселей), цветом фона (# 18477d ;), стилем границы , фоновым изображением , URL которого окрашен в фиолетовый цвет. ' округление . градиент и затенения

Cancel