Простой урок верстки или как написать код блока кнопок социальных сетей

В нашем курсе  плагинов WordPress  изучаются два плагина, позволяющих вставить произвольный код  в шапку и подвал сайта, а так во всплывающее (модальное) окно. Это очень удобно для вставки блока кнопок социальных сетей. В некоторых темах WordPress  блок кнопок уже установлен. Но пока еще не во всех.

Но, как и во многих других случаях блок кнопок можно установить и без использования плагинов. И так прежде всего нам понадобятся файлы самих кнопок. Их не сложно найти в интернете. Но выбирать надо прежде всего те, на которые имеется лицензия на использование и применение. Необходимо подобрать кнопки форме круга или квадрата, с расширением png. Для этого делается запрос типа «Кнопка фейсбук png».  Выбирать стоит из изображений небольшого размера. Желаемый размер, если говорить о квадратной кнопке порядка 200х200 px. Поскольку большая часть  изображений кнопок  квадратная можно использовать любую изменив размеры в с помощью сервиса Фотошоп онлайн.

Поскольку избрано расширение png  изображение кнопки будет выглядеть как бы на белом фоне.  Это позволит установить их с помощью простейшего кода html — несколько стоящих в один ряд блоков одинакового размера и цвета фона с вставленными кликабельными изображениями.

Шаг первый создаем ряд блоков кнопок.
Для удобства работы содержимое каждого из блоков обозначим цифрами, и установим различные цвета фона (background цвет фона). Параметры width и height означают соответственно  ширину и высоту блока

<div style=»background:#FF0000; width:100px; height:100px;float:left;»>1</div>
<div style=»background:#00FF00; width:100px; height:100px;float:left;»>2</div>
<div style=»background:#FF8C00; width:100px; height:100px;float:left;»>3</div>

Выглядеть  внешне это будет вот так.

1
2
3

 

 

Шаг второй. Указываем ссылку на изображение кнопок и располагаем их в центре блога.

HTML  код выглядит так <img  aligncenter» src=»http://adres knopki.png; align center» Для чего в части содержимого блока, там где изначально стояли порядковые номера блока, прописываем код с адресом где расположена картинка. Затем удаляем номер блока.

vk
инстаграм
Facebook_Logo_Mini

 

Шаг третий Делаем ссылки кликабельными.
Т.е. «соединяем» адрес кнопки с адресом группы или страницы в социальной сети. Код должен выглядеть так <a href=»http:// адрес вашего аккаунта в социальной сети «><img src=» адрес кнопки.png»></a>. Внешних изменений при этом не происходит.

vk
инстаграм
Facebook_Logo_Mini

 

 

Шаг четвертый наводим красоту
Устанавливаем рамку блока рамку блока. Этот параметр имеет некий тип — сплошная или пунктирная, цвет и толщину линии.  Для установки рамки  в код свойство border (рамка ) с выбранными параметрами border:solid 1px MediumBlue; Т.е сплошная, толщиной в один пиксель, синего цвета. А затем устанавливаемый единый фон для всех трех блоков. Например Peachpuff #FFDAB9.Для выравнивания кнопки по середине добавим к коду изображения правило align с параметром middle. Т.е. align=»middle».А для указания отступов между блоками margin-right: 10px; Окончательный результат

vk
инстаграм
Facebook_Logo_Mini

 

 

Уважаемые коллеги, если вам действительно необходимо создать подобный блок кнопок не рекомендую делать это так ?как это описано в настоящей статье. Это не совсем корректный прием и приведенный вариант только урок для овладения навыками верстки.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *