Дата статьи в виде календаря на CSS на Blogger

Alen Grakalic показал как сделать дату в виде календаря с помощью свойств CSS. Вот только в IE картинка будет не столь удачна. Ранее уже было показано как создать аналогичную форму, но с использованием фонового изображения. Образец.

Шаг 1. Сначала нужно разделить дату на слагаемые: месяц, день. Указываем в "Настройках"-"Форматирование"-"Формат даты в колонтитуле" 5/10/2011 (месяц/день/год).

Шаг 2. В "Дизайн"-"Изменить HTML", установив "Расширить шаблоны виджета", вместо:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
пишем
<div class='calefecha'>
<script>kalendar('<data:post.dateHeader/>');</script>
</div>

Шаг 3. После <head> добавляем скрипт
<script type='text/javascript'>
//<![CDATA[
  // LAS FECHAS DE LOS POSTS
  var mes=new Array();
  mes[1]="января"; mes[2]="февраля"; mes[3]="марта"; mes[4]="апреля"; mes[5]="мая"; mes[6]="июня";
  mes[7]="июля"; mes[8]="августа"; mes[9]="сентября"; mes[10]="октября"; mes[11]="ноября"; mes[12]="декабря";
  function kalendar(cual) {
    var verCero;
    var lafecha = cual.split('/');
    verCero=lafecha[1].substr(0,1); if (verCero == "0") { lafecha[1]=lafecha[1].substr(1) }
    var salida = lafecha[1]+"<em>"+mes[lafecha[0]]+"</em>";
document.write(salida);
  }
//]]>
</script>

Шаг 4. А теперь сам код CSS
.calefecha { 
  float: left;
  margin: 0px 10px 0px 0px;
  color: #000;
  background: #EDEDEF;
  background: -webkit-gradient(linear, left top, left bottom, from(#EDEDEF), to(#CCC)); 
  background: -moz-linear-gradient(top,  #EDEDEF,  #CCC); 
  font-family: Arial Black, Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding-top: 5px;
  position: relative;
  text-align: center;
  text-shadow: #FFF 0 1px 0;
  -moz-border-radius: 3px;
  -webkit-border-radius 3px;
  border-radius: 3px;
  font-size: 20px;
  line-height: 30px;
  width: 70px;
}
.calefecha em { 
  background: #04599A;
  background: -webkit-gradient(linear, left top, left bottom, from(#04599A), to(#00365A)); 
  background: -moz-linear-gradient(top,  #04599A,  #00365A); 
  color: #FFF;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-shadow: #00365A 0 -1px 0;
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top: 1px solid #00365A;
  line-height: 20px; 
  -moz-box-shadow: 0px 3px 4px #888;
  -webkit-box-shadow: 0px 3px 4px #888;
  box-shadow: 0px 3px 4px #888;
}
.calefecha:before, .calefecha:after { 
  background: #111;
  content:'';
  float: left;
  position: absolute;
  z-index: 1;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 1px 1px #FFF;
  -webkit-box-shadow: 0 1px 1px #FFF;
  box-shadow: 0 1px 1px #FFF;
  height: 6px;
  top: 4px;
  width: 6px;
  }
.calefecha:before{
  left:7px; 
}
.calefecha:after {
  right:7px; 
}
.calefecha em:before, .calefecha em:after { 
  background: #DADADA;
  background: -webkit-gradient(linear, left top, left bottom, from(#F1F1F1), to(#AAA)); 
  background: -moz-linear-gradient(top,  #F1F1F1,  #AAA); 
  content:'';
  float: left;
  position: absolute;
  z-index: 2;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  height: 10px;
  top: -3px;
  width: 2px;
  }
.calefecha em:before{
  left: 9px; 
}
.calefecha em:after{
  right: 9px; 
}
Rookee — инструменты для привлечения клиентов на сайт
в f t
наверх ↑

25 комментариев:

XaSeR
О, спасибо! Давно такое искал...
NMitra
Рада, что пригодилось.
XaSeR
Почему то на одном блоге работает, на другом нет...Не подскажите что не так? http://blog-b-class.blogspot.com/
XaSeR
Нет, это руки кривые, все заработало...Еще раз спасибо большое
Аль
Такой код не будет тормозить работу сайта?
NMitra
Скрипт очень простой.
NMitra
Тормозить не будет.
Andriy Nesterenko
Скрипт отлично работает. Единственный вопрос: можно ли сделать так, чтобы при переключении на другой язык (к примеру английский) название месяца также менялся на английский ?
NMitra
В скрипте

mes[1]="января"; mes[2]="февраля"; mes[3]="марта"; mes[4]="апреля"; ...

поменяйте на

mes[1]="January"; mes[2]="February"; mes[3]="March"; mes[4]="April"; ...
Morskaia
у меня не работает:(
NMitra
У вас два блога. На каком именно? Сделайте все изменения, описанные в статье, я посмотрю.
admin
Здраствуйте у меня такой вопрос
Как зделать остальние страници штоб на них можно било писать сообщения как на главной странице??
Я видел что так можно зделать опишите пожалуста по подробнее как ето зделать ???
Поскорей очень надо=)
NMitra
Похожий эффект позволяют сделать ярлыки http://shpargalkablog.ru/2011/03/yarlyki-blogger.html
Հրաչ
Здравствуйте, у меня ничего не получился.. что делать?
NMitra
На каком этапе? Сделайте, что сможете. Сообщите URL блога с внесёнными изменениями.
Հրաչ
Спасибо, получилось: Вот URL моего блог www.haymutq.ru
NMitra
Отлично. Я бы ещё ссылки ставила в сообщении. Например, с "Ծիծաղելի նկարներ (Մաս 2)" на "Ծիծաղելի նկարներ (Մաս 1)". Хорошо и для Google, и для посетителей.
Petit Bonheur
Сделала. Не отображается (
У меня скачаный шаблон, половину всего не могу в него вставить из-за этого (
http://emarketinginua2.blogspot.com
NMitra
Да, у вас классы не те. Разработчик мог многое из шаблона просто убрать, как это сделала я у себя.
Просто Юля
Здравствуйте! Подскажите, пожалуйста, что сделала не так? Выполнила все 4 шага, но не работает
NMitra
Здравствуйте, попробуйте поискать вторую строку
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Она может встречаться дважды - одна для компьютеров, вторая - для мобильных
Просто Юля
Искала, не нашла. Упоминание 'date-header' встречается в таких фрагментах:





и

/* Posts
----------------------------------------------- */
.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}
Просто Юля
Прошу прощения, но первый код не отобразился
Group description="Date Header" selector=".date-header"


/ Group
NMitra
Прошу прощения, только сейчас исходный код посмотрела. У вас дата убрана в атрибут, а значит разбить её на части будет проблематично.
Просто Юля
жаль... я так понимаю, придется обойтись без календаря... в любом случае, спасибо за ответ и внимание!