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

Приветствую всех на своём блоге. Появился вопрос, как изменить цвет ссылки. Давайте будем разбираться. Разработчики 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 ...:


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

  1. Вика, интересное решение. Пожалуй, возьму на вооружение. Спасибо.

    ОтветитьУдалить
  2. Спасибо, Валерий. Главное совсем просто, а смотрится интересно.

    ОтветитьУдалить
  3. Спасибо, интересно!
    P.S. В тексте в двух местах вы написали "shandom", хотя, очевидно, нужно "shadow".
    Кстати, в каком браузере шаблон редактируете? У меня в Опере, Гугл Хроме, Яндекс-браузере вкладка "Шаблон" зависает. И только в Мозилле всё нормально.

    ОтветитьУдалить
  4. Андрей, да не за что. Спасибо за внимание. Да, получилась оЧеПятка. А насчёт браузера... Я в Хроме работаю.

    ОтветитьУдалить
  5. Спасибо, Вика, давно задумывалась, что ссылки какие-то незаметные, но выделять их контрастным цветом не хотелось, ведь не всегда это то, что хочется подчеркнуть контексте. А вот движение привлекает внимание, но не портит общей картины.
    Кстати, у меня картинки тоже зашевелились. Побочный эффект?;)

    ОтветитьУдалить
    Ответы
    1. Этот комментарий был удален автором.

      Удалить
    2. Посмотрела. хорошо всё получилась. конечно картинки зашевелились тоже. Для чего я тебя сюда направила-то. и не побочный это эфект. А самый. что не на есть прямой. а вот тут есть более интересный эффект для оформления ссылок http://www.shpargalochki.ru/2015/05/Jeffektnoe-podchjorkivanie-teksta..html

      Удалить
  6. Ответы
    1. Мята, пожалуйста, приятно, что пригодилось.

      Удалить

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