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

Икона към хипервръзки в 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:%23
    e8554e' 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.

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

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

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

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

    BGtop


    OpenCloseComments

    4 Komentar

    • peSho 30 май 2018 г. в 12:43
      При мен нещо не се получиха нещата, но грешката е в мен може би.
      Полезен урок, който може малко да "разчупи" сайта ви.

      +1 в BGtop от мен и благодаря отново, че поставяте разнообразни уроци!
      • Пепа 31 май 2018 г. в 6:22 ?
        Интересно, защо не се е получило? Аз използвам втория вариант, сложете кода пред затварящия маркер head без да променяте нищо в него, запаметете и направете една хипервръзка от една статия към друга. Сигурна съм, че ще се получи.Чак тогава променяйте каквото и да е в кода.
      • peSho 31 май 2018 г. в 12:25 ?
        В тестовия блог стана. Благодаря за помощта! :)
      • Пепа 1 юни 2018 г. в 5:29 ?
        Не се и съмнявах, че ще стане. Радвам се за вас!
    Cancel