Приложение 1: Дата

Управлять датой сообщения Blogger проще всего в окне "Дизайн" - в гаджете "Сообщения блога" кнопка "Изменить" - "Параметры страницы". Здесь можно установить её формат и наличие.

Для более плотной работы с датой, переходим на вкладку "Шаблон" (подробнее). Ниже представленные методы можно совмещать друг с другом.

Решение проблемы: если написать больше двух сообщений в день, дата публикации на Главной странице общая

Отображение даты сообщения на Главной странице

<b:if cond='data:post.dateHeader'>
 <h2 class='date-header'>
  <span>
   <data:post.dateHeader/>
  </span>
 </h2>
</b:if>

<b:if cond='data:post.dateHeader'>
  <script>var data1 = '<data:post.dateHeader/>';</script>
  <h2 class='date-header'>
<data:post.dateHeader/>
</h2>
<b:else/>
  <h2 class='date-header'>
    <script>document.write(data1);</script>
  </h2>
</b:if>

Не показывать дату сообщения на определённой странице

<b:if cond='data:post.dateHeader'>
 <h2 class='date-header'>
  <span>
   <data:post.dateHeader/>
  </span>
 </h2>
</b:if>

<b:if cond='data:post.dateHeader'>
 <b:if cond='data:post.url != "http://адрес_внутренней_страницы.html"'>
  <h2 class='date-header'>
   <span>
    <data:post.dateHeader/>
   </span>
  </h2>
 </b:if>
</b:if>

Дата после содержимого статьи

Шаг.1

<b:if cond='data:post.dateHeader'>
      <h2 class='date-header'>
       <span>
        <data:post.dateHeader/>
       </span>
      </h2>
</b:if>

Шаг.2

<div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/>
 <!-- clear for photos floats -->
    </div>

<div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/>
 <!-- clear for photos floats -->
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'>
          <span>
            <data:post.dateHeader/>
          </span>
        </h2>
      </b:if>
    </div>

Как изменить стиль CSS даты

Данный код отвечает за шрифт и цвет данного элемента.

h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}

Оптимизация

Если обратиться к статье "Оптимизация заголовков h1...", то были сделаны дополнительные действия. Сначала нужно произвести изменения, описанные здесь. Затем в коде date-header вхождения h2 заменить на p, с указанием верного микроформата. А именно

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

на

<p class='updated'><span><data:post.dateHeader/></span></p>

И CSS стиль, при его наличии:

h2.date-header {...}

заменить на

p.updated {...}

Изменить дизайн даты Blogger.

Шаг 1. Устанавливаем формат даты на вкладке "Дизайн" - "Сообщения блога" - "Изменить" - "Параметр страницы сообщения" - первый флажок: 5/10/2011 (месяц/день/год).

Шаг 2. В "Шаблон" меняем код:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

на

<div class='updated'>
<script>kalendar('<data:post.dateHeader/>');</script>
</div>

Шаг 3. После <head> добавляем скрипт, который разделит дату на несколько составляющих:

<script type='text/javascript'>
//<![CDATA[
  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 = "<div>"+lafecha[1]+"</div>"+mes[lafecha[0]]+"<br/>"+lafecha[2];
document.write(salida);
  }
//]]>
</script>

Шаг 4. В некоторых шаблонах нужно убрать строку:

.date-posts {
  clear: both;
}

Шаг 5. Затем перед ]]></b:skin> пишем любой подходящий по дизайну CSS. Например, так (образец):

.updated {
  float: left; 
  padding: 3px; 
  text-align: center;
  background: -moz-radial-gradient(10px 30px,#FFF, rgba(128,128,128,.3));
  background: -ms-radial-gradient(10px 30px,#FFF, rgba(128,128,128,.3));
  background: -o-radial-gradient(10px 30px,#FFF, rgba(128,128,128,.3));
  background: -webkit-radial-gradient(10px 30px,#FFF, rgba(128,128,128,.3));
  border-radius: 3px;
  margin: -7px 5px 7px -70px;}

.updated div {
  float: left;
  border-right: 1px solid #ccc;
  padding: 0 3px 0 0;
  font-size: 20px;
  margin-right: 3px;
  line-height: 1.8;}

С двумя полями дня/месяца.

Шаг 3. Cкрипт будет выглядеть как:

<script type='text/javascript'>
//<![CDATA[
  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 = "<em>"+mes[lafecha[0]]+"<em>"+lafecha[1];
document.write(salida);
  }
//]]>
</script>

Шаг 5. А в CSS стиль добавим фоновый рисунок (пример):

.updated {
  float: left;
  width: 46px;
  height: 49px;
  margin: 0 10px 0 0;
  text-align: center;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG-VVPVYJsVXZCBm3lgdX5PNroS9sVuj4RhQs2CFYf6gW6LdLkvkHNODRHN0lCvJp6zKlmcX14w-v0XajlERsDREbtcBVMbyao0tyuciv026mseBEMo8JPudrZpEzob4rKBcHei_4RvxxG/s1600/Icalfondom101.gif);
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size: 22px;}

.updated em {display: block; font-size: 14px; padding-top: 1px;}

Можно сделать отображение даты в виде календаря и без использования фоновых картинок, но не менее привлекательном виде.

Только день публикации сообщения.

Шаг 3. Скрипт:

<script type='text/javascript'>
//<![CDATA[
function kalendar (cual){
  var lafecha = cual.split('/');
  fday = lafecha[1];
  document.write(fday);
}
//]]></script>

Шаг 5. Вот CSS (пример):

.updated {
  float: left;
  width: 47px;
  height: 50px;
  margin: 15px 10px 0px -23px;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWUvBxjnxiR7sYSjFDfgxYKths17UaM7Mf4x0nt2lLf9g33T9Y14xOGMPnMuXibFFkxqY1izunZcxBDEFW-40VpNlj8wwT1jvHd48-eSkblL3uyGzARxc24SAm7Z98YIhWwT-L5cw8OZUx/s1600/Icalfondom303.gif);
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size: 30px;
  padding: 0 0 0 3px;
  letter-spacing: 7px;}

Шаг 5. Или так (пример):

.updated {
  float: left;
  width: 43px;
  height: 50px;
  margin: -10px 10px 0px -30px;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgduGS8yTIs9NUDvPoiECNzA3ntit-mor9Xxr2Y6iCMp68ilrvTaN6tHghf8d8SlOjYbnLg5OinFRYEastA8sqwV7dOLIPXO-TdQt5wZQk309pPw196W9j15n1L1bQGyGZnd0kEunhO3xga/s1600/Icalfondom305.gif);
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size: 30px;
  padding: 4px 0 0 7px;}