Будь в курсе событий!

14.06.2013

Социальные кнопки с эффектом при наведении

Leave a Comment
Сейчас в каждом блоге просто таки должен быть блок со ссылками на профили автора в социальных сетях. Начиная от самых популярных типа твитера, Вконтакте и заканчивая общепризнанными проектами вроде Google+ и Facebook. Сюда же часто добавляют ссылки на другие сайты социальных медиа - Youtube, Pinterest и др. Ну, и конечно, не следует забыть про RSS. Все это дополнительная возможность для пользователей присоединиться к вашей аудитория в соц.сервисах и получать обновленную информацию там, где им наиболее удобно.
О блоках подписки в блоге уже несколько раз упоминал, из недавнего статья блок подписчиков и фолловеров в сайдбаре с отображением числа пользователей. Кое-что было и раньше, можете заглянуть в раздел социальные возможности Blogger. Сегодня расскажу о виджете социальных кнопок с эффектом наведения, источник здесь. Вот как он выглядит.
Для установки заходим в админ панель Blogger. Выбираем пункт меню "Дизайн". Затем создаем новый виджет "HTML/Javascript". Можно добавить его, например в сайдбар или футер - все зависит от вашего макета.
В сам виджет добавляем код:




Дальше сохраняем и проверяем работоспособность виджета - отображается ли он, работает ли эффект наведения и переход по ссылкам.
Если все ок, то нужно будет внести в код некоторые модификации. Опять же открываем раздел "Дизайн", выбираем редактирование только что созданного виджета. Здесь есть несколько параметров/настроек, которые можно изменить:
1. Во-первых, в самом конце кода найдете ссылки на профили в тех или иных социальных сервисах - https://www.facebook.com/bloggertrix, https://plus.google.com/107955298793879607964 и т.п. Все ссылки нужно обязательно(!) заменить на свои.
Социальные кнопки
2. Во-вторых, желательно для русских или украинских блогов заменить текст "Follow us on" на соответствующие русские и украинские аналоги.
3. В приведенном выше коде в начале идет блок разных стилей style, в нем можете отредактировать те или иные элементы, которые вас не устраивают. Например, возможно, вы захотите изменить иконки сервисов какими-то другим соц.сетями - ищите в коде background:url, где имеется ссылка на картинку с иконками. Вы можете сохранить файл, изменить его с помощью фотошопа, после загрузить на свой хостинг Ukrnames или другой, а затем замените линк в коде. Кроме того, белый цвет шрифта подойдет не всем дизайнам, хотя черный будет не так ярко смотреться на фоне кнопки при наведении. Как бы там ни было, стили вы можете менять под себя и свои нужды. 


0 коммент. :

© 2012-2017 Cash's from program