Посилання в блогах та сайтах служать в першу чергу для того, щоб зв'язати між собою схожі сторінки і тим самим зацікавити читача іншими публікаціями нашого ресурсу.
Відео інструкія
Під час такого з'єднення відбувається перелінковка сторінок і це допомагає нашому блогу та його публікаціям стати більш популярним та набрати більше рейтингу в пошукових системах.
Однак головна умова тут в тому, що перелінковувати між собою потрібно тільки схожі за змістом сторінки. Якщо тема сторінок суттєво відрізняєтся, тоді це може навіть зашкодити просуванню блога.
Також посилання слід застосовувати, якщо нам потрібно вказати в публікаціях інший сайт або блог, щоб користувачі могли перейти на нього.
Як створити посилання на сайт
В кожній платформі будь то блог, сайт, форум і т.д. додатково надається HTML редактор. Отже перейдіть у свій HTML редактор, та пропишіть наступний код:
<a href='link.com'> текст посилання </a>Замість link.com вставте посилання свого ресурсу.
Текст посилання - це анкор, тобто текст який супроводжує посилання.
Щойно я показав вам універсальний метод створення html посилання. Однак у всіх сучасних редакторах посилання можно створити значно простіше. Вам просто потрібно знайти на панелі іконку або символ схожий на ланцюг, а деколи ця функція так і підписана Посилання або Прив'язати.
Відкривати посилання в новій сторінці браузера
Для того щоб користувачі могли відкрити посилання в новій сторінці браузера нам необхідно дописати в нашому HTML коді атрибут target _blank ось власне зразок:
<a href='link.com' target='_blank'> текст посилання </a>
Ось і все тепер, коли читачі будут натискати на посилання сторінка буде відкриватися в новому вікні браузера.
Як запобігти передачі рейтингу іншим сайтам
Само по собі посилання віддає певну частину рейтингу нашої сторінки іншій сторінці, на яку власне воно посилається. Якщо це сторінка нашого блогу, то не страшно, однак, якщо це сторінка іншого ресурсу, тоді буде доцільно, якщо ми збережемо рейтинг своєї публікації. Це можна зробити дописавши атрибут rel nofollow ось приклад:
<a href='link.com' rel='nofollow'> текст посилання </a>
Готово, після цього наша сторінка залишить рейтинг при собі.
Якщо у вас виникли питання стосовно даної теми пишіть в коментарях.
Як створити HTML кнопку
<a href='linkos.com'> текст посилання </a>Далі нам потрібно присвоїти цьому посиланню атрибут 'class', під будь-якою назвою, наприклад class='knopka' . Це потрібно для того, щоб CSS код, який ми зараз напишемо, звертався саме до цього посилання, інакше він просто не буде працювати. Як це має виглядати:
<a class='knopka' href='linkos.com'> текст посилання </a>Чудово, тепер можемо приступити до написання CSS:
.knopka{color:#fff; padding:8px; background:#ff6006;}Готово. Тепер давайте подивимося, що у нас вийшло: текст посилання
Місія майже завершена, але давайте ще додамо кілька штрихів, наприклад зробимо кути кнопки трохи круглими та додамо їй тіні:
.knopka{color:#fff; padding:8px; background:#ff6006; border-radius:4px; box-shadow:2px 2px 4px -2px rgba(0,0,0,0.4)}Подивимося на результат: текст посилання Так мені подобається значно більше. Якщо потрібно зробити кнопку круглою або овальною, можна збільшити значення border-radius до 100px, і тоді отримаємо: текст посилання
А зараз буде «фаталіті», додамо нашій кнопці іконку fontawesome. Нехай це буде іконка конверта:
<a class='knopka' href='linkos.com'> текст посилання <i class="fa fa-envelope" aria-hidden="true"></i> </a>Палітра кольорів
- #5C97BF
- #4B77BE
- #1F3A93
- #2574A9
- #67809F
- #34495E
- #3A539B
- #1E8BC3
- #6BB9F0
- #22313F
- #336E7B
- #19B5FE
- #89C4F4
- #2C3E50
- #3498DB
- #22A7F0
- #94E0EE
- #52B3D9
- #59ABE3
- #26A65B
- #1E824C
- #00B16A
- #2ABB9B
- #4DAF7C
- #03A678
- #26C281
- #019875
- #3FC380
- #16A085
- #2ECC71
- #C5EFF7
- #C8F7C5
- #049372
- #36D7B7
- #66CC99
- #1BA39C
- #1BBC9B
- #65C6BB
- #BFBFBF
- #ABB7B7
- #DADFE1
- #95A5A6
- #C5DCE2
- #BDC3C7
- #EEEEEE
- #D2D7D3
- #F0E2C5
- #EB9532
- #E67E22
- #F27935
- #F9BF3B
- #F7CA18
- #F9690E
- #F39C12
- #D35400
- #F4D03F
- #F5AB35
- #EB974E
- #F2784B
- #F4B350
- #E87E04
- #E74C3C
- #CF000F
- #C0392B
- #D64541
- #EF4836
- #96281B
- #D91E18
- #E26A6A
- #FF0000
- #F22613
- #E08283
- #9B59B6
- #8E44AD
- #BE90D4
- #BF55EC
- #9A12B3
- #913D88
- #722D6A
- #740A4E