Мы расскажем и покажем вам, как добавить плавающую панель социальных закладок к себе в мониторинг.

Пример панели

Живой пример панели можно увидеть в демо-версии нашего мониторинга.

Для создания такой панели нам поможет скрипт кнопок социальных закладок и сетей www.share24.com.

1. Выберите размер и отметьте иконки сервисов, которые хотите использовать на своем сайте. Порядок иконок можно менять путем перетаскивания мышью.

Настройки панели

2. Выберите нужные опции:

  • Тип панели с иконкам: вертикальная "плавающая";
  • Ограничить видимое кол-во иконок: отметьте галочку и укажите кол-во;
  • Кодировка вашего сайта: UTF-8;
  • Язык подсказок у иконок: русский;
  • Добавить иконку сайта Share42.com: включите галочку по желанию.

Настройки панели

3. Нажмите на кнопку "Посмотрите, как это будет выглядеть", чтобы оценить результат.

4. Нажмите на кнопку "Скачайте готовый скрипт" и сохраните архив.

Скачать и сохранить

5. Распакуйте архив со скриптом, скаченный в пункте 4.

6. Загрузите папку "share42" в корень вашего сайт по FTP или файлового менеджера.

Загрузите папку "share42" в корень вашего сайт

7. Вставьте в шаблон вашего сайта  представленный код:

<script type="text/javascript" src="<?php bloginfo(‘url’); ?>/share42/share42.js"></script>
<script type="text/javascript">share42(‘<?php bloginfo("url"); ?>/share42/’,",",250,30)</script>

250 — расстояние от начала страницы до плавающей панели (в пикселях);

30 — расстояние от верха видимой области страницы до плавающей панели (в пикселях).

Код необходимо вставить в файл: корень_сайтаwp-contentthemesexchange_monitoringheader.php строка 28.

Файл header.php можно скачать к себе на компьютер, открыть с помощью редактора Notepad++, вставить код, сохранить файл и закачать обратно в туже папку (корень_сайтаwp-contentthemesexchange_moniotoring).

Вставить код в header.php

Или файл можно отредактировать прямо на хостинге с помощью встроенного файлового менеджера.

8. Для оформления плавающей панели,  в файл стилей вашего сайта: корень_сайтаwp-contentthemesexchange_monitoringstyle.css добавьте код, в его начало.

/*Стили плавающей панели социальных закладок — Начало*/
#share42 {
position: fixed;
z-index: 1000;
margin-left: -75px; /* смещение панели влево от края контента */
}

#share42 {
padding: 6px 6px 0;
background: #FFF;
border: 1px solid #E9E9E9;
border-radius: 4px;
}

#share42:hover {
background: #F6F6F6;
border: 1px solid #D4D4D4;
box-shadow: 0 0 5px #DDD;
}

#share42 a {opacity: 0.5}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}
/*Стили плавающей панели социальных закладок — Конец*/

Код стилей в файле style.css

9. Готово. Панель социальных закладок добавлена!

Если у вас оставил вопросы, то вы можете задавать их в комментариях!

P.S.: Плавающая панель может сразу не появится на сайте. Это связано с кэшом в браузере. Очистите его в браузере с помощью клавиши F5 или в панели управления мониторингом — > Параметры — > Hyper Cache — > кнопка Clear Cache

Раздел: Новости

Комментарии(0):

Комментарии отключены.