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

Что такое ICQ, как его установить и пользоваться, создание, продвижение и заработок на сайте

> Что такое ICQ, как его установить и пользоваться? Здравствуйте, уважаемые читатели блога Не будем расписывать историю возникновения ICQ еще с начала времен его разработки — это не представляет особого интереса, да и любой желающий ...

Что такое DNS и как ДНС-сервера обеспечивают работу интернета, создание, продвижение и заработок на сайте

> Что такое DNS и как ДНС-сервера обеспечивают работу интернета Здравствуйте, уважаемые читатели блога О том, что такое интернет и когда он появился, мы с вам уже говорили. Говорили и про то, что такое есть ...

Что такое cookie и как почистить куки в современных браузерах, создание, продвижение и заработок на сайте

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

Что такое Chmod, какие права доступа назначать файлам и папкам (777, 755, 666) и как это сделать через PHP, создание, продвижение и заработок на сайте

> Что такое Chmod, какие права доступа назначать файлам и папкам (777, 755, 666) и как это сделать через PHP Сегодня я хотел бы поговорить о правах доступа к файлам и папкам (читайте что такое ...

Что мешает SEO-продвижению вашего сайта и как это исправить

> Что мешает SEO-продвижению вашего сайта и как это исправить — 10 основных ошибок и 5 базовых рекомендаций Здравствуйте, уважаемые читатели блога Сегодня хочу выступить в роли адвоката Сео методов продвижения и попытаться объяснить основные ...

Что значит смайлик написанный символами

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

Что главное в блоге? Фото, создание, продвижение и заработок на сайте

> Что главное в блоге? Фото! Здравствуйте, уважаемые читатели блога Итак, у вас есть блог, и в первых публикациях вы успели поделиться чем-то захватывающе интересным и важным. Теперь самое время подумать о таком существенном моменте, ...

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

> Интересно ваше мнение. Здравствуйте, уважаемые читатели блога Целесообразно ли автоматизировать SEO продвижение? Я решил провести небольшой опрос, стало интересно, как много моих читателей пробовали работать или работают с агрегаторами автоматического продвижения сайтов? Какой из ...

Хроники первого года «бессылочной» эпопеи Яндекса, создание, продвижение и заработок на сайте

> Хроники первого года «бессылочной» эпопеи Яндекса Здравствуйте, уважаемые читатели блога Говоря о новых тенденциях в поисковом продвижении, все эксперты, рядовые SEO-специалисты и владельцы сайтов до сих пор в первую очередь отмечают так называемый «отказ ...

Хостинг и все что с ним связано, работа с cPanel, создание, продвижение и заработок на сайте

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

Хостинг и VPS в InDeepSky

> Хостинг и VPS в InDeepSky — гарантированный аптайм 99,98%, установка CMS в один клик, конструктор сайтов + год в подарок Здравствуйте, уважаемые читатели блога Хочу сегодня немного попиарить перспективного новичка на рынке предоставления хостинга ...

Хороший и стабильный хостинг от WebStix

> Хороший и стабильный хостинг от WebStix — без ограничений на количество сайтов, с SSD дисками и ежедневным бекапом Здравствуйте, уважаемые читатели блога Это уже не первая моя статья посвященная выбору хостинга. Идеальных вариантов в ...

Хлебные крошки в Вордпресс без плагинов, создание, продвижение и заработок на сайте

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

Хлебные крошки в WordPress средствами плагина Breadcrumb NavXT (усиливаем перелинковку), создание, продвижение и заработок на сайте

> Хлебные крошки в WordPress средствами плагина Breadcrumb NavXT (усиливаем перелинковку) Здравствуйте, уважаемые читатели блога Сегодня я хочу рассказать о плагине для WordPress, который используются на моем блоге сразу для двух очень важных целей. Во-первых, ...

Халявные жирные обратные ссылки с трастовых сайтов имеющих высокий тИЦ, создание, продвижение и заработок на сайте

> Халявные жирные обратные ссылки с трастовых сайтов имеющих высокий тИЦ Здравствуйте, уважаемые читатели блога Это уже седьмая статья, посвященная получению обратных ссылок с разнообразных трастовых ресурсов (всегда ведь приятно зарабатывать деньги, как было описано ...

Фотостоки и фотобанки

> Фотостоки и фотобанки — 30 бесплатных легальных источников фотографий, изображений и иконок Здравствуйте, уважаемые читатели блога Уже четверть века как мы живет при капитализме, где за все нужно платить. Если в плане материальных ценностей ...