Как добавить иконку к дате публикации статьи.


иконка публикации поста Здравствуйте, друзья, читатели и гости блога. Немного поговорим о маленьких элементах дизайна блога. А именно, как установить небольшую картинку в отображение даты публикации сообщения. Обычно, в стандартных шаблонах блога дата  отображается вверху.




У нас есть возможность настроить её на свой вкус во вкладке дизайн-сообщения-изменить.


Примерно вот так она выглядит. Достаточно просто. 
В шпаргалке красивая дата публикации был предложен вариант о том, как немного придать оригинальности этому. И сегодня ещё один способ оживить строку даты. Добавим небольшую иконку к ней. 
иконка в дате публикации
Для реализации нам понадобится вот такой небольшой код.

<style>.date-header {
background: transparent url( http://s018.radikal.ru/i528/1505/09/9c9b48660b9f.png
) no-repeat scroll left center;
padding: 4px 0 4px 15px;
margin: 5px 0 10px 0;
}</style>


Установка элементарная. Дизайн-добавить гаджет-HTML/JavaScript. В него вставляем этот код. Если у вас добавлено очень много гаджетов и вы уже теряетесь в них, то лучше будет установить код непосредственно в шаблоне блога. Но уже без тегов <style>.. </style>. Перед строкой ]]></b:skin>. 

То, что выделено синим цветом, это сам адрес картинки. Можете воспользоваться этим или подберите свою иконку. Лучше будет выбрать формат png. Размер тоже не стоит подбирать крупный. В моём случае изображение календарика 20х20 px. Могу предложить замечательный сайт https://www.iconfinder.com..

Обращу внимание на строку красного цвета. Вполне возможно , что другая картинка не очень корректно будет отображаться в строке даты. Тут нужно будет поиграться с этими padding: 4px 0 4px 15px; значениями. Для новичков объясню. Первое отступ сверху, вторая-справа, третье-снизу и четвёртое отступ слева.

По этому же принципу можно установить иконку в строке названия сообщения. об этом читаем здесь.

Всё сегодня. Ставлю точку в очередной шпаргалке. Желаю всем удачи. Благодарю всех. кто заглядывает в мои шпаргалки. Увидимся.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

  1. Спасибо! Уже опробовала)))

    ОтветитьУдалить
    Ответы
    1. Уже!? Очень рада, что пригодилось.

      Удалить
  2. Вика,а у меня иконка к названию появилась,а к дате нет,как быть?

    ОтветитьУдалить
    Ответы
    1. А куда код добавляли. И обратите внимание на строки, выделенные красным.

      Удалить
    2. Как и в название,добавить гаджет.

      Удалить
    3. я на нескольких своих блогах пробовала. Всё получается Тут надо играться со значениями padding: 4px 0 4px 15px;
      margin: 5px 0 10px 0;
      Учебник, чтобы иметь представление http://htmlbook.ru/css/padding и
      http://htmlbook.ru/css/margin

      Удалить

Пользовательский поиск
Foto Saya
My Photo