Как сделать свои иконки социальных сетей для блога

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

Поможет нам в этом сайт https://www.iconfinder.com. Здесь каждый сможет подобрать на свой вкус всевозможные иконки. На все случаи жизни. Предложу вам небольшой обзор этого сайта. Копируем ссылку выше и вставляем в поисковую строку. Попадаем на главную страницу сайта. Спускаемся вниз и из всех категорий  выбираем социальные медиа иконки.

Далее, в открывшемся окне, нам в правом верхнем углу нужна опция-бесплатно.

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

Когда определились с выбором, нажимаете на картинку и на следующей странице выбираем те соц.сети, на которых у вас есть аккаунт.

Скачиваем их, нажимая на каждую иконку. Можно выбрать любой формат. В данном случае я выбрала формат png. Свои изображения я храню на сайте радикал. У вас может быть другое место хранения файлов. Сейчас, когда у нас есть путь к изображению мы сможем установить такие кнопки в блог. Вот, что-то такое должно получиться.

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

<center>

    <a href="####">

<img border="0" src="http://i069.radikal.ru/1406/d9/74471340c15b.png" /></a>

    <a href="#####">

<img border="0" src="http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png" /></a>

    <a href="####">

<img border="0" src="http://s019.radikal.ru/i618/1406/40/71d113bc8bce.png" /></a>

    <a href="####">

<img border="0" src="http://s52.radikal.ru/i137/1406/1d/b342e2f0d04f.png" /></a>

    <a href="###">

<img border="0" src="http://s45.radikal.ru/i109/1406/43/219daaabb709.png" /></a>

</center>

Вместо решёток, выделенных красным цветом, вставляйте адреса своих страниц в соц. сетях. Синий цвет-это ссылка на картинку. Теперь, когда вы поменяли все адреса на свои смело вставляйте его в гаджет HTML/JavaScript. Можете дать ему название-присоединяйтесь ко мне или я в соц.сетях. Вот, и всё. Теперь у вас есть свои собственные иконки.

Можем ещё немного добавить уникальности. Заставить их покрутиться при наведении на них курсора. Для этого добавим такой код CSS и всё буде выглядеть так.

<style>p#socialicons img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

</style>
<center><p id="socialicons">

 <a href="####">

<img border="0" src="http://i069.radikal.ru/1406/d9/74471340c15b.png" /></a>

    <a href="#####">

<img border="0" src="http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png" /></a>

    <a href="####">

<img border="0" src="http://s019.radikal.ru/i618/1406/40/71d113bc8bce.png" /></a>

    <a href="####">

<img border="0" src="http://s52.radikal.ru/i137/1406/1d/b342e2f0d04f.png" /></a>

    <a href="###">

<img border="0" src="http://s45.radikal.ru/i109/1406/43/219daaabb709.png" /></a>

</p></center>

 Посмотрите здесь, как это будет выглядеть.

Если шпаргалка оказалась для вас полезной, поделитесь ею с друзьями. А если установите себе в блог такие кнопочки, сообщите. Хочется посмотреть, что у вас получилось. На этом сегодня ставлю точку.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :