Как сделать красивую ссылку

Как сделать красивую партнерскую ссылку? Пошаговая инструкция

Вопрос, как сделать красивую партнёрскую ссылку или как скрыть партнерскую ссылку, встаёт у всех, кто начинает работать с партнерскими программами. Я даю в этой статье пошаговую инструкцию, как это сделать.

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

Преимущества этого варианта:

Сам придумываешь красивое название ссылки;
Размещаешь ссылку на своём сайте;
Можешь в любой момент поменять.

А зачем вообще надо прятать, изменять или скрывать партнерские ссылки? Здесь в основе лежит психология людей. Открытую партнёрскую ссылку хорошо видно, и «добрые люди» (читай: завистливые, злые, жадные) просто удаляют «хвостик» этой ссылки, где и содержатся данные о вашем партнерском аккаунте.

Пошаговая инструкция.

Как сделать красивую партнерскую ссылку?

1. Регистрируемся в партнерской программе, получаем партнёрскую ссылку. Например, у нас такая ссылка:

А может быть гораздо длиннее!

Вот, к примеру, моя партнерская ссылка на шаблон для этого блога:

А мой сайт называется klubladyfinans.ru (это нам понадобится дальше).

2. Открываем программу «Блокнот» (есть в стандартном комплекте программного обеспечения). Можно использовать и другие редакторы, например, «Notepad++» , только не Word. Создаем «Новый файл».

3. Берем готовый исходный код для подстановки своей партнёрской ссылки (просто копируем прямо с моего сайта):

Дублирую на всякий случай просто текст:

4. Между кавычками » » в первой строке вставляем свою партнёрскую ссылку! Я вставила свою ссылку (смотрите ниже), вы ставите свою!

Будьте о-о-о-очень внимательны. Не допускайте никаких пробелов и лишних значков между кавычками!

5. Сохраните файл на компьютере. Придумайте название этой партнерской ссылке, чтобы она отражала смысл: например, kurs, webinar, film и т.д. Удобно называть именем партнера! Я назову файл anfisa, так как это партнерская программа Анфисы Бреус, создательницы шаблона.

Расширение файла будет php. Выбираем «Файл», «Сохранить как». Там, где «тип файла» должно стоять «все файлы». Дальше выбираем«Сохранить». Например, у вас будет kurs.рhp, ау меня : klubladyfinans.ru/anfisa.рhp

6. Для партнёрских программ лучше создать отдельную папку на компьютере. Внутри неё папки с названиями партнёрок, то есть авторов. Я ещё веду файл «Партнерские программы» в программе «Еxcel». В одну графу я вношу партнёрские ссылки, который я получила от авторов, а в другую- созданные мной по указанному алгоритму. Ваша ссылка будет выглядеть так : ваш сайт/название курса.рhp.

Читать еще: Как сделать яичницу в форме сердца

7. Теперь нужно загрузить этот файл на сервер через программу «Ftp клиент». Это программа связи вашего компьютера с тем хостингом, где размещён ваш сайт.

8. Загружаем файл непосредственно в папку «Рublic. html» вашего сайта. Некоторые рекомендуют создать отдельную папку на сайте для партнерок, назвав её, например, р. Тогда путь к вашему файлу будет: ваш сайт/р/kurs.рhp. Для моей ссылки полный путь : https://klubladyfinans.ru/anfisa.php

9. Обязательно убедитесь, что обе ссылки ведут на одну и ту же страницу!

10. В первый раз кажется сложно, но когда вы сделаете для 2-х, 3-х ссылок- вы удивитесь, насколько это просто!

Красивые ссылки на вашем сайте

Эта статья для всех, кто хочет делать красивые сайты. Одна из главных вещей на сайте — это ссылки, и они должны выглядеть роскошно. В этой статье покажем, как настроить красивые ссылки, на примере страницы «О себе».

Сведения из этой статьи будут полезны всем, у кого есть и будет сайт на чистом HTML или на движке, где вы контролируете стили. Если у вас условная «Тильда» или «Редимаг», это не подойдёт — там управление стилями ограничено.

Сейчас у нас есть страница с множеством ссылок, и она выглядит плоховато:

ссылки не подчёркнуты, непонятно, что это ссылки;
когда наводишь мышку, ссылка подчёркивается, но очень толсто;
ссылки, по которым мы уже щёлкали, не выделяются другим цветом — так не ясно, что мы уже читали, а что нет.

Как будет

Давайте исправим каждый пункт, чтобы получилось как на скриншоте ниже: тонкие красивые подчёркивания, красный цвет при наведении, а ещё должно быть видно посещённые ссылки:

Всё дело в CSS

Чтобы сделать красиво, нам понадобится CSS — специальная разметка, которая отвечает за внешний вид и поведение элементов на странице.

