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

Как изменить цвет и эффектно оформить ссылку в сообщении блога.
Для изменения цвета ссылки нам понадобиться всего-то скопировать код, который приведён ниже и у становить его в шаблоне блога. Шаблон-изменить 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-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;
}
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 элемента вставляйте друг за другом. И любуйтесь красивыми ссылками своего блога. При установке кода в шаблон сразу смотрите, как всё получается. Нажимаем просмотр. Нравится сохраняем шаблон. Не нравится, пробуем другой вариант.
На сегодня с оформлением ссылок заканчиваю. Хочется думать, что это вам пригодиться. И до скорых встреч.
оформите подписку на новые шпаргалки
Вика, интересное решение. Пожалуй, возьму на вооружение. Спасибо.
ОтветитьУдалитьСпасибо, Валерий. Главное совсем просто, а смотрится интересно.
ОтветитьУдалитьСпасибо, интересно!
ОтветитьУдалитьP.S. В тексте в двух местах вы написали "shandom", хотя, очевидно, нужно "shadow".
Кстати, в каком браузере шаблон редактируете? У меня в Опере, Гугл Хроме, Яндекс-браузере вкладка "Шаблон" зависает. И только в Мозилле всё нормально.
Андрей, да не за что. Спасибо за внимание. Да, получилась оЧеПятка. А насчёт браузера... Я в Хроме работаю.
ОтветитьУдалитьСпасибо, Вика, давно задумывалась, что ссылки какие-то незаметные, но выделять их контрастным цветом не хотелось, ведь не всегда это то, что хочется подчеркнуть контексте. А вот движение привлекает внимание, но не портит общей картины.
ОтветитьУдалитьКстати, у меня картинки тоже зашевелились. Побочный эффект?;)
Этот комментарий был удален автором.
УдалитьПосмотрела. хорошо всё получилась. конечно картинки зашевелились тоже. Для чего я тебя сюда направила-то. и не побочный это эфект. А самый. что не на есть прямой. а вот тут есть более интересный эффект для оформления ссылок http://www.shpargalochki.ru/2015/05/Jeffektnoe-podchjorkivanie-teksta..html
УдалитьБольшое спасибо!
ОтветитьУдалитьМята, пожалуйста, приятно, что пригодилось.
Удалить