n-wp.ru — блог о WordPress
Как выделить внешние ссылки | n-wp.ru

Как выделить внешние ссылки

Способ визуально выделить внешние ссылки, сделав их более наглядными.

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

Я в этом блоге использую такое обозначение для ссылок, которые ведут из содержимого поста или текста комментариев на страницу, открываемую в новом окне. Внутренние ссылки при этом остаются неизменными. Для этого я использую псевдо-элементы. Давайте обозначим ссылку, открываемую в новом окне. Для этого добавим в style.css такую строчку:

.post_content — это то, в чем выводится текст содержимого поста. В разных темах это обозначение разное, поэтому найдите, в чем заключен ваш текст поста, и создайте аналогичную строчку.
/img/ext.gif — это путь до картинки. Саму картинку я привел в начале этой записи, можете скачать и пользоваться. А можете поискать и другие, которые вам больше подходят.
В этом коде картинка подставляется после каждой ссылки в посте, в коде которой содержится target=»_blank». Однако можно использовать не только этот параметр, но и другие. например, вот так будет выглядеть код css для ссылки с rel=»nofollow»:

Вы можете поэкспериментировать с параметром этого кода, подобрав подходящий для вас.
У этого способа есть один недостаток: он не работает в Internet Explorer. Однако думаю, что с выходом Internet Explorer 9 ситуация изменится.

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

Комментировать

/* ]]> */