Кнопки соціальних мереж

130

Як зробити крутяться кнопки соцмереж

Привіт усім читачам блогу SEOjedi! Нещодавно прикрутив собі на блог нові, стильні кнопки соцмереж і трохи “оживив” їх. В цей же день почали надходити питання, на скільки це складно, зробити кнопки соціальних мереж, що крутятся і, як я це зробив. Вирішив відповісти всім відразу – це абсолютно не складно навіть для початківців, робиться швидко і не гальмує сайт. Ну і заодно, корисна стаття вийшла.

А тепер всі по порядку. Так, як блог у мене навчальний, то постараюся максимально детально розписати, що і за що відповідає в коді. Приклад кнопок ви можете побачити у верхній частині блогу. Робиться це за допомогою CSS. Спочатку наведу приклад коду, а потім розпишу що до чого в ньому. Відразу попереджаю, що в прикладі присутні мої посилання на соцмережі і картинки, вам треба буде змінити на свої!

Крутяться кнопки соціальних мереж
#social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8 s ease-in-out; -webkit-transition: all 0.8 s ease-in-out; -o-transition: all 0.8 s ease-in-out; -ms-transition: all 0.8 s ease-in-out; transition: all 0.8 s 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); }
Icon RSS
Icon Email RSS
Icon Facebook
Icon Twitter
Рекомендую до прочитання: Основи HTML (частина 4)
Icon Google+
Follow Me on Pinterest

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8 s ease-in-out; -webkit-transition: all 0.8 s ease-in-out; -o-transition: all 0.8 s ease-in-out; -ms-transition: all 0.8 s ease-in-out; transition: all 0.8 s 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); }


Icon RSS


Icon Email RSS


Icon Facebook


Icon Twitter


Icon Google+


Follow Me on Pinterest

Основні пояснення по коду розташованому між тегами :

  • Псевдоклас :hover – визначає стиль елементу при наведенні на нього курсору миші, але при цьому елемент ще не активований, простіше кажучи кнопка миші не натиснута. Ну і там визначаємо, що буде відбуватися з нашої кнопки при наведенні на неї курсора. В нашому випадку через властивість background додаємо напівпрозорість transparent;opacity. Властивість opacity задає значення прозорості і варіюється від 0 до 1, де нуль це повна прозорість елемента, а одиниця, навпаки, непрозорість.
  • Властивість moz-transition – спеціальна властивість для створення ефекту анімованого переходу при зміні css-властивостей елемента.
  • Властивість webkit-transition – затримка перед виконанням анімаційного переходу.

Рекомендую до прочитання: Twidium – сервіс для массфолловинга

Ну і далі по ходу руху все для обертання іконок, 0.8 s – час обертання, які можна змінювати. Rotate(360deg) – на скільки градусів повертатися, можна змінювати. Це в принципі і все, що змушує крутитися кнопки соціальних мереж. Тобто стиль у нас готовий, залишилася справа за малим-знайти самі кнопки і правильно їх прописати.

Велика кількість безкоштовних іконок соціальних мереж можна знайти і безкоштовно завантажити тут. Прописуються за допомогою HTML-коду, я детально описував цей процес у цій статті. Тому тут просто наведу приклад:

Код кнопки посилання Twitter
Icon Twitter

1
2
3

Icon Twitter

Як ви розумієте, вам треба буде змінювати URL-и соціальної мережі і шляхи до картинки. У коді можна перейменувати тайтли на свої. Якщо хочете прибрати якусь соціалку, то просто видаліть непотрібні рядки. Якщо треба додати іншу соціалку, просто допишіть рядки.

З приводу установки всього цього добра. Можу запропонувати два способи:

  • Перший – це встановлення за допомогою віджета. Додаєте “Текстовий блок” на бічну панель, а в нього копіюєте код.
  • Другий спосіб трохи складніше – вам треба буде вставити код “крутяться кнопок соціальних мереж” в файлі header.php вашої теми, між тегами в потрібному місці. Я наприклад вставив відразу після “mine-menu” і застосував вирівнювання по правому краю за допомогою значення align=”right”.
  • Рекомендую до прочитання: Оптимізація сайту під соціальні мережі.

    Ну ось? як то так! Як говориться, підіб’ємо бабки. Приклад коду є, де і як шукати іконки ви вже знаєте, залишається тільки вписати акаунти ваших соціалок. Якщо щось не буде виходити, пишіть в коментарях або запитуйте через форму зворотного зв’язку в Контактах. Удачі!