Разное оформление для внутренних и внешних ссылок через CSS, создание, продвижение и заработок на сайте

>

Разное оформление для внутренних и внешних ссылок через CSS

Здравствуйте, уважаемые читатели блога Маленькая заметка — вдруг, кому-то пригодится. У меня как-то возникло желание по разному оформить ссылки ведущие с блога на внешние сайта и ссылки ведущие на страницы моего же ресурса. Зачем это нужно? Пока не знаю, но если желание появилось, то его нужно было попытаться утолить. Собственно, решение было найдено на этом блоге.

Суть метода заключается в применении регулярных выражений и использовании селекторов псевдоклассов after и before, о которых я уже писал. В принципе, как именно вы выделите ссылки ведущие на внешние сайты не важно (можете сами пробежаться по урокам стилевой разметки и найти подходящий вам метод). Главное именно отделить эти самые внешние ссылки от внутренних.

Как в CSS применить свойства только для внешних ссылок?

Однако мне понравился вариант предложенный на найденном мною блоге, когда к внешней ссылки добавляется иконка со стрелочкой. Подобным образом оформлены внешние ссылки на Wikipedia (что это такое?), а значит большей части пользователей сети будет понятно назначение подобной иконки.

Разное оформление для внутренних и внешних ссылок через CSS, создание, продвижение и заработок на сайте

В этом случае вам нужно будет сохранить на своем сервере вот такую вот картинку

Разное оформление для внутренних и внешних ссылок через CSS, создание, продвижение и заработок на сайте

(кликните по ней правой кнопкой мыши и выберите вариант сохранения изображения). После этого открывайте ваш файл стилей (в WordPress он лежит в папке с используемой вами темой по следующему адресу: /wp-content/themes/Название темы/ ) и дописывайте в него подобный код:



Естественно, что вам нужно будет заменить ktonanovenkogo.ru на доменное имя вашего сайта, а путь /wp-content/themes/Organic/images/external.png на путь приведенной выше картинки, которая должна быть сохранена на вашем сервере в какой-то папке (тут используется относительная ссылка, т.е. без указания хоста, то бишь домена).

Правда, в этом случае данное правило применится ко всем внешним ссылка на вашем сайта, в том числе и к счетчикам посещений, что не есть хорошо. Поэтому я решил добавить выделение внешних ссылок только в постах, указав в качестве селектора не просто тег A, а еще и класс контейнера, в который обернуты все посты на моем блоге.

Посмотреть его можно с помощью, например, Фаербага или инструментов для разработчиков, которые имеются в любом браузере (клик по нужному элементу вебстраницы правой кнопкой мыши и выбор пункта на вроде «Просмотр кода элемента»).

В моем случае это класс post, поэтому код видоизменился:

Собственно, все. Должно работать. Если захотите например, добавить не иконку со стрелочкой, а надпись «Внешняя ссылка» или что подобное, то просто поменяйте содержимое content:

Можно будет, кстати, и ничего не добавлять, а просто изменить цвет внешней ссылки относительно внутренней или сделать подчеркнутой, допустим пунктиром. Для этого вместо content: просо допишите нужные вас CSS свойства. Надеюсь, что вам это пригодится.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме:



Комментарии и отзывы

* Нажимая на кнопку «Добавить комментарий» или «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

О admin

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

Ваш email нигде не будет показан

x

Check Also

Рамблер почта (вход, настройка, работа с входящими) и ее место среди других сервисов бесплатных электронных ящиков, создание, продвижение и заработок на сайте

> Рамблер почта (вход, настройка, работа с входящими) и ее место среди других сервисов бесплатных ...

Работа с поведенческими факторами на качественно новом уровне, создание, продвижение и заработок на сайте

> Работа с поведенческими факторами на качественно новом уровне Здравствуйте, уважаемые читатели блога Поисковики справедливо ...

Пять способов увеличить продажи для eCommerce с помощью конкурентов, создание, продвижение и заработок на сайте

> Пять способов увеличить продажи для eCommerce с помощью конкурентов Здравствуйте, уважаемые читатели блога На ...

Пустая страница при просмотре больших постов (статей) в WordPress, создание, продвижение и заработок на сайте

> Пустая страница при просмотре больших постов (статей) в WordPress Здравствуйте, уважаемые читатели блога Подобная ...

