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

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

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

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

.post_content a[target~="_blank"]::after {content: url(/img/ext.gif); margin-left:4px;}

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

.post_content a[rel~="nofollow"]::after {content: url(/img/ext.gif); margin-left:4px;}

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

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

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*