Сегодня, каждый блогер использует социальные кнопки для сайта. Кто-то ставит плагины, кто-то использует сторонние сервисы, я же предлагаю вам небольшой код социальных кнопок, который подойдет для любого сайта.
Да друзья, вам не показалось, именно для любого сайта. В конечном результате кнопки на вашем сайте будут выглядеть вот так:
Это не финальный результат, вы сможете изменить их под себя (цвет, размер блока, редактировать надписи «ВКонтакте, Твиттер, Facebook, Google +»). Что требуется сделать, чтобы у меня на сайте были такие кнопки? — спросите вы. Все очень просто, следуйте пунктам ниже.
- Вставка кода кнопок
Вставьте следующий код в то место, где кнопки должны отображаться (например после статьи, перед комментариями):
<!-- Vkontakte button --> <div class="vkontakte_header"> <div class="share_text"><div class="share_title">ВКонтакте</div></div> <div class="vkontakte_button"><div class="share_button"> Код кнопки </div></div> </div> <!-- Twitter button --> <div class="twitter_header"> <div class="share_text"><div class="share_title">Твиттер</div></div> <div class="twitter_button"><div class="share_button"> Код кнопки </div></div> </div> <!-- Facebook button --> <div class="facebook_header"> <div class="share_text"><div class="share_title">Facebook</div></div> <div class="facebook_button"><div class="share_button"> Код кнопки </div></div> </div> <!-- Google Plus button --> <div class="google_header"> <div class="share_text"><div class="share_title">Google +</div></div> <div class="google_button"><div class="share_button"> Код кнопки </div></div> </div>
Вместо «Код кнопки» вставляйте свои коды социальных кнопок.
- Вставка стилей кнопок
А этот код, вставьте в ваш файл стилей (style.css или main.css и тд.):
.share_text { letter-spacing: 2px; font-size: 10pt; color: #eaf2fc; text-shadow: 2px 1px 2px black; padding: 10px 15px 15px 55px; font-family: Arial; width: 100%; } .share_title { letter-spacing: 1px; margin-top: 7px; font-size: 12pt; } .share_button { margin: 10px 16px; } .vkontakte_header { background: url("/icons/vkontakte.png") no-repeat #2C6992 10px 10px; width: 150px; height: 60px; float: left; } .vkontakte_button { background: #B2BFD0; width: 100%; height: 40px; float: left; } .twitter_header { background: url("/icons/twitter.png") no-repeat #009DC4 10px 10px; width: 150px; height: 60px; float: left; } .twitter_button { background: #aed5e4; width: 100%; height: 40px; float: left; } .facebook_header { background: url("/icons/facebook.png") no-repeat #23599D 10px 10px; width: 150px; height: 60px; float: left; } .facebook_button { background: #adb8d4; width: 100%; height: 40px; float: left; } .google_header { background: url("/icons/google.png") no-repeat #EF341B 10px 10px; width: 150px; height: 60px; float: left; } .google_button { background: #fbada1; width: 100%; height: 40px; float: left; }
- Почти готово! Остались иконки:
Из скачанного архива загрузите иконки на хостинг в папку «icons» или отредактируйте пути файлов на свои. Теперь, у вас красивый блок кнопок социальных сетей! Наслаждайтесь 🙂
Серёжа, спасибо))) Как раз думаю от плагина очередного избавиться))) 😈
Елена, как всегда, пожалуйста 🙂 😈
Серёжа, а как туда ещё счётчик впихнуть?
Можно вместо какой-то кнопки, или какой счетчик?)
неее счётчик к кнопке, чтоб видеть сколько народу жмякнуло))) ну, как у кнопок яндекса 😈
Да это по сути стили прописаны, а там, где «Код кнопки» можно лепить что угодно, и кнопку с счетчиком и и тд.. Соответственно, чтобы был счетчик нужно скрипт писать 🙂
Хорошая статья
Рад, что вам нравится 🙂
Шикарные кнопочки 🙂 Единственное, Google Plus с апреля этого года закрывается.
Кирилл, спасибо! А за гугл, да, очень жаль, что закрывается 🙂