Кнопки поделиться — красивая плавающая панель
X
Заказать сайт
Заказать сайт

Кнопки поделиться - красивая плавающая панель

1

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

Данные кнопки создаются на сайте share42.com. Вы и сами можете попробовать сделать их там. Но единственный минус данного конструктора для плавающих кнопок - не создается css стиль белой подложки и кнопочки, как бы висят на фоне сайте. Бывает их не заметно вообще или они портят дизайн. Поэтому подложка просто необходима.

Скачать готовый скрипт кнопок поделиться (плавающих на экране):  podelitsa.zip ( Скачали: 15 чел. ) 

Также вы можете заказать программу или сайт, на этом проекте.

Подключаются кнопки так.
1. Вставьте код внутри тегов <body>здесь</body> на вашем сайте:
<div class="share42init" data-top1="150" data-top2="41" data-margin="0"></div>
<script type="text/javascript" src="/share42/share42.js"></script>

2. Сразу после этого кода вставьте один из стилей кнопки

Стиль для кнопки справа:
<style>
#share42 {
position: fixed;
z-index: 9999;
margin-left: 0px;
right: 0px;
padding: 13px 7px 7px;
opacity: 0.95;
background-color: rgb(243, 248, 252);
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-style: solid solid solid none;
border-top-color: rgb(207, 222, 239);
border-right-color: rgb(207, 222, 239);
border-bottom-color: rgb(207, 222, 239);
box-shadow: rgb(255, 255, 255) -1px 1px 0px inset, rgb(255, 255, 255) 0px -1px 0px inset;
border-radius: 7px 0px 0px 7px;
border: 1px solid #C0C0C0;
border-right: 0px;
}</style>

Стиль для кнопки слева:
<style>
#share42 {
position: fixed;
z-index: 9999;
margin-left: 0px;
left: 0px;
padding: 13px 7px 7px;
opacity: 0.95;
background-color: rgb(243, 248, 252);
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-style: solid solid solid none;
border-top-color: rgb(207, 222, 239);
border-right-color: rgb(207, 222, 239);
border-bottom-color: rgb(207, 222, 239);
box-shadow: rgb(255, 255, 255) -1px 1px 0px inset, rgb(255, 255, 255) 0px -1px 0px inset;
border-radius: 0px 7px 7px 0px;
border: 1px solid #C0C0C0;
border-left: 0px;
}</style>

3. Загрузите скачанную папку share42 с файлами в корень вашего сайта

PS Если вам нужны другие соцкнопки, то сделайте их на сайте share42.com с плавающей панелью, а стили (пункт 2) можете взять отсюда.

| | Кнопки поделиться - красивая плавающая панель | В последнее время мне больше нравятся кнопки поделиться, которые находятся справа или слева от экрана. Предлагаю вам готовый скрипт, пример которого в | https://blogprogram.ru/wp-content/uploads/2014/02/1-131x131.jpg

2 коммент. на “Кнопки поделиться - красивая плавающая панель”

  1. ews56ews:

    Здорово вы мне помогли. Честное слово, новыми красками все заиграло.

  2. owregtor800:

    Просто замечательно - очень интересные мысли. Пока прочитал только эту одну запись, если и все остальное точно также хорошо, то автору респект

Добавить комментарий

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


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>