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

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

Поможет нам в этом сайт 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 :

20 комментариев:

  1. Спасибо,Виктория! Очень необходимая информация.

    ОтветитьУдалить
  2. Вика, спасибо за полезный сервис. Там оказывается еще и стрелки есть.

    ОтветитьУдалить
  3. Татьяна, очень удобный сайт.И всё в одном..

    ОтветитьУдалить
  4. Ольга, привет. Мне он тоже понравился. Первый день просто тупо сидела и разглядывала иконки. Хотелось просто всё. Но пока остановилась на соц.сетях. Там правда на все случаи жизни.

    ОтветитьУдалить
  5. Вика, а на сайте радикал нужна регистрация?

    ОтветитьУдалить
  6. Ирина, на радикале она самая обычная. После, он автоматом тебя впускает. Давно пользуюсь.Если надо вот ссылка http://radikal.ru/

    ОтветитьУдалить
  7. http://jente-asyaa.blogspot.com/2014/06/liebster-blog-award-2.html Привет,я наградила твой блог :) Заходи быстрее ♥ Счастья и добра *-*

    ОтветитьУдалить
  8. Раньше, когда не знал как делать свои кнопки, я поступал так: увидел на чужом блоге интересные иконки; скачивал картинки к себе;ну а потом таким же кодом вставлял их, вот только не прописывал border

    ОтветитьУдалить
  9. Иван, и это тоже решение. А в данном случае вот они все перед носом. Выбирай-не хочу. Спасибо за комментарий.

    ОтветитьУдалить
  10. Вика. Не нашла на сайте куда изливать благодарности. Пишу сюда. Куча сайтов с информацией, но чаще ничего не понятно. У вас все просто, а главное работает! Спасибо, за работу!

    ОтветитьУдалить
  11. Ой, Олеся. Спасибо за спасибо. Главная благодарность-то, что это кому-то облегчает работу с блогом. Но и кнопочку сетей бы не забывали.

    ОтветитьУдалить
  12. Подскажите пожалуйста, что делать, если у меня значки соц сетей, которые я установила, отображаются просто гигантскими и в столбик! Хотелось бы поменьше и в ряд...

    ОтветитьУдалить
    Ответы
    1. ♡Mary Sun♡просто установите иконки маленького размера . Если Вы пользовались сайтом который предложен в статье там указаны размеры 16 на 16, 20 на 20 и т.д. и встанут тогда они как надо. Можете просто скопировать URL картинки здесь http://smotritetyt.blogspot.ru/

      Удалить
  13. Здравствуйте, Виктория. Скажите, пожалуйста каким образом можно удалить кнопки соцсетей, которые мне "достались" в блоге?

    ОтветитьУдалить
    Ответы
    1. Николай, я поняла так что речь о кнопках в конце сообщения. Это просто. В панели управления-вкладка дизайн-гаджет сообщения. Там в настройках снимите галочку отображать кнопки соцсетей. Не забудьте сохранить изменения.

      Удалить
  14. Виктория, большое спасибо, а также благодарю за то, что Вы мне оставили советы на моем блоге.

    ОтветитьУдалить
    Ответы
    1. Николай, обращайтесь если что. Удачи Вам.

      Удалить
  15. Спасибо за полезную информацию, только вот у меня не получилось что бы кнопочки крутились, все делаю по инструкции...

    ОтветитьУдалить
    Ответы
    1. Unknown, я подробнее расписала код . немного поправила так как ссылка не туда у меня вела. Извините за неудобства и спасибо за визит.

      Удалить

Пользовательский поиск
Foto Saya
My Photo