Притурки. Календар с текуща дата за Blogger

Здравейте, приятели! Поздрави на всички. Календар в страницата на блога като елемент на дизайна? Защо не? Днес искам да ви предложа обикновен календар с показване на деня от седмицата и текущата дата.

Веднага се уговарям, че в кода му няма хипервръзки на трети страни към съмнителни сайтове. Така че можете спокойно да предприемете неговата реализация. Можете лесно да промените външния му вид, а той точно ще показва текущата дата. Копирайте кода и го инсталирайте в този HTML редактор от главното меню за разглеждане. После ще поясня какво може да се промени, за да съответства на вашия вкус и цвят, както се казва.

Код

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYTljcuK0Ea19DhpfedoZk9EsUbeS_3dtTsNyKLGXo8W1tEiejxSfOzZdMjSyVg3iL_Qtd8Wy5RA-F1Z06V57nmZMF_uCMaQgKEkCgbkyAFBBFWln1CxpwO9Wbvl019SV8UKMj9uMnQ24/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>

Уточнения

➤Ако е необходимо, променете височината и ширината на самия календар: 200px; .width: 200px;};

➤Маркираните зони със син цвят определят стиловете и цветовете на границите и сенките;

➤С жълт цвят са маркирани размерът и цветът на текста на деня от седмицата;

➤С розов цвят - стилове на текущата дата, като цвят, размер, стил на шрифта, текстова сянка;

➤background: # 18477d; е цветът на общия фон;

➤Редактираният код се инсталира по обичайния начин в притурката HTML / JavaScript на желаното място в оформлението на блога;

Ако притурките в страничната колона на блога ви са вече достатъчно много и я правят така, че да изглежда доста „дълга“, разваляйки общия вид на главната страница, направете така, че календарът да се показва само на страниците на публикациите.

Ще съм благодарна, ако оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

Здраве за всички вас! Не забравяйте да правите добро на други хора!