X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Кнопки "поделиться новостью", Симпатичные кнопки "рассказать друзьям"
bifot
bifot
Topic Starter сообщение 10.9.2013, 20:08; Ответить: bifot
Сообщение #1


Всем привет! Увидел я красивые кнопки, чуток их заменил и сегодня от "нечего делать" я сделал вот такие кнопки, сначала хотел делать на share42, а потом передумал и сделал с помощью api яндекса. Да, я знаю что здесь выкладывались кнопки, но эти с другим дизайном.

Я выкладываю на всеобщее обозрение "кнопки поделиться". Там есть "facebook", "vk", "twitter", "Мой мир", "Одноклассники", "Google Plus". Эти кнопки замечательны тем, что они аккуратные, красивые, не занимают много кода.

Скачать | Демо

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

Добавляем вот такой css код к себе на страницу..

b-share-icon {
    width: 32px !important;
    height: 32px !important;
    background: url(icons.png) no-repeat scroll 0px 0px transparent !important;
}
.b-share-icon_vkontakte  {
        background-position: -96px 0px !important;
}
.b-share-icon_moimir {
    background-position: -128px 0px !important;
}
.b-share-icon_odnoklassniki {
    background-position: 0px 0px !important;
}
.b-share-icon_twitter {
    background-position: -32px 0px !important;
}
.b-share-icon_facebook  {
    background-position: -64px 0px !important;
}
.b-share-icon_gplus  {
    background-position: -160px 0px !important;
}


А продолжим мы html кодом.. Это див, из-за которого все и генерируется.

<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="odnoklassniki,twitter,facebook,vkontakte,moimir,gplus"></div>


Осталось подключить JS и все, мы сделаем наши кнопки! Подключаем скрипт от "Яндекса".
<script type="text/javascript" src="http://yandex.st/share/share.js" charset="utf-8"></script>




Материал с сайта bifot.ru


Сообщение отредактировал lostprophet - 14.9.2013, 12:34
Причина редактирования: По просьбе ТС


--------------------
веб-мастер, с радостью адаптирую Ваши сайты под мобильные устройства

портфолио/прайс/отзывы, вконтакте


Поблагодарили: (4)
5
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
profican
profican
сообщение 10.9.2013, 21:04; Ответить: profican
Сообщение #2


Надо ли понимать, что если рухнет сайт http://yandex.st, то кнопки пропадут? facepalm.gif
Что не есть гуд, ИМХО.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bifot
bifot
Topic Starter сообщение 10.9.2013, 21:13; Ответить: bifot
Сообщение #3


(profican @ 10.9.2013, 20:04) *
рухнет сайт http://yandex.st

Надо же понимать, что это сайт никого-то школьника на укозе. Яндекс крупная компания, у них на вряд ли упадет, но если упадет, то не на долго. nea.gif


--------------------
веб-мастер, с радостью адаптирую Ваши сайты под мобильные устройства

портфолио/прайс/отзывы, вконтакте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lifeout
lifeout
сообщение 11.9.2013, 22:40; Ответить: lifeout
Сообщение #4


Да вы шутите... smile.gif подключать 50кб скрипта для того, чтобы заставить работать шаринг на пять соцсетей?)


--------------------
<aside>Верстаю</aside>


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
unical
unical
сообщение 11.9.2013, 23:00; Ответить: unical
Сообщение #5


замечательны тем, что они аккуратные, красивые, не занимают много кода

Ну это да. А не проще самому подобное сделать?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bifot
bifot
Topic Starter сообщение 12.9.2013, 15:02; Ответить: bifot
Сообщение #6


(lifeout @ 11.9.2013, 21:40) *
подключать 50кб

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


--------------------
веб-мастер, с радостью адаптирую Ваши сайты под мобильные устройства

портфолио/прайс/отзывы, вконтакте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bifot
bifot
Topic Starter сообщение 12.9.2013, 15:02; Ответить: bifot
Сообщение #7


Дорогие друзья, оценивать сам скрипт смысла не имеет, т. к. не я создатель, а яндекс. Сделал я кнопочки...)

Сообщение отредактировал bifot - 12.9.2013, 15:03


--------------------
веб-мастер, с радостью адаптирую Ваши сайты под мобильные устройства

портфолио/прайс/отзывы, вконтакте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lifeout
lifeout
сообщение 12.9.2013, 20:22; Ответить: lifeout
Сообщение #8


Ну как же нет смысла оценивать? Вы же черным по белому пишете:

(bifot @ 10.9.2013, 19:08) *
Эти кнопки замечательны тем, что они аккуратные, красивые, не занимают много кода.


--------------------
<aside>Верстаю</aside>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bifot
bifot
Topic Starter сообщение 13.9.2013, 14:22; Ответить: bifot
Сообщение #9


lifeout, Ну да, место много не занимает. Я не могу оценить чужой скрипт? Давайте не оффтопть. popcorn2.gif Если есть вопросы - в лс.


--------------------
веб-мастер, с радостью адаптирую Ваши сайты под мобильные устройства

портфолио/прайс/отзывы, вконтакте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
asusa3a
asusa3a
сообщение 13.9.2013, 16:06; Ответить: asusa3a
Сообщение #10


Кнопку гугл +1 забыли)


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Требуется помощь по сайту на "ВордПресс"
Закрылся доступ в панель администратора
12 Tia2 1527 25.3.2024, 6:54
автор: Skyworker
Открытая тема (нет новых ответов) ✅ sms.chekons.com - ⭐ Сервис для получения SMS на реальные номера USA "Non-VoIP, безлим SMS, API" ⭐
Сервис для получения SMS на реальные номера USA
10 Chekon 3582 24.3.2024, 14:15
автор: Chekon
Открытая тема (нет новых ответов) ⭐⭐⭐ Google Voice | Gmail - OLD аккаунты "SMS и звонки" ⭐⭐⭐
12 Chekon 3817 24.3.2024, 13:56
автор: Chekon
Опрос (нет новых голосов) Опрос: Результаты в упражнении "Жим лёжа" у вэбмастеров
35 Room 4464 13.3.2024, 13:10
автор: Room
Открытая тема (нет новых ответов) "Лежащий" домен - 10 лет. Продать?
8 Wolfhound 2382 5.3.2024, 3:22
автор: Liudmila


 



RSS Текстовая версия Сейчас: 29.3.2024, 0:58
Дизайн