Пропало левое меню в админке WordPress после обновления, создание, продвижение и заработок на сайте

> Пропало левое меню в админке WordPress после обновления Здравствуйте, уважаемые читатели блога Такая ситуация ...

Продвижение, раскрутка и оптимизация сайта самостоятельно, создание, продвижение и заработок на сайте

> Продвижение, раскрутка и оптимизация сайта самостоятельно Здравствуйте, уважаемые читатели блога Сегодня хочу попробовать обобщить ...

Продвижение сайта постами в соцсетях через биржу ВебАртекс, создание, продвижение и заработок на сайте

> Продвижение сайта постами в соцсетях через биржу ВебАртекс Здравствуйте, уважаемые читатели блога В середине ...

Продвижение за счет поведенческих факторов

> Продвижение за счет поведенческих факторов — альтернатива ссылкам в Яндексе в 2014 (сравнение Userator, ...

Продвижение бизнеса в Instagram

> Продвижение бизнеса в Instagram — тонкости реализации Здравствуйте, уважаемые читатели блога Расположение бизнеса имеет ...

Программы для продвижения в Инстаграм, создание, продвижение и заработок на сайте

> Программы для продвижения в Инстаграм Здравствуйте, уважаемые читатели блога Несмотря на наличие платной официальной ...

Программа просмотрщик FastStone Image Viewer

> Программа просмотрщик FastStone Image Viewer — как уменьшить, сжать размер и вес фото для ...

Проверка уникальности текстов в онлайн сервисах антиплагиата и с помощью программ, помогающих найти сайты плагиаторов, создание, продвижение и заработок на сайте

> Проверка уникальности текстов в онлайн сервисах антиплагиата и с помощью программ, помогающих найти сайты ...

Проверка сайта

> Проверка сайта — 85 онлайн сервисов и программ Здравствуйте, уважаемые читатели блога Сегодня я ...

Проверка на занятость и покупка доменного имени, чем отличаются регистраторы и реселлеры доменов и что такое WHOIS, создание, продвижение и заработок на сайте

> Проверка на занятость и покупка доменного имени, чем отличаются регистраторы и реселлеры доменов и ...

Проверка домена на занятость или как подобрать свободное доменное имя для сайта, создание, продвижение и заработок на сайте

> Проверка домена на занятость или как подобрать свободное доменное имя для сайта Здравствуйте, уважаемые ...

Проблема с All in One SEO Pack и ее решение

> Проблема с All in One SEO Pack и ее решение — убираем rel=prev и ...

Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники, создание, продвижение и заработок на сайте

> Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела ...

Принципы транслитерации, где она используется и онлайн переводчики траслита, создание, продвижение и заработок на сайте

> Принципы транслитерации, где она используется и онлайн переводчики траслита Здравствуйте, уважаемые читатели блога Сегодняшний ...

Примеры взлома WebMoney кошельков и настройки безопасности, способные снизить его вероятность (блокировка по IP), создание, продвижение и заработок на сайте

> Примеры взлома WebMoney кошельков и настройки безопасности, способные снизить его вероятность (блокировка по IP) ...

Привлечение трафика посетителей на свой сайт методами SMO (форумы, социальные сети, группы Subscribe), создание, продвижение и заработок на сайте

> Привлечение трафика посетителей на свой сайт методами SMO (форумы, социальные сети, группы Subscribe) Здравствуйте, ...

Привлекай рефералов и выиграй конкурс от BetAdvert! Призовой фонд более, создание, продвижение и заработок на сайте

> Привлекай рефералов и выиграй конкурс от BetAdvert! Призовой фонд более 150.000Р Здравствуйте, уважаемые читатели ...

Презентация обновленной партнерской программы МегаКонкурс, создание, продвижение и заработок на сайте

> Презентация обновленной партнерской программы Binpartner.com + МегаКонкурс Здравствуйте, уважаемые читатели блога Хочу предложить вашему ...

Предновогодняя акция от Профит Партнера, создание, продвижение и заработок на сайте

> Предновогодняя акция от Профит Партнера Здравствуйте, уважаемые читатели блога Ну, вот и дождались — ...

Пошаговый план продвижения коммерческих сайтов, создание, продвижение и заработок на сайте

> Пошаговый план продвижения коммерческих сайтов Здравствуйте, уважаемые читатели блога Сегодня я не буду говорить ...