Простой календарь с текущей датой для Блоггер

Приветствую всех. Календарь на странице блога, как элемент дизайна, почему бы и нет. Сегодня хочу предложить вам простой календарь с отображение дня недели и текущей датой. Сразу оговариваюсь - в нём нет никаких сторонних ссылок на сомнительный сайты. Так что смело можно брать для реализации.

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

<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>

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

Готовый код устанавливается обычным способом в гаджет HTML/JavaScript в нужном месте макета блога.

Всем добра и до встречи. 

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :