Новый вид даты поста и ссылки "Дальше" в Blogger(Blogspot)

  Обновляя или изменяя оформление постов блога, нельзя оставлять без внимания вопрос о том, как изменить дизайн даты и ссылки "Дальше" в сообщениях.
  В блогах на платформе Blogger сделать это очень просто, применяя CSS свойства к нужным селекторам, список которых приведен в данной статье с готовыми примерами кода. А также, здесь вы найдете описание, как разместить дату под заголовком сообщения блога.
  Первым делом необходимо настроить формат отображения даты, перейдя на вкладку "Дизайн" в админке. Тут же, в графе: "Текст ссылки на Страницу сообщения" можно изменить и название для ссылки разрыва.

Настройка формата даты и ссылки "Дальше"

  Дата. В стандартном шаблоне этот блок имеет такие идентификаторы:
- .date-header или h2.date-header - весь блок;
- .date-header span - блок текста даты. Этот селектор уже записан в шаблоне, свойства для него можно добавить или изменить.
  Для оформления стиля даты код CSS может быть таким:

.date-header {
 display: inline-block;
 background: #ccf;
 text-align: center;
 border: 2px solid #999;
 border-radius: 5px;
 padding: 10px 5px;
 margin: 5px;
 height: auto;
 width: 150px;
}
.date-header span {
 font: normal bold 15px Tahoma;
 color: #000;
 padding: 5px;
}

  Ссылка "Дальше..". не имеет в коде шаблона записанного селектора, но это не мешает добавить его туда самостоятельно. А он этого элемента такой:
- .jump-link - селектор всего блока разрыва;
- .jump-link a - селектор ссылки разрыва сообщения.
  Для этого элемента можно применять такой CSS:

.jump-link {
 text-align: right; /*выравнивание внутренних элементов*/
 height: 100px; /*высота всего блока*/
}
/*Стиль ссылки*/
.jump-link a {
 display: inline-block;
 background: #f9f9f9;
 background: -moz-linear-gradient(top, #f9f9f9 30%, #bcbcbc 100%);
 background: -webkit-linear-gradient(top, #f9f9f9 30%,#bcbcbc 100%);
 background: -o-linear-gradient(top, #f9f9f9 30%,#bcbcbc 100%);
 background: -ms-linear-gradient(top, #f9f9f9 30%,#bcbcbc 100%);
 background: linear-gradient(to bottom, #f9f9f9 30%,#bcbcbc 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#bcbcbc',GradientType=0 );
 border: 1px solid #666;
 border-radius: 3px;
 color: #666;
 text-align: center;
 font: normal normal 14px Arial;
 padding: 5px; /*внутренние отступы*/
 margin: 5px 10px; /*внешние отступы*/
 min-width: 150px;
 height: auto;
 width: auto;
}
/*Стиль ссылки при наведении курсора*/
.jump-link a:hover {
 background: #eaf6ff;
 background: -moz-linear-gradient(top, #eaf6ff 30%, #99d2ff 100%);
 background: -webkit-linear-gradient(top, #eaf6ff 30%,#99d2ff 100%);
 background: -o-linear-gradient(top, #eaf6ff 30%,#99d2ff 100%);
 background: -ms-linear-gradient(top, #eaf6ff 30%,#99d2ff 100%);
 background: linear-gradient(to bottom, #eaf6ff 30%,#99d2ff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaf6ff', endColorstr='#99d2ff',GradientType=0 );
 border: 1px solid #7cbdff;
 color: #000;
}

  Также, вместо цвета или CSS градиента для оформления ссылки "Дальше..." можно использовать изображение - иконку, в любом подходящем формате (.jpeg .png .gif).
  Код CSS в этом случаи будет таким:

.jump-link a {
 display: inline-block;
 background: url(.../image.gif) no-repeat;
 color: transparent; /*цвет шрифта - прозрачный*/
 font: normal normal 0 Arial; /*размер шрифта указываем как "0"*/
 margin: 0 350px;
 width: 128px; /*ширина, значение равное ширине используемой картинки*/
 height: 48px; /*высота, значение равное высоте используемой картинки*/
}
/*Стиль при наведении курсора*/
.jump-link a:hover {
 background: url(.../image-hover.gif) no-repeat;
 width: 128px; /*ширина, значение равное ширине используемой картинки*/
 height: 48px; /*высота, значение равное высоте используемой картинки*/
}

  Чтобы оптимизировать CSS код с применением изображений, рекомендуется использовать спрайты.

Когда мы используем иконку для элемента, нам, чаще всего, нужно избавится от уже ненужного текста. В данном случаи от слова "Дальше". Это можно сделать при помощи CSS, указав необходимые значения для свойств текста, без вмешательства в HTML.
  Для свойства цвета: color, нужно указать transparent - прозрачный,
для шрифта: font размер указать как 0.

Как разместить дату под заголовком поста(сообщения)

Если вы хотите чтобы дата отображалась не над заголовком сообщения, а под ним. То для этого нужно проделать следующие нехитрые манипуляции:
  1) Открываем HTML код шаблона, устанавливаем галочку "Расширить шаблоны виджета" и находим (Ctrl+F) вот такую строку:

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

В шаблоне их будет 2 - нам нужна вторая.
Аккуратно вырезаем (Ctrl+X) её и откладываем куда-нибудь на время, но не далеко.
  2) Там же, в шаблоне, снова ищем и находим уже такую строчку:

<b:if cond='data:blog.metaDescription == &quot;&quot;'>

Она будет одна-единственная по-этому не ошибетесь. И сразу перед(выше) этой строкой вставляем первую, отложенную. Должно быть так:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
<b:if cond='data:blog.metaDescription == &quot;&quot;'>

  Нажимаем на "Просмотреть", если все в порядке, сохраняем и радуемся.

  Теперь наши дата и ссылки "Дальше..." приобретут соответствующий дизайн. На этом все, буду рад вашим комментариям :)