4 окт. 2014 г.

Красивое оформление даты сообщения

Дата в шаблонах Blogger, как правило, выводится поверх поста и, зачастую, выглядит скучно. Давайте оживим блог и красиво оформим дату сообщения, добавив в обрамление картинку.

Если хотите посмотреть как это выглядит, посмотрите на оформление даты этого сообщения.

Если понравилось, переходим к процессу установки в блог. Делается это просто и быстро. Идем в Шаблон - Изменить HTML, находим, с помощью сочетания клавиш Ctrl+F, строчку ]]></b:skin> и прямо перед ней устанавливаем код:
.date-header {
background: transparent url(http://lh6.googleusercontent.com/-iZrEYopfsuo/VC8s8GCGuhI/AAAAAAAAE0c/ZA8gxCMX1g4/s20/calendar-ico.png) no-repeat scroll left center;
padding: 4px 0 4px 30px;
margin: 5px 0 10px 0;
}
Прежде чем сохранить сделанные изменения, не забывайте посмотреть как они будут выглядеть. Для этого нажмите Просмотреть шаблон и только после этого, если все устраивает, Сохранить шаблон.

Кроме того, можете картинку заменить на любую другую. Для этого измените ссылку на картинку, выделенную цветом, на свою. Учтите, что высота картинки должна быть не более 20 px. Как работать с картинками читайте здесь: Работа с изображениями в Blogger.

6 комментариев

Кира

Спасибо за статью и, вообще, за такой полезный блог. Сегодня весь день улучшаю свой блог, используя ваши советы. Еще раз спасибо.

Светлана Ковалева Светлана Ковалева

Пожалуйста, Кира, желаю успехов в освоении!

Anastasia Shejk

ничего из выше представленного не получается

Светлана Ковалева Светлана Ковалева

Anastasia, что именно у вас не получается?

BOMBERuss

На Вашей картинке (в коде) всегда на календаре цифра 1. Изображение придется менять на свое.

Светлана Ковалева Светлана Ковалева

Ну извините, что не угодила? :-)

Отправить комментарий