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

Разное оформление для внутренних и внешних ссылок через 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

x

Check Also

Рейтинги сайтов и блогов

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

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

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

Регистрация и вход на свою страницу в Контакте

> Регистрация и вход на свою страницу в Контакте — что делать если войти в ВК не получается Здравствуйте, уважаемые читатели блога Это очередная статья для тех, кто только начинает свое знакомство с интернетом (недавно ...

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

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

Расшифровка и разъяснение Seo сокращений, терминов и жаргонизмов, создание, продвижение и заработок на сайте

> Расшифровка и разъяснение Seo сокращений, терминов и жаргонизмов Если вы уже начали вплотную заниматься SEO оптимизацией и приступили к чтению блогов соответствующей направленности или обсуждению вопросов по продвижению сайтов на каком-нибудь тематическом форуме, то ...

Расширения и темы для Оперы

> Расширения и темы для Оперы — какие плагины и дополнения позволят вам добавить новые возможности в браузер Opera Здравствуйте, уважаемые читатели блога Не так давно я писал про расширения для Гугл Хрома и плагины ...

Раскрутка аккаунтов в Инстаграм с помощью JetInsta, создание, продвижение и заработок на сайте

> Раскрутка аккаунтов в Инстаграм с помощью JetInsta Здравствуйте, уважаемые читатели блога Как многие из вас наверное знают, Инстаграм очень даже неплохо подходит для бизнеса. «Продающие аккаунты» в этой сети создаются не только для прямой ...

Ранжирование без ссылок в Яндексе

> Ранжирование без ссылок в Яндексе — как это отразится на всех нас Здравствуйте, уважаемые читатели блога На днях проходила SEO конференция в Минске, где Александр Садовский (руководитель отдела поиска) в довольно-таки пафосной манере произвел ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

> Продвижение за счет поведенческих факторов — альтернатива ссылкам в Яндексе в 2014 (сравнение Userator, Movebo и SERPClick) Здравствуйте, уважаемые читатели блога Наверное, вы слышали о недавнем заявлении Александра Садовского (руководителя отдела поиска в Яндексе) ...