Делаем блок с социальными кнопками для сайта!

Всем привет! в этой статье хочу рассказать про то, как я сделал блок с кнопками социальных сетей на сайте!

Существуют плагины, но я все же решил не прибегать к ним, а сделать все с нуля.

В качестве иконок использовал иконочный шрифт, благодаря которому, можно менять цвет и размер иконок, также как и шрифты.

К каждой кнопке можно привязать любую ссылку.

Данный блок можн разместить в любом месте вашего сайта.

Для начала:

Подключим иконочный шрифт к сайту.
Составим HTML структуру блока
Пропишем стили к блоку

После того, как скачали и подключили иконочный шрифт, нам необходимо выбрать иконки которые будем использовать!

Более подробно можете прочитать в статье "Делаем блок с социальными кнопками своими руками"

Вступите в группу, и вы сможете просматривать изображения в полном размере

		Это интересно +2	Как всё будет выглядеть в блоге: Делаем блок с социальными кнопками для сайта! Всем привет! в этой статье хочу рассказать про то, как я сделал блок с кнопками социальных сетей на сайте! Существуют плагины, но я все же решил не прибегать к ним, а сделать все с нуля Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/poleznyie-servisyi-i-programmyi-dlya-nachinayuschih-polzovatelej/11048830/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Делаем блок с социальными кнопками для сайта! </a> <div class="insert-intro" style="font-family:trebuchet MS;">Всем привет! в этой статье хочу рассказать про то, как я сделал блок с кнопками социальных сетей на сайте! Существуют плагины, но я все же решил не прибегать к ним, а сделать все с нуля </div> </div> Делаем блок с социальными кнопками для сайта! <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/poleznyie-servisyi-i-programmyi-dlya-nachinayuschih-polzovatelej/11048830/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Делаем блок с социальными кнопками для сайта!</a> <div style="font-family:trebuchet MS;">Всем привет! в этой статье хочу рассказать про то, как я сделал блок с кнопками социальных сетей на сайте! Существуют плагины, но я все же решил не прибегать к ним, а сделать все с нуля </div> </div>

AzatYakupov

25.01.2016

В избранное Пожаловаться Просмотров: 473

Комментарии ⁰

Полезные сервисы и программы для начинающих пользователей 7268

Важные темы:

Активные участники:

Последние откомментированные темы:

Делаем блок с социальными кнопками для сайта!

Комментарии временно отключены

Открытая группа
38977 участников