Красивая дата в Blogger'е

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

Из каких-то своих соображений хостер усложняет блогерам жизнь. Из-за этого многие вещи приходится делать через черный ход в медицинских перчатках :] Это своего рода интелектуальная игра. Или ты сделаешь Blogger'а, или он — тебя. Временами я принимаю участие в данной забаве. Тогда в муках творчества рождаются вещи, которых так не хватает в Blogger'е. Признаюсь честно, положительный результат получается не всегда :[

Сегодня я хочу рассказать о хаке, результат работы которого изображен на рисунке. На каком-то из блогов я однажды увидел такое оформление даты публикации. Мне понравилось и я захотел такую красоту в свой блог. И сегодня у меня наконец-то дошли руки до ее реализации. Рассказываю.

Конечно же реализован хак на JavaScript. Другого выбора нет.

Для достижения цели немножко покорежим код шаблона. (Перед началом экспериментов настоятельно рекомендую сделать резервную копию!) Ищем в коде строку "post.dateHeader". Поиск доставит нас к примерно следующему кусочку кода:

<data:adStart/>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == "item"'>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:loop>
<data:adEnd/>

Так как в данной интерпритации дата должна выводиться для каждой публикации, уберем условие. Вот так:

<data:adStart/>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == "item"'>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:loop>
<data:adEnd/>

Т.к. нам нужно обработать дату прежде, чем показать ее на странице, а воспользоваться объектами Blogger'а нельзя, то нужно как-то дату отметить для дальнейшей обработки. Сделаем это следующим образом:

<data:adStart/>
  <b:loop values='data:posts' var='post'>
    <span style='float:left; margin:0 20px 0 10px;'><center><h2 class='date-header'><div class='cooldate'><data:post.dateHeader/></div></h2></center></span>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == "item"'>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:loop>
<data:adEnd/>

Span служит для выравнивания даты в тексте сообщения, center — для выравнивания элементов даты по центру, div с классом — непосредственно для идентификации.

Теперь можно вставить скрипт, который будет представлять дату в нужном формате:

<script type='text/javascript'>
Months  = new Array ('января','февраля', 'марта', 'апреля', 
    'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря');
var alltags=document.getElementsByTagName("*");
for (i=0; i<alltags.length; i++){
  if (alltags[i].className=="cooldate"){
    var s = alltags[i].innerHTML;
    var day = s.substr(0,2);
    if(day.substr(0,1)=='0') day = day.substr(1,1);
    var month = s.substr(3,2);
    if(month.substr(0,1)=='0') month = month.substr(1,1);
    month=month-1;
    var year = s.substr(6,4);
    alltags[i].innerHTML = '' + '<span style="font-size: 200%";>' + day + '</span>' + '<br />' + Months[month] + '<br />' + year;
  }
}
</script>

Скрипт лучше вставить перед тегом </body>. Для того, чтобы скрипт корректно работал нужно установить формат даты в виде DD.MM.YYYY.

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

P.S. Повторюсь. Я не знаток веб-технологий и не хавец в JavaScript'е. Поэтому здоровая критика будет очень кстати. Ну и, если вы делали подобные опыты, с удовольствием посмотрю на ваше решение.

И еще. На картинке виден кусочек текста из рассказа "Поэт и муза" Татьяны Толстой. Рассказ хороший и здесь использован просто как текст-наполнитель для примера. Вот на этом все.