В нашем примере CSS-код встроен в саму страницу, поэтому новые инструкции по оформлению добавлять будем тоже там. Это не очень правильно с точки зрения классической разработки — правильнее держать CSS в отдельном файле. Но для текущей задачи это неважно.

Между фигурными скобками мы напишем код, который превратит наши ссылки в ссылки со стильным тонким подчёркиванием. Для этого нам понадобится:

убрать стандартное подчёркивание;
прописать цвет ссылки, чтобы в каждом браузере они выглядели одинаково;
сделать тонкую линию под ссылкой.

Читать еще: Как сделать промопост в инстаграм

Сделаем всё по очереди.

Убираем стандартное подчёркивание

Эта команда говорит браузеру не использовать стандартные и встроенные украшательства для этого текста. Раз мы прописываем это в разделе про ссылки, то и относиться эта команда будет тоже только к ссылкам.

Задаём цвет ссылки

Это стандартный цвет ссылок в браузере Chrome, возьмём его за основу.

Делаем тонкую линию внизу

border-bottom: 1px solid;
border-bottom-color: rgba(15, 122, 252, 0.2);

Первая строчка говорит браузеру, чтобы он нарисовал под ссылкой (border-bottom) сплошную линию (solid) толщиной в один пиксель (1px).

А вторая — чтобы эта линия была определённого цвета. RGBA означает, что нам нужно смешать красный, зелёный и синий цвета (RGB) и задать им какую-то прозрачность (A). Сделаем всё тем же цветом, что и ссылки, а прозрачность поставим 0.2 — так линия будет выглядеть тоньше, чем один пиксель.

Собираем всё вместе

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

За реакцию на наведение мышки отвечает hover, поэтому нам в CSS-раздел нужно добавить такое:

Это значит, что когда мы подведём курсор к ссылке, то сработает тот набор инструкций, который будет прописан в этом разделе.

Нам нужно, чтобы ссылка поменяла цвет на оранжевый и при этом осталась тонкая линия подчёркивания. Для этого повторим все шаги из предыдущего раздела, кроме border-bottom: 1px solid; — это свойство достанется в наследство сразу всем ссылкам, а вот всё остальное нужно прописать заново.

Убираем стандартное подчёркивание:

Чтобы текст ссылки стал оранжевого цвета, используем команду:

Делаем у линии тот же цвет, что и у активной ссылки:

border-bottom-color: rgba(208, 64, 0, 0.2);

В итоге получим:

Помечаем использованные ссылки

Здесь всё то же самое, что и в предыдущем разделе, только вместо hover будем использовать visited — именно оно отвечает за поведение ссылки, по которой мы уже переходили. Цвет возьмём стандартный фиолетовый: #800080, и этот же цвет переведём в RGBA для подчёркивания ссылок.

15 сокращателей ссылок на замену Goo.gl

Эти бесплатные сервисы не хуже закрытого.

Google окончательно закрыла свой сервис Goo.gl. Все сокращённые ссылки по-прежнему будут работать, но для создания новых придётся искать другие инструменты.

Читать еще: Как сделать теплый пол в ванной

1. Is.gd

Бесплатный сокращатель ссылок имеет минимум возможностей и простой интерфейс. Чтобы отслеживать статистику, не надо регистрироваться, достаточно нажать на I want to see statistics for this URL под ссылкой.

2. To.click

Отличный функциональный сокращатель с быстрым редиректом и подробной статистикой.

3. Bit.do

Сокращатель ссылок от бразильской компании Insite. Сервис порадует подробной статистикой, а также возможностью задать имя для ссылки и даже создать собственный домен. За последнее, правда, придётся заплатить.

4. Tiny URL

Один из ветеранов сокращательного дела. Простой и удобный сервис, который служит верой и правдой уже много лет.

5. Ow.ly

Сервис от платформы отложенного постинга Hootsuite. Чтобы воспользоваться сокращателем, придётся зарегистрироваться в сервисе. Если вы планируете пользоваться им только для сокращения ссылок, выбирайте бесплатный тариф.

6. U.to

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

7. Cutt.us

Этот сервис примечателен тем, что в нём можно создавать сразу несколько ссылок.

8. Bitly

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

9. Zapier URL Shortener

Отличный сервис одноимённой компании для интеграции веб-приложений. Умеет не только сокращать ссылки, но и делать это автоматически при срабатывании определённых триггеров.

10. Rebrandly

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

11. Lnnk

Очень простой сервис сокращения, в котором можно генерировать защищённые паролем ссылки. Lnnk работает как в качестве веб-сервиса, так и в виде браузерного расширения.

12. Polr

Сервис Polr позволит быстро сократить любую ссылку и настроить её отображение, выбрав окончание на своё усмотрение. Кроме того, можно воспользоваться исходным кодом Polr и сделать собственную сокращалку.