Як зробити просту панель соціальних закладок для сайту за допомогою css і html

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

Загалом, якщо вона Вам сподобалася, давайте приступати до роботи. Робити ми її будемо тільки за допомогою CSS.

зображення

І так, для початку на потрібні самі іконки і не складне зображення з написом «Ми на зв'язку», яке я підготував в Фотошопі. Всі вихідні Ви зможете скачати ось за цим посиланням. І звичайно ж за класні іконки хочеться сказати величезне спасибі сайту veodesign.com.

Демо Ви можете подивитися в преміум шаблоні Nabig в сайтбаре

Завантажили? Вітаю :-) Тепер давайте задамо небагато CSS стилів для іконок і написи.

Для початку потрібно задати стилі написи «Ми на зв'язку», яка знаходиться над іконками, так як цей напис картинка, відповідно і стилі будуть не складні.

Як бачите ми задали клас .sharesv, який далі будемо використовувати в HTML. Відступ варто margin-left: 47px; це приклад з шаблону, у Вашому випадку можливо потрібно буде змінити ці значення.

Зараз будемо ставити відступи для самих іконок закладок:

Знову ж таки повторюся, що дані відступи взяті з шаблону Nabig, можливо дані відступи Вам потрібно буде змінити під свій сайт.

Ну а тепер давайте вже задавати стилі CSS для розташування закладок, ось як це виглядає:

Як бачите, що окрема іконка задана посиланням, відповідно ми задали ось цей клас .share-new a. Ще, як Ви помітили ми додали transition: і opacity. які додадуть красивий і плавний ефект при наведенні на іконки.

Потім ми поставили не складно стилі для кожної іконки, і задали їм відповідні класи, наприклад, якщо це іконка від вКонтакте, то клас буде .icon-vk і т.д.

Важливо, якщо Ви захочете поміняти зображення, то не забудьте поставити правильні посилання в стилях для кожної іконки.

Ну а зараз давайте подивимося як буде виглядати загальна картина з стилями:

А зараз перейдемо до коду на HTML:

Тут соверженно нічого складного, просто помістіть ось цей код в бажане місце на сайті:

Ось і все друзі, користуйтеся на здоров'я. До зустрічі.