В прошлый раз мы немного переделали гаджет об авторе блога. А сейчас украсим такую, вроде как и не значительный элемент - дата публикации. Ну согласитесь, это как-то совсем обычно
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;
}
В коде можно немного поиграться с цветом-#444, #FFBD54, #DDEDAA , #bada55. Скопируйте сначала код в черновик или блокнот и вставьте свои значения. Можно воспользоваться и этим генератором цвета.
Вот с помощью таких нехитрых действий мы предали блогу некую необычность.
А я пожелаю вам хорошей недели и до встречи.
хотите оформить подписку на новые шпаргалки
Вика, привет! Замечательно придумано и с подсказками. Сообщения веселей смотрятся)) Наверняка кому-то приглянется!
ОтветитьУдалитьДа, Ирина.Весёленькие такие получаются. Всё думаю, может самой установить на другой блог.
ОтветитьУдалитьПочему бы и нет? Тот блог у тебя более домашний и красивости ему только на пользу)))
ОтветитьУдалитьВика, у меня уже третий день интернет тупит. Не соединяет практически ни с чем. Крутит, крутит(( Рывками пробираюсь к своему блогу.
Спасибо за код, установила его на тестовый, нужная картинка тоже не показывается.
Ирина, завтра планирую пост о кнопках ВК. Может пригодится.
ОтветитьУдалитьДоброй ночи, Вика! Захотелось установить, но почему-то не всплывает строчка .date-header span, Может что-то с шаблоном, показывает красным цифры 0. Пыталась вручную, но не нашла. Спасибо.
ОтветитьУдалитьДоброй ночи, Вика! Захотелось установить, но почему-то не всплывает строчка .date-header span, Может что-то с шаблоном, показывает красным цифры 0. Пыталась вручную, но не нашла. Спасибо.
ОтветитьУдалитьИрина, посмотрите пост как найти строку правильно.
УдалитьВозможно не будет у вас в шаблоне .date-header span
Тогда код нужно вставить сразу после /* Posts
----------------------------------------------- */ У Вас это где-то 262 строка.
Вообще-то я вам опять советую. Не стоит столько много всего ставить. У Вас аж 50 виджетов в коде. Блог уже некорректно работает. Уберите всю флеш-анимацию.
У меня виджетов всего 14 и то думаю что бы ещё убрать. Вам срочно нужно от всего этого избавиться. Я Вам уже писала об этом. Сегодня посмотрела а там опять новая анимация.
Доброй ночи, Вика! Спасибо Вам. Столько всего классного- хочется всего! Хорошо, придется расстаться с некоторыми.
ОтветитьУдалитьИрина, Вы должны понять, что устанавливая очередной виджет его код автоматически появляется в шаблоне блога. А если виджет ещё со стороннего ресурса-эта же масса не нужных ссылок. А анимация и флешки вообще тормозят и мешают работе блога. Обратите внимание сколько всего предложено даже в этом блоге. И если бы всё это я установила, то блога моего уже и в помине бы не было.
Удалить