Всплывающая подсказка для ссылок в Блоггере

Здравствуйте, дорогие друзья, читатели и гости блога. Всплывающая подсказка при наведении на ссылку курсора не только будет полезна вашим посетителям, но и добавит ещё небольшую деталь к оформлению сообщения. На многих сайтах вы сталкивались с таким вариантом подсказок.

Я, к своему удивлению, обнаружила, что у меня на эту тему нет ни одного поста. Хотя вариантов всплывающих подсказок достаточно много. А тот, который сегодня вам предлагаю, прошу посмотреть на тестовом блоге.

Демонстрация.

Скопируйте следующий код к себе в блокнот, чтобы сделать некоторые изменения  под ваш дизайн.

//<![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>

И всё. Сложного нет ничего. Пробуйте, экспериментируйте и все обязательно получится.

В этом посте вариант красивого оформления ссылок.

Сегодня у меня всё и спасибо вам всем за внимание. До новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email