Текст. Изплаващо пояснение за хипервръзките в блога

Здравейте, скъпи приятели, читатели и гости на Blogzablogove.com. За пояснение или публикуване на допълнителна информация в блога или сайта, често се използват изплаващи пояснения. Изплаващите пояснения при преместване на курсора върху хипервръзки ще бъдат полезни не само за вашите посетители, но и ще добавят още един детайл към дизайна на публикацията.
На много сайтове и блогове ще се натъкнете на такъв вариант на тази опция. За моя изненада открих, че нямам нито една публикация по тази тематика. Въпреки, че вариантите за изплаващи пояснения са достатъчно много. А този, който ви предлагам днес, моля, разгледайте тестовия блог тук.

Копирайте следния код, за да направите някои промени в него според дизайна си.

<script type='text/javascript'>

//<![CDATA[

(function() {

    var a = document.getElementsByTagName('a');
    var t = document.createElement('span');
        t.id = "tt";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#E46969";
        t.style.border = "1px solid  #9F0707";
        t.style.font = "bold 11px Tahoma,Arial,Sans-Serif";
        t.style.boxShadow = "0 1px 3px rgba(0,0,0,0.4)";
        t.style.padding = "5px 10px";
        t.style.color = "#000";
        t.style.maxWidth = "170px";
        t.style.wordWrap = "break-word";
        t.style.display = "none";
    document.body.appendChild(t);
    var tooltip = document.getElementById('tt');

    function over(e) {
        tooltip.style.display = "block";
        tooltip.innerHTML = this.title;
        tooltip.style.top = (e.pageY + 25) + 'px';
        tooltip.style.left = e.pageX + 'px';
        this.setAttribute('original', this.title);
        this.title = "";

    }

    function out() {
        tooltip.innerHTML = "";
        tooltip.style.display = "none";
        this.title = this.getAttribute('original');
        this.removeAttribute('original');
    }

    for (var i = 0; i < a.length; i++) {
        if (a[i].title) {
            a[i].onmouseover = over;
            a[i].onmouseout = out;
        }
    }

})();
//]]>
</script>

Маркирах с различен цвят в него тава, което можете да промените:

➤Фон на прозореца за пояснение;

➤Дебелината и цвета на рамката;

➤Размер и цвят на шрифта;

➤Сянката;

➤Отстъпите;

След като направите промените си, идете в редактора на Тема ➔ Направете резервно копие на темата си ➔ изберете редактиране на HTML кода ➔ използвайте клавишите CTRL + F (прочетете тук за това) ➔ намерете затварянщия маркер </ body> ➔  инсталирайте готовия код над него.

Ако се затруднявате с намерането му по този начин, просто започнете да разглеждате кода на темата от края му. Обикновено </ body> не е далече.
Кликнете върху визуализация, за да прегледате направената промяна и ако нямате забележки - запаметете.
Сега, когато пишете публикация, на мястото, където се предполага да има хипервръзка, в HTML режим я оформете така:

<a href=" адрес на страницата, където води хипервръзката" title="текст в прозореца на изплаващото пояснение">тук е хипервръзката</a>

Това е. Няма нищо сложно. Опитайте, експериментирайте и всичко ще се получи.

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

Е, това е всичко за днес. Благодаря за вниманието. До нови срещи.

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

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




Продължение