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

Шесть Ошибок при создании меню в группу, из-за которых вы теряете клиентов, создание, продвижение и заработок на сайте

> Шесть Ошибок при создании меню в группу, из-за которых вы теряете клиентов Здравствуйте, уважаемые читатели блога Меню в группе сильно повышает число продаж. Сегодня только новичок будет спорить с этим правилом? и в этой ...

Шаблоны для сайта на Joomla

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

Что такое Яндекс

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

Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C, создание, продвижение и заработок на сайте

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

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

> Что такое Форекс и можно ли делать на нем деньги Здравствуйте, уважаемые читатели блога В данной статье мы поведем речь о мировом валютном рынке Форекс – определим его сущность и познакомимся с некоторыми базовыми ...

Что такое фиаско, а также что означает фраза

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

Что такое респект и что значит это слово при общении в интернете, создание, продвижение и заработок на сайте

> Что такое респект и что значит это слово при общении в интернете Здравствуйте, уважаемые читатели блога Давайте продолжим разбирать наиболее часто употребляемые интернет-мемы (специфические, присущие в основном только этой среде, но при этом устойчивые ...

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

> Что такое рерайт (рерайтинг) и с чем его едят? Здравствуйте, уважаемые читатели блога Если у вас есть сайт, либо вы планируете им обзавестись, то, конечно же, вы слышали слово «рерайт» и наверняка знаете, что ...

Что такое репост и как делать репосты во ВКонтакте, создание, продвижение и заработок на сайте

> Что такое репост и как делать репосты во ВКонтакте? Здравствуйте, уважаемые читатели блога Согласно официальному определению, репост – это возможность мгновенно поделиться информационной заметкой, размещённой в соцсетях, при этом не меняя её содержания и ...

Что такое кэш

> Что такое кэш — как очистить кеш в Опере, Мозиле, Хроме и других браузерах Здравствуйте, уважаемые читатели блога Что такое кэш? Это на самом деле довольно простое и в то же время довольно-таки многообразное ...

Что такое интернет, кто создал всемирную паутину World Wide Web и как работает глобальная сеть, создание, продвижение и заработок на сайте

> Что такое интернет, кто создал всемирную паутину World Wide Web и как работает глобальная сеть Здравствуйте, уважаемые читатели блога Все мы с вами живем в эпоху глобального интернета и пользуемся терминами сайт, веб, www ...

Что такое Емайл (E-mail) и почему это называют электронной почтой, создание, продвижение и заработок на сайте

> Что такое Емайл (E-mail) и почему это называют электронной почтой Здравствуйте, уважаемые читатели блога Все когда-то начинают, поэтому вопрос о том, что такое Емейл и какое он имеет отношение к электронной почте или почтовому ...

Что такое дроп, дропнутый или освобождающийся домен, создание, продвижение и заработок на сайте

> Что такое дроп, дропнутый или освобождающийся домен Здравствуйте, уважаемые читатели блога Термин Дроп происходит от английского слова Drop, которое, если верить автоматическому переводчику Google, имеет довольно большое количество значений (все-таки, действительно, велик русский язык, ...

Что такое домены, хостинг, DNS сервера и IP адреса, создание, продвижение и заработок на сайте

> Что такое домены, хостинг, DNS сервера и IP адреса Домены, Ip адреса и связывающие их DNS сервера Что такое доменные имена и какие бывают домены Покупка и продление доменов — что, где, почем? Что ...

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

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

Что такое блог и как его создать на бесплатном движке WordPress, оптимизация и заработок на своем интернет-дневнике, создание, продвижение и заработок на сайте

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