Красивая дата публикации сообщения

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

гаджет об авторе блога. А сейчас украсим такую, вроде как и не значительный элемент-дата публикации. Ну согласитесь, это как-то совсем обычно
6/12 /2014
А мы  ей придадим яркость и уникальность. И выглядеть она будет совсем необычно.


Если хотите увидеть, как это смотрится на странице, прошу заглянуть сюда.
Ну и приступим к реализации. Тем более, что сложного в этом ничего нет. Главное терпение и внимание.

Заходим ШАБЛОН-ИЗМЕНИТЬ и, как обычно, с помощью клавиш Ctrl+F находим в шаблоне вот такую строчку. 
.date-header span

Просто удаляем её и на это место вставляем следующий код. 

Если такой нет тогда сразу под строкой /* Posts
----------------------------------------------- */ .

.date-header {
margin: 0px 0px -50px -190px;
}
.date-header span {
background-color: #DDEDAA;
color: #444;
padding: 16px;
border-radius: 70%;
border: 3px solid #bada55;
}
.date-header:before {
background: none repeat scroll 0 0 #FCFCFC;
border: 10px solid #FFBD54;
border-radius: 100%;
bottom: -50px;
content: "";
display: block;
height: 30px;
position: absolute;
width: 30px;
z-index: 10;
margin-left: 140px;
}
.date-header:after {
background: none repeat scroll 0 0 #F9F9F9;
border: 7px solid #bada55;
border-radius: 100%;
bottom: -17px;
content: "";
display: block;
height: 15px;
position: absolute;
width: 15px;
z-index: 10;
margin-left: 166px;
}


источник http://www.probloggertricks.com
Нажимаем просмотреть. Если сделали всё правильно, сохраняем и любуемся результатом.
В коде можно немного поиграться с цветом-#444, #FFBD54, #DDEDAA , #bada55. Скопируйте сначала код в черновик или блокнот и вставьте свои значения. Можно воспользоваться и этим генератором цвета.

Вот с помощью таких нехитрых действий мы предали блогу некую необычность.
А я пожелаю вам хорошей недели и до встречи.

Удачи всем нам.

Ой, а что это там ниже?  


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

введите пожалуйста свой email :

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

  1. Вика, привет! Замечательно придумано и с подсказками. Сообщения веселей смотрятся)) Наверняка кому-то приглянется!

    ОтветитьУдалить
  2. Да, Ирина.Весёленькие такие получаются. Всё думаю, может самой установить на другой блог.

    ОтветитьУдалить
  3. Почему бы и нет? Тот блог у тебя более домашний и красивости ему только на пользу)))
    Вика, у меня уже третий день интернет тупит. Не соединяет практически ни с чем. Крутит, крутит(( Рывками пробираюсь к своему блогу.
    Спасибо за код, установила его на тестовый, нужная картинка тоже не показывается.

    ОтветитьУдалить
  4. Ирина, завтра планирую пост о кнопках ВК. Может пригодится.

    ОтветитьУдалить
  5. Доброй ночи, Вика! Захотелось установить, но почему-то не всплывает строчка .date-header span, Может что-то с шаблоном, показывает красным цифры 0. Пыталась вручную, но не нашла. Спасибо.

    ОтветитьУдалить
  6. Доброй ночи, Вика! Захотелось установить, но почему-то не всплывает строчка .date-header span, Может что-то с шаблоном, показывает красным цифры 0. Пыталась вручную, но не нашла. Спасибо.

    ОтветитьУдалить
    Ответы
    1. Ирина, посмотрите пост как найти строку правильно.
      Возможно не будет у вас в шаблоне .date-header span
      Тогда код нужно вставить сразу после /* Posts
      ----------------------------------------------- */ У Вас это где-то 262 строка.
      Вообще-то я вам опять советую. Не стоит столько много всего ставить. У Вас аж 50 виджетов в коде. Блог уже некорректно работает. Уберите всю флеш-анимацию.
      У меня виджетов всего 14 и то думаю что бы ещё убрать. Вам срочно нужно от всего этого избавиться. Я Вам уже писала об этом. Сегодня посмотрела а там опять новая анимация.

      Удалить
  7. Доброй ночи, Вика! Спасибо Вам. Столько всего классного- хочется всего! Хорошо, придется расстаться с некоторыми.

    ОтветитьУдалить
    Ответы
    1. Ирина, Вы должны понять, что устанавливая очередной виджет его код автоматически появляется в шаблоне блога. А если виджет ещё со стороннего ресурса-эта же масса не нужных ссылок. А анимация и флешки вообще тормозят и мешают работе блога. Обратите внимание сколько всего предложено даже в этом блоге. И если бы всё это я установила, то блога моего уже и в помине бы не было.

      Удалить

Пользовательский поиск