Как заставить людей нажимать на ваши ссылки?

Ссылка в html документе, казалось бы, вещь прозаическая. По своему предназначению, это запись в документе, указывающая на другую часть этого документа или на другой документ. Прозаический и ее синтаксис, он выглядит примерно так: <a href="URL">текст ссылки</a>. Однако, продвинутые вебмастера хорошо знают, что оставить просто ссылку в документе - не всегда достаточно для достижения цели. Нужно еще и привлечь внимание пользователя к ссылке, заинтриговать его кликнуть по ссылке, поспособствовать ее нажатию. Это в большей мере касается рекламных ссылок, партнерских и т.д. Сделать привлекательной ссылку - полезно и для поведенческих факторов, если люди переходят по ссылкам на другие статьи на вашем сайте - значит, им интересна ваша тематика и содержание вашего сайта. Ниже рассмотрим некоторые хитрости, к которым прибегают вебмастера при оформлении ссылок. Такие хитрости помогут увеличить кликабельность ссылок на вашем сайте, ПФ вашего сайта, будут способствовать регистрации по вашим партнерским ссылкам. Вам остается выбрать тот способ, который необходим для вашего конкретного случая.

Как изменить цвет ссылки и фона ссылки?

Это можно сделать с помощью CSS, код будет выглядеть так:

<style> a { color: #800000; /* Цвет текста */ background: #f8694d; /* Цвет фона */ padding: 2px; /* Поля вокруг текста */ } </style>

Результат работы будет следующим (в коде мы можем изменить цвет самого текста, цвет фона, на котором написан текст и ширину поля вокруг текста): подсвеченный фон у ссылок

Кликнуть по ссылке при наведении курсора мыши

Маленькая хитрость, она заключается в том, что мы заставим нажать на ссылку, даже если пользователь не кликнет на саму ссылку, а только подведет к ней курсор мыши. Да, вы не ослышались, мы перейдем по ссылке если пользователь лишь подведет к ней свой курсор мыши. Не совсем честно, но зато продуктивно. Ссылка оформляется подобным образом:

<a href="https://seo-zona.ru/uslugi" target=_blank onmouseover='window.open("https://seo-zona.ru/uslugi");'> <font size="4" color="#FF0000">Ссылка на мои услуги</font></a>

А вот и рабочий пример → Ссылка на мои услуги (подведите курсор мыши)

Ссылка кнопкой

Привожу пример создания ссылки, но не текстом, как это традиционно, а кнопкой. Иногда нужно выделить ссылку среди текста, красивая кнопка - как раз кстати. Нам на помощь придет CSS:

<style> .knopka { border: 1px solid #333; display: inline-block; padding: 5px 15px; text-decoration: none; color: #000; } .knopka:hover { box-shadow: 0 0 5px rgba(0,0,0,0.3); background: linear-gradient(to bottom, #fcfff4, #e9e9ce); color: #a00; }</style>

Осталось применить стиль на практике. Это выглядит примерно так:

<a href="#" class="knopka">Ссылка как кнопка</a>

Результат работы → Ссылка как кнопка

Ccылка картинкой

Аналогичный эффект украсить ссылку с помощью картинки можно достичь нижеследующим кодом. Обратите внимание, мы будем использовать две картинки on.gif и off.gif, они меняются в зависимости от того, подвели к ней мышь или убрали мышь:

<a href="https://seo-zona.ru/contact" onMouseOver="document.button1.src='/images/on.gif'" onMouseOut="document.button1.src='/images/off.gif'" target="_blank" title="Нажми меня"><img name="button1" src="/images/on.gif" border=0> </a>

Наглядная иллюстрация →

Показать картинку при наведении на ссылку

Если вам понадобилось показать картинку при наведении на ссылку (в качестве подсказки, иллюстрации и т.д.), можно реализовать подобное на чистом CSS:

.tooltip a{ border-radius: 5px 5px 5px 5px; visibility: hidden; position: absolute; left: 200px; background: #fff; box-shadow: -2px 2px 10px -1px #333; border-radius: 5px; } .tooltip:hover a{ visibility: visible; }

Вот код для реализации:

<a class="tooltip" href="#" >Картинка при наведении мыши на ссылку<span><img src="image.gif"/></span></a>

В результате, при наведении курсором на ссылку, возле нее в всплывающем окне появится указанная в настройках картинка.

Показать подсказку при наведении на ссылку

Реализуем всплывающую подсказку при наведении курсора мыши на ссылке с помощью CSS кода:

.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }

Пример реализации →  Это ссылкаА это расширенное пояснение к ссылке, всплывающее в окне

Невидимая ссылка на странице

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

Маскируется ссылка на странице с помощью CSS (цвет ссылки задаем такой же как и у основного текста, убираем подчеркивание и прячем курсор мыши). Если нажать на слово-ссылку, то переход по ссылке сработает, но пользователь не понимает что это ссылка и нажимать на нее у него не возникнет надобности.

a.link, a.link: visited, a.link: hover {
color: #000;
cursor: text;
text-decoration: none;
}

В HTML-коде страницы пропиcывается:

<a href="#" class="link">Текст ссылки</a>

Зашифрованный анкор ссылки

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

Код ссылки можно оформить подобным образом

<a href="реферальская ссылка" onMouseOver="window.status='не реферальская ссылка'; return true" onMouseOut="window.status=''; return true">Текст ссылки</a>

При наведении на такую ссылку пользователь увидит в строке подсказок "не реферальскую ссылку", но если кликнет на такую ссылку, то его браузер перейдет как раз на "реферальскую ссылку".

...Собственно, это лишь некоторые популярные примеры сделать ссылки на сайте выразительными и кликабельными. Главное - не перестараться!

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (13 голоса, рейтинг: 4,62 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...

Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро...

5 комментарий

  1. says:

    Отличные способы украсить или спрятать ссылку. Помогите мне разобраться. Я использую на своих страницах подсказку при наведении на непонятное для пользователя слово. Открывается и картинка и текст и фон все хорошо, но открывается всегда сбоку страницы, где бы не стояло слово необходимое для пояснения.
    Я поставлю ссылку на страницу где можно посмотреть этот эффект, при модерировании поста возможно она исчезнет (http://ex-hort.ru/10-prichin-pojti-na-olimpiady-v-okio-2020)
    Слова Ниппон Будокан (яп. 日本武道館), темпура, якитори , соба , теппаньяки , шабу шабу
    Что в Css надо исправить?

  2. says:

    ПОКАЗ КАРТИНКИ ПРИ НАВЕДЕНИИ НА ССЫЛКУ ТАКИМ ОБРАЗОМ

    .tooltip a{ border-radius: 5px 5px 5px 5px; visibility: hidden; position: absolute; left: 200px; background: #fff; box-shadow: -2px 2px 10px -1px #333; border-radius: 5px; } .tooltip:hover a{ visibility: visible; }

    НЕ РАБОТАЕТ!

  3. Денис says:

    Огромное спасибо, проведу эксперимент.

  4. Денис says:

    Спасибо, интересная информация, нужно попробовать, но вот возникает вопрос, если допустим исходить из минимальных знаний по таблицам стилей, в какой файл поместить ваши коды, условно сайт работает на WordPress, в шаблон, single.php или в таблицы стилей? Спасибо!

    1. Вячеслав Скоблей says:

      Стили (< style >) в стили (style.css). Можно и в тело записи/страницы, но для чистоты кода первый вариант предпочтительнее.

Добавить комментарий

Ваш адрес email не будет опубликован.