Вы здесь:   Главная » Вебмастеру    »    Кнопка Добавить в закладки браузера

Кнопка Добавить в закладки браузера

Небольшой обзор по размещению кнопки «Добавить в закладки», которую можно наблюдать в виде ссылки или жёлтой звёздочки в одном ряду с социальными виджетами. Приводимый пример кода можно вставить в шаблон любого сайта, в том числе воспользовавшись встроенным редактором WordPress или текстовым виджетом из ряда стандартных.

Кнопка Добавить в закладки браузера

Примечание! Код обрабатывается большинством современных интернет-браузеров (Internet Explorer, Mozilla Firefox, Opera), но не является универсальным. В ряде устаревших версий программ некорректно или полностью не работает!

В виде ссылки

Первый исходный код «Добавить в закладки» представляет собой текстовую ссылку:

<a rel="sidebar" href="" onclick="this.title=document.title;this.href=document.URL;if(window.external && (!document.createTextNode || (typeof(window.external.AddFavorite)=='unknown'))){window.external.AddFavorite(document.URL, document.title);return false}">Добавить в закладки...</a>

текст «Добавить в закладки…» можно изменить на свой («В избранное» или другое).

В виде картинки

Второй вариант предполагает отображение графического файла, например, вот такой звездочки  Добавить в закладки    распространённой среди веб-сайтов.

<a rel="sidebar" href="" onclick="this.title=document.title;this.href=document.URL;if(window.external && (!document.createTextNode || (typeof(window.external.AddFavorite)=='unknown'))){window.external.AddFavorite(document.URL, document.title);return false}">
<img src="https://wd-x.ru/wp-content/uploads/2014/10/star.png" alt="Добавить в закладки" title="Добавить в закладки..." width="22" height="22" />
</a>

Здесь достаточно изменить ссылку на изображение на вашем сайте, и если требуется отредактировать теги «alt» — альтернативный текст, «title» — заголовок (всплывающая надпись).

P.S.

Вот и всё, никаких дополнительных изменений в шаблон сайта вносить не требуется. Создать индивидуальный стиль для кнопки Вы сможете самостоятельно, добавив его в файл «style.css» или обернув код в теги <div> (может потребоваться при позиционировании или добавлении эффектов).

Расскажи друзьям:

Комментарии
  1. Denis
    • admin
      • Denis
        • admin
  2. Denis
    • admin
      • Denis
        • admin

Оставить комментарий

Авторизоваться через: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: