Простой конструктор социальных кнопок для блога на Blogger, Блогспот с анимацией

 Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Вообще информации о том, как разместить социальные кнопки на сайт - "море Лаптевых"!

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

 

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

Для тех кто желает более простой вариант создания кнопок, вот ссылка на онлайн конструктор: http://share.pluso.ru/

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

Как это работает вы можете убедится, наведя курсор на эти кнопки, которые находятся на сайтбаре этого блога. А вот и сама конструкция:

 

 

<noindex><center><style> #social a:hover {background-color: transparent;opacity:0.7;} #social 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; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><table id="social">
  <tr>
   <td>
<a href="http://feeds.feedburner.com/Flophouse" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="47"title="Иногда пишу, что то умное. Подпишись на RSS ленту!" src="http://2.bp.blogspot.com/-TaKaR8ITeYM/UAch8knFRWI/AAAAAAAABcg/_NkvF2aczJ8/s1600/Иногда пишу, что то умное. Подпишись на RSS ленту!.png" width="47" /></a>
  </td>
    <td>
<a href="https://twitter.com/@arhimedron" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="58"title="Иногда пишу, что то умное. Стань читателем Твиттера!"  src="http://3.bp.blogspot.com/-N8nZfoGxd3g/UAciHzyyVAI/AAAAAAAABco/mjiD3_a0DJk/s1600/Иногда пишу, что то умное. Стань читателем Твиттера!.png" width="58" /></a>
 </td>
  </tr>
</table></center></center></noindex>

 

Желтая часть кода это трансформация CSS (transition), то есть кнопки при наведении курсора крутятся. А еще кнопки бледнеют. Бледность можно менять, изменяя маркированный красным параметр -  #social a:hover {background-color: transparent;opacity:0.7;}

 

Теперь разберем содержимое контейнера <td>

 

  <td>

<a href="http://feeds.feedburner.com/Flophouse" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="47"title="Иногда пишу, что то умное. Подпишись на RSS ленту!" src="http://2.bp.blogspot.com/-TaKaR8ITeYM/UAch8knFRWI/AAAAAAAABcg/_NkvF2aczJ8/s1600/Иногда пишу, что то умное. Подпишись на RSS ленту!.png" width="47" /></a>

  </td>

 .

 <a href="ССЫЛКА НА СОЦИАЛЬНЫЙ СЕРВИС, RSS, Твиттер, Гугл+, Фейсбук или др" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
Здесь вы можете сослаться на ваш аккаунт в RSS, Твиттере, Гугл+, Фейсбук или др.

 
 <img border="0" height="47"title="ТИТЛ НА ВАШЕ УСМОТРЕНИЕ, БУДЕТ ПОЯВЛЯТЬСЯ ПРИ НАВЕДЕНИИ КУРСОРА" src="УРЛ. ВАШЕЙ КАРТИНКИ" width="47" />
Это непосредственно сама картинка кнопки. Размеры можете регулировать height="47" width="47"

 

Вы можете добавлять контейнер <td> в конструкцию ровно столько, сколько вам потребуется. А то как это будет выглядеть, лучше тестировать на ОНЛАЙН ГЕНЕРАТОРЕ по этому адресу: http://www.timsfreestuff.com/HTMLEditor/

 

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