Блог Метросексуала о заработке в сети и красивой жизни!

Правильно оформляем гипертекстовые ссылки от SAPE

С введением возможности покупать/продавать ссылки прямо из текста блогов, авторы оных лишились возможности контролировать положение ссылок. Если с блоками все было просто - пользователи всегда знали, что это рекламные ссылки и не уделяли им внимания, то теперь - продажные ссылки в очередной записи блога будет сложно отличить от ссылок, которые расставил сам автор блога. Отчасти эту проблему можно решить моим плагином. Но главное - это как-то сообщить потенциальному читателю блога, что вот эта ссылка рекламная и кликать по ней пожалуй не стоит. Более того, такой подход позволит сохранить пользователей на сайте. Если для реф. ссылок мы должны повысить CTR, то тут необходимо устремить его к нулю. Чем мы сейчас и займемся.

Итак, чтобы ссылки как-то отличались от всех остальных в блоге, воспользуемся CSS. Для этого заранее укажите в настройках SAPE класс ссылок. Допустим, это будет class=”sape”. В качестве примера возьмем этот блог.

Пока у нас два основных стиля ссылок - простые и более заметные.

 
Сейчас все контекстные ссылки будут выделяться синим цветом, что не есть хорошо. Открываем таблицу стилей нашей темы и добавляем туда:

 
Только проверьте, какой id у того слоя (div), в который выводится запись блога. Если написать просто A.sape, то такой стиль будет у всех ссылок - и у блочных, и у контекстных. Мы же работаем только с контекстными, поэтому и добавляем id слоя.

Теперь собственно несколько способов оформления продажных ссылок. Самое простое, что приходит в голову - это вообще скрыть от пользователя, что это ссылка. Т.е. замаскировать ссылку под текст.

 
Не знаю, нарушаются ли таким образом правила SAPE, в любом случае это не совсем правильно и этично, даже не смотря на то, что такие ссылки предназначены только для поисковиков. Сам стиль в этом случае будет выглядеть так:

 
Второй вариант -это явно указать на то, что ссылка рекламная. Например написать ключевое слово [AD] рядом с ссылкой. Т.к. у многих стоят фильтры, которые режут рекламу - значение этих букв поймут большинство. Выглядеть это будет примерно так.

 
Сделать это довольно просто. Как вариант можно воспользоваться тегами . Т.е. после каждой ссылки вставлять следующий код:

 
При желании стиль можно вынести в общую таблицу стилей CSS нашей темы. Сам код можно добавлять с помощью моего плагина. Выглядеть это будет примерно так.

 
Если заметили, слегка размывается слово [AD]. Это из-за слишком малого размера шрифта. А крупнее делать его не стоит, будет отвлекать, да и строки расползутся из-за неравномерной высоты. Поэтому вместо текста можно использовать изображение в качестве background-image. Получится вот так.

 
В этом случае наш стиль будет выглядеть так:

 
Здесь для каждого сайта придется поиграть значениями background-position и padding-right. Первый параметр определяет расположение изображения - в нашем случае это правый край (100%) и отступ от низа на 80%. Оптимально конечно значение 100% 100% (в верхнем правом углу) - но при этом обрезается верх изображения. Параметр padding-right определяет отступ текста ссылки от правого края - необходимо, чтобы не слипались изображения и текст ссылки. Значение зависит от ширины изображения с текстом [AD], оно должно быть чуть больше.

Вот такими незамысловатыми способами можно управлять контекстными ссылками на сайте.

Интересное сегодня - контекстные ссылки (за и против), бесплатные кейворды для доров и факторы влияющие на вес ссылки, ч.3.