Изменить цвет ссылки и красиво её оформить

Приветствую всех на своём блоге. Появился вопрос, как изменить цвет ссылки. Давайте будем разбираться. Разработчики Blogger предоставили нам достаточно много удобных и полезных настроек. В том числе и выбор цвета ссылок.


Но всегда хочется ещё что-то добавить своего. Да и  при установке стороннего шаблона эта функция не работает. Так что приходится довольствоваться тем, что есть.

Как изменить цвет и эффектно оформить ссылку в сообщении блога.

Для изменения цвета ссылки нам понадобиться всего-то скопировать код, который приведён ниже и у становить его в шаблоне блога. Шаблон-изменить HTML. С помощью клавиш CTRL+F находим заветную строку ]]></b:skin> и над ней устанавливаем код. Кто пропустил статью о том как это сделать, прошу сюда.

.post-body a:link {
  text-decoration:none;
  color:#dc143c ;
  font-weight: bold
}

.post-body a:visited {
  text-decoration:none;
  color:#b0c4de ;
}

.post-body a:hover {
  text-decoration:underline;
  color: #6495ed;
}

В этом коде нужно поменять значения цвета на свои. В первом случае ссылка в состоянии покоя, вторая-цвет посещённой ссылки и последнее - цвет при наведении курсора. Всё достаточно просто.

Если уж очень хочется ещё добавить эффекта мы можем сделать тень для ссылки. Тут нам понадобиться в нашему  коду в последнем блоке добавить  элемент text-shandow-

text-shadow: 1px 1px 1px rgba(0,0,0,.4);

В итоге весь код сейчас будет выглядеть следующим образом.

.post-body a:link {
  text-decoration:none;
  color:#dc143c ;
  font-weight: bold
}

.post-body a:visited {
  text-decoration:none;
  color:#b0c4de ;
}

.post-body a:hover {
  text-decoration:underline;
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
  color: #6495ed;
}

А сейчас оживим ссылки и заставим их немного попрыгать. Что-то подобное мы уже делали. Об этом можно прочитать здесь. Добавим в код вот такую строку

position: relative; top: 2px;

Нажмите на ссылку выше и увидите, как это выглядит. Добавляем position: relative; top: 2px;  по аналогии с text-shandom. Ну, а если хочется и тень сдвиг ссылки, то эти 2 элемента вставляйте друг за другом. И любуйтесь красивыми ссылками своего блога. При установке кода в шаблон сразу смотрите, как всё получается. Нажимаем просмотр. Нравится сохраняем шаблон. Не нравится, пробуем другой вариант.

На сегодня с оформлением ссылок заканчиваю. Хочется думать, что это вам пригодиться. И до скорых встреч.

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

Введите Ваш email ...: