Икона към външните хипервръзки в Blogger

На всички, които четат, здравейте! Забелязали ли сте, че в някои блогове и сайтове външните хипервръзки имат малка икона до себе си? Това не е просто един вид оформление на хипервръзките в блога или сайта. Задачата на тази икона е да укаже, че хипервръзката води към друг блог или сайт.

За да може потребителят да различава такива хипервръзки от обикновените, към външните хипервръзки се добавя малка икона, която информира, че тя сочи към друг ресурс и потребителят ще напусне този, който разглежда в момента.
Искам да ви покажа как да реализирате това оформление на хипервръзките в Blogger. Ще разгледаме три варианта.

Първи вариант

Всички външни хипервръзки ще бъдат маркирани с икона. Не само в публикациите и на статичните страници. Между другото, препоръчвам на начинаещите да инсталират този код в блога си за известно време, за да видят колко хипервръзки вече съществуват в темата им, водещи към странични ресурси. В публикацията „Премахнете всички ненужни хипервръзки от главната страница на блога“ пиша за това. Всички те, хипервръзките, ще бъдат с икона.

Кодът е такъв:
Той се инсталира в раздела "Тема" преди реда </ b: skin>.

a[href^="http://"]:not([href*="URL на блога"]):after,
a[href^="https://"]:not([href*=" URL на блога"]):after,
a[href^="ftp://"]:not([href*=" URL на блога"]):after {
 content: "" url('https://webliberty.ru/wp-content/uploads/2014/12/external.png');
 padding-left:5px;
}

➤В редовете, отбелязани в червено, нанесете адреса на вашия блог;

➤В синьо е адреса на изображението на иконата. Можете да изберете свое изображение за нея;

Но това е стандартното изображение на иконата.

Втори вариант

Външните хипервръзки ще бъдат маркирани с икона само на страниците с публикации.

Кодът е:

Той също се инсталира в раздела "Тема", но преди затварящия маркер </ head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/*<![CDATA[*/
.post-body a[href^="http://"]:after,
.post-body a[href^="https://"]:after {
  content: '';
  background: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23e8554e' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;
  background-size: 14px 14px;
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-left: 3px;
  vertical-align: -2px
}
.post-body .tr-caption-container a:after,
.post-body .separator a:after,
.post-body a[href^="https:// URL на блога/"]:after,
.post-body a[href^="http:// URL на блога/"]:after {
  content: '';
  background: 0 0;
  width: 0;
  height: 0;
  margin-left: 0
}
/*]]>*/
</style>
</b:if>

➤В червено е адресът на вашия блог;

➤Синьото е шестцифреният код на цвета на иконата, но без символа #. Можете да направите иконата в какъвто искате цвят. Използвайте тази таблица.

Трети вариант

С него можете да оформите хипервръзка само в една конкретна публикация. За тази цел създаваме клас "external" и задаваме стиловете.

Код:

<style>A.external {
    background: url(https://webliberty.ru/wp-content/uploads/2014/12/external.png) no-repeat 0 5px;
    padding-left: 13px;
   }</style>

<a href="адрес на страницата, към която води хипервръзката" class="external">название(анкор на хипервръзката)</a>

➤За да разположим иконата в дясната страна на хипервръзката трябва да замените значението в свойството background 0 на 100% ;

➤Вместо padding-left да напишете padding-right;

В този вариант кодът се вписва на нужното място в публикацията в режим HTML.

Виждате, че имате избор. Направете го.

Пожелавам успех!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: