5 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

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

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

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

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

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

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

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

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 и сделать собственную сокращалку.

13. YOURLS

Ещё один проект для создания собственного сервиса сокращения ссылок, предоставляющий подробную статистику об источниках трафика.

14. Vk.com/cc

Удобный сокращатель ссылок от социальной сети «ВКонтакте». Правда, он доступен только для зарегистрированных пользователей.

15. Clck.ru

Максимально простой и удобный сервис от «Яндекса». Помимо короткой ссылки, он создаёт ещё и QR-код.

Источники:

https://klubladyfinans.ru/kak-sdelat-krasivuyu-partnerskuyu-ssylku-poshagovaya-instrukciya/
https://thecode.media/css-links/
https://lifehacker.ru/alternativy-goo-gl/

голоса
Рейтинг статьи
Ссылка на основную публикацию
Статьи c упоминанием слов:

Для любых предложений по сайту: [email protected]