1 просмотров
Рейтинг статьи
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. Для моей ссылки полный путь : http://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-код.

Источники:

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

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

Adblock
detector
×
×