Здравствуйте, читатели этого блога!
Сегодня мы поговорим о том как добавить кнопки соц сетей на сайт, используя небольшой скрипт! Научимся его устанавливать и редактировать, и так сказать — разберем его небольшую структуру!
Ну во-первых, я пишу этот пост по заказу одного моего не просто читателя, но и хорошего друга — Лары Мазуровой! Она тоже ведет свой блог в сети под оригинальным названием Интернет Капуста.
Ну начнем с того, что это не те кнопки — «поделись с друзьями»! Это скорее всего кнопки, которые ведут на ваши социальные аккаунты (ваши персональные страницы в соц.сетях). А также эти кнопочки особенные:)
Чем же они особенные? А вот смотрите:
Кнопки соц. сетей для сайта
А чтобы вам проще было это сделать, я предоставляю вам скриншот старого шаблона (просмотреть старый шаблон)…
Ну, а новым вы и так сможете любоваться теперь каждый день! Со временем я буду его дорабатывать и он станет еще лучше!
Ну что, поехали дальше!
Как установить скрипт кнопок соц. сетей?
Ну здесь все просто и долго заморачиваться не нужно! Вообщем, все как вы любите!
Вот и сам скрипт:
|
1
|
<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id=«social»> <!—Start Rss Icon—> <a title=«Grab Our Rss Feed» href=«ССЫЛКА НА ВАШ RRS ПРОФИЛЬ» rel=«nofollow» target=«_blank»><img border=«0» src=«ПУТЬ К КАРТИНКЕ RSS» style=«margin-right:1px;» alt=«Icon» /></a> <!—End Rss Icon—> <!—Start Facebook Icon—> <a rel=«nofollow» title=«Like Our Facebook Page» href=» ССЫЛКА НА ВАШ ПРОФИЛЬ в фейсбук» » target=»_blank«><img border=»0» src=»ПУТЬ К КАРТИНКЕ ФЕЙСБУКА» style=»margin—right:1px;» alt=»Icon» /></a> <!—End Facebook Icon—> <!—Start Twitter Icon—> <a rel=»nofollow» title=»Follow Our Updates On Twitter» href=»ССЫЛКА НА ВАШ ПРОФИЛЬ в твиттер» « target=«_blank»><img border=«0» src=«ПУТЬ К КАРТИНКЕ ТВИТТЕРА» style=«margin-right:1px;» alt=«Icon» /></a> <!—End Twitter Icon—> <!—Start Google+ Icon—> <a title=«Follow Us On Google+» rel=«nofollow» href=» ССЫЛКА НА ВАШ ПРОФИЛЬ в гугл+» » target=»_blank«><img style=»margin—right:1px;» src=»ПУТЬ К КАРТИНКЕ GOOGLE+« /></a> <!—End Google+ Icon—> </div><br/> </center>
|
- Вместо слов «ССЫЛКА НА ВАШ ПРОФИЛЬ в фейсбук» и т.д. вставляете ссылки на свой профиль.
- Вместо слов «ПУТЬ К КАРТИНКЕ RSS» и т.д. вставляете ссылки на картинки (кнопочки).
- Можете сменить надпись кнопки при наведении мышки здесь — «Grab Our Rss Feed» и т.д.
Скачать кнопочки можете здесь!
Где брать ссылки на кнопки: загружаете на свой сайт, а дальше можете посмотреть видеоролик в этой статье (там я копировал такую ссылку для плагина):
Урок 1. Как сделать прокрутку на сайте: вверх, вверх-вниз с помощью специальных плагинов?
P.S. В конце статьи я добавил видеоурок!
Так же как и у всех остальных скриптах, что мы уже рассматривали — здесь вы можете поставить свои уникальные кнопки соц. сетей, не используя стандартный набор! А также можете сделать замену на кнопку другой социальной сети (например: кнопку Rss на кнопку ВКонтакте)!
После всех изменений добавляем наш код в его любимое место — сайдбар! Заходим в панель управления сайтом — внешний вид — виджеты!
А специально для того, чтобы вам было все понятно и по просьбам читателей, я даю вам небольшой видеоурок по выше сказанному:
Как добавить кнопки соц. сетей себе на сайт!
А также я не добавлял в принципе никаких всплывающих текстовых подсказок, а зачем? Выше написана целая статья!
Хотите чтобы я делал нормальную озвучку и не отмазывался текстовыми подсказками, тогда подписывайтесь на мой блог — я оценю это и буду выпускать классные видеоуроки!
А после Нового Года еще и видеокурсы!
Кстати, с Наступающим вас! Всего хорошего, счастья и успехов в жизни!
Да, речь тоже небольшая — я не любитель толкать большие речи на счет поздравлений — так что уж простите! Ну вы же сюда не за моими поздравлениями пришли!
Возможно — это последняя статья в этом году! Эх, так быстро — а столько еще хотелось сделать! Но ничего в следующем году все нагоним!
P.S. Смотрите какие я научился делать 3d коробки по сравнению с первой:
Кстати, это не просто коробки — это реальная «База трастовых сайтов», которая находится здесь!
И такую коробку я сделал с первого раза, представляете что я потом смогу? Кстати, у меня объявляется новая услуга: делаю различные обложки, 3D коробки под заказ — ну или договоримся!
Первую коробку я делал, когда был совсем еще «зеленый»!
Ну как вам статья? Скрипт кнопок соц. сетей порадовал вас? Вы поняли как добавить кнопки соц. сетей себе на сайт?
Поделитесь с друзьями полезностями!
На этом у меня все, всем добра!
С уважением, автор блога ИНТЕРЕСНО О ПОЛЕЗНОМ
Влад, решила сделать обход блогов перед новым годом и тут статья про кнопочки!!! Вот так сюрприз, я же давно хотела.
После нового года прочту всё внимательно, а сейчас пока пора за стол!!!
С наступающим!!!
Ну так статья по твоему запросу и написана!
Спасибо за поздравления, тебя также!
Спасибо, Влад!
Классные кнопки, даже посетителей на сайте задержать могут!
Только нужно добавить миниатюры статей на главную, а то немного скучновато выглядит.
Что касается нового дизайна, то он тоже мне очень понравился. Блог стал выглядеть на много лучше прежнего!
Что да, то да!
Как считаешь: добавить миниатюры и оставить так, или сделать так как на старом шаблоне было?
Без картинок на главной странице как то скучновато, лучше добавь.
Ты меня немного не понял, но ладно…
Влад, я согласна с Кириллом, добавь миниатюры!
Ок, исправлюсь!
Здравствуйте очаровательная прекрасная Лара позвольте поздравить Вас с Новым годом и пожелать вам всех благ. Меня зовут Бахадур я начинающий ИТ-IT-ник
Здравствуйте, Бахадур! Спасибо за поздравление! Я тоже поздравляю Вас с Новым Годом и желаю всего самого наилучшего!
Только это блог Влада, моего друга-блоггера, а Вас я приглашаю в гости на мой блог, попасть на который можно, кликнув на аватарку или в начале статьи нажать на ссылку: Интернет Капуста.
Кнопка «просмотреть старый шаблон» выдает 403 ошибку.
А в старом шаблоне были смайлики в комментах?
Смайлики были, а здесь я еще не успел поставить! Спасибо, что напомнили!
Странно, что ссылка не работает! У меня все показывает! Нужно будет исправить эту ошибку!
У меня такие были на blogger блоге больше года назад =)
Кстати у меня на блоге новогодний порыв, статья за статьёй.
P.S. шаблон неплохо сменил, но мобильная версия на андрофоне так себе получилась, сайдбар уехал вниз и идёт как продолжение сайта.
Да, небольшой косяк! Я и не знал, что данный шаблон не оптимизирован под мобильные устройства…
Ну либо попытайся сам его как-то оптимизировать или ставь новый
Идеально:) Ты считаешь, что мобильная оптимизация так важна?
Ну, это нужно смотреть по статистике.
Там есть раздел ОС.
Вот у меня на блоге за декабрь примерно 10-15% посетителей использовали мобильную версию блога.
Кстати вспомнил, есть специальный плагин, он делает красивую мобильную версию, правда шаблон один и тот же у этого плагина для всех блогов =)
Хорошие кнопочки, мне понравились.
Ну и где новые статьи? =)
Все будет! Брал небольшой отдых от интернета, вот вернулся:)
У меня отдых от интернета начнётся одновременно с окончанием отдыха от учёбы =)
Да — это то что надо!!!