
Сразу скажу, что на данный момент, в этом блоге установлен скрип кнопок именно от Share42. Когда-то давно здесь, в блоге, были установлены обычные HTML кнопки, но от них я благополучно избавился в пользу JavaScript варианта. Объясню почему: самое главное - это довольно громоздкий код этих самых HTML-кнопок в шаблоне, плюс еще и к каждой такой кнопке должно прилагаться отдельное изображение, а это все "вес" шаблона, количество запросов к серверу и соответственно скорость загрузки блога, по-этому - фТопку!
Почему социальные кнопки именно этого сервиса? То что мне в первую очередь понравилось, что вы получаете архив с исходником скрипта и спрайт-изображением выбранных кнопок, которое очень легко заменить на любое другое. То есть вы не зависите от стороннего сервиса и их серверов, а также свободно можете изменить внешний вид кнопок.
Ну а теперь, собственно, о том как добавить скрипт кнопок от Share42 на Blogger.
Первым делом идете на официальный сайт выбираете нужные кнопки - их там аж 41 социальная + 5 прочих (RSS, "Наверх", "Печать", eMail, и "В закладки браузера"), при выборе опций определяетесь с расположением, указываете кодировку UTF8, если подключен jQuery устанавливаете галочку и вперед - жмете на "скачайте готовый скрипт". Готово, теперь открываем архив и видим два файла: первый - скрипт, второй - спрайт-изображение.
Чтобы избежать некорректного отображения текста в всплывающих подсказках у кнопок, необходимо заранее, до загрузки скрипта на свой хостинг, открыть файл через текстовый редактор NotePad++ или любой другой где можно изменить кодировку документа, и точно указать кодировку UTF-8(без BOM)
У новичков возникает резонный вопрос: "Куда заливать скрипт социальных кнопок для Blogger?". Вполне спокойно, для получения прямой ссылки можно использовать Google Drive.На сайте есть два варианта кода для разного расположения:
1. Горизонтальное
<div class="share42init"></div>
<script type="text/javascript" src=".../share42.js"></script>
2. Вертикальное<script type="text/javascript" src=".../share42.js"></script>
<div class="share42init" data-top1="150" data-top2="20" data-margin="0"></div>
<script type="text/javascript" src=".../share42.js"></script>
Ну тут понятно - там где ".../share42.js" вставляете свою ссылку на скрипт share42.js, которую получили или с Google code или с Google Сайты.<script type="text/javascript" src=".../share42.js"></script>
Но что же делать с изображением, куда загружать его и как его добавить? На сайте есть рекомендации по этому поводу:
Для опытных пользователей
При необходимости вы можете указать произвольный путь к папке с файлом иконок (icons.png). Для этого к тегу div.share42init добавьте параметр data-path, например: data-path="http://site.name/folder/".
А что мы делаем в Blogger? Конечно воспользуемся данным советом!
Для начала зальем изображение к себе в "Черновик" или в свой веб-альбом Picasa и получим ссылку типа:
http://3.bp.blogspot.com/длинная абракадабра из цифр и букв/s1600/icons.png
Берем ссылку и удаляем от туда icons.png, совсем. И остается у нас купированный вариант:http://3.bp.blogspot.com/длинная абракадабра из цифр и букв/s1600/
В итоге получаем следующую конструкцию:<div class='share42init' data-path='http://3.bp.blogspot.com/длинная абракадабра из цифр и букв/s1600/' />
<script src='.../share42.js' type='text/javascript'/>
Думаю суть ясна. Теперь о том куда все это всунуть в шаблоне. Находим одну из ниже приведенных строчек, предварительно поставив галочку на "Расширить шаблоны виджета" и ниже одной из них устанавливаем свою готовую конструкцию кода.<script src='.../share42.js' type='text/javascript'/>
<div class='post-footer-line post-footer-line-1'> <!--тут сразу всего много -->
<div class='post-footer-line post-footer-line-2'> <!-- тут поменьше но тоже есть -->
<div class='post-footer-line post-footer-line-3'> <!--а вот сюда будет в самый раз -->
<div class='post-footer-line post-footer-line-2'> <!-- тут поменьше но тоже есть -->
<div class='post-footer-line post-footer-line-3'> <!--а вот сюда будет в самый раз -->
Если в шаблоне запись, под которую вы поместили блок скрипта кнопок имеет вид:
Вот и все, наслаждаемся отличными кнопками и нормальным кодом шаблона. Удачи.
<div class='post-footer-line post-footer-line-2'/>
То её нужно расширить (раскрыть):<div class='post-footer-line post-footer-line-2'>
<!--тут размещаете блок-->
</div>
<!--тут размещаете блок-->
</div>
Попробовал,да все так кнопки стоят, вот одна деталь у кнопок при наведении абракадабра выползает,нельзя ли, как нить ее заменить на фразы рекомендовать туда то, и как нить под фон затемнить ото пестрые они, а так все работает перенаправляет на комент, что очень приятно спасиб
ОтветитьУдалитьЧтобы не было аброкадабры, нужно файл самого скрипта открыть в текстовом редакторе NotePad++ - любом где можно изменить кодировку документа, и точно указать кодировку UTF-8 (без BOM) - у меня тоже такое было, просто упустил как-то при написании, там же и поменяете надписи, которые появляются. Если нет редактора можете качнуть здесь
Удалитьhttp://www.magentawave.com/2012/03/notepad-598-portable.html
Чтобы поменять иконки переделайте картинку спрайта на те, которые вам нравятся. Все в ваших руках.
Перевел в NotePad++, но там над обратно в формат вернуть ото его не принимают обратно измененного опять. А так все правильно в это проге наглядно видно, как меняется кодировка помучился малость но всеж, у остальных не такой набор иконок, щас по русски написано что куда спасиб за подсказку) еще думаю как их бы вот затенить а светились чтоб по наведению,слышал где то было там отдельный кусок скрипта,было б здоровски щас эту тему делаю)
УдалитьЕще раз Спасибо) все вышло)
Я когда себе делал, то ничего не возвращал, но мало ли... Главное что у вас все получилось. А затемнение и осветление при наведении можно сделать при помощи свойства box-shadow указав в параметрах тени что она должна быть внутри - inset, ну и подобрать нужные размеры размытия. Плюс вы можете сделать любой цвет, не только серый.
УдалитьСпасибо большое. У Вас замечательный сайт))) все с первого раза получилось абракодабры исчезли))) кодировку файла я тоже назад не меняла только имя изменила и залила опять на серв гугл.
УдалитьБольшое спасибо. Со сменой хостинга долго думал по этому поводу - ничего не получалось. Про Picasa почему-то и в голову не приходило!
ОтветитьУдалитьЯ уж и сам не помню как допер :) Это был тот самый популярный метод - метод научного тыка.
УдалитьОтлично! Теперь все работает как часы. Здесь же с иконками тоже реально перекат при наведении реально реализовать?
УдалитьДумаю да, но я не пробовал.
Удалитьа если еще вот так сделать то шара отдельных постов будет доступна непосредственно с главной
ОтветитьУдалитьhttp://f5.s.qip.ru/aN0HtOf1.png