Здравствуйте, друзья, читатели и гости блога. Немного поговорим о маленьких элементах дизайна блога. А именно, как установить небольшую картинку в отображение даты публикации сообщения. Обычно, в стандартных шаблонах блога дата отображается вверху.
У нас есть возможность настроить её на свой вкус во вкладке дизайн-сообщения-изменить.
Примерно вот так она выглядит. Достаточно просто.
В шпаргалке красивая дата публикации был предложен вариант о том, как немного придать оригинальности этому. И сегодня ещё один способ оживить строку даты. Добавим небольшую иконку к ней.
<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>
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; значениями. Для новичков объясню. Первое отступ сверху, вторая-справа, третье-снизу и четвёртое отступ слева.
По этому же принципу можно установить иконку в строке названия сообщения. об этом читаем здесь.
Всё сегодня. Ставлю точку в очередной шпаргалке. Желаю всем удачи. Благодарю всех. кто заглядывает в мои шпаргалки. Увидимся.
здесь можно оформить подписку на новые шпаргалки
Спасибо! Уже опробовала)))
ОтветитьУдалитьУже!? Очень рада, что пригодилось.
УдалитьВика,а у меня иконка к названию появилась,а к дате нет,как быть?
ОтветитьУдалитьА куда код добавляли. И обратите внимание на строки, выделенные красным.
УдалитьКак и в название,добавить гаджет.
Удалитья на нескольких своих блогах пробовала. Всё получается Тут надо играться со значениями padding: 4px 0 4px 15px;
Удалитьmargin: 5px 0 10px 0;
Учебник, чтобы иметь представление http://htmlbook.ru/css/padding и
http://htmlbook.ru/css/margin