
Вообще информации о том, как разместить социальные кнопки на сайт - "море Лаптевых"!
Но предлагаются обычно готовые заготовки, не оставляя возможности для выбора внешнего вида самих кнопок.
Вот и получается, что на всех сайтах социальные кнопки, как клонированные. Хотя в сети картинок этих кнопок, воз и маленькая тележка!
Для тех кто желает более простой вариант создания кнопок, вот ссылка на онлайн конструктор: http://share.pluso.ru/
Я же предлагаю конструкцию, в которую вы по желанию можете поставить, любое понравившееся вам изображение.

Как это работает вы можете убедится, наведя курсор на эти кнопки, которые находятся на сайтбаре этого блога. А вот и сама конструкция:
<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;}
<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, Твиттере, Гугл+, Фейсбук или др.
Здесь вы можете сослаться на ваш аккаунт в RSS, Твиттере, Гугл+, Фейсбук или др.
<img border="0" height="47"title="ТИТЛ НА ВАШЕ УСМОТРЕНИЕ, БУДЕТ ПОЯВЛЯТЬСЯ ПРИ НАВЕДЕНИИ КУРСОРА" src="УРЛ. ВАШЕЙ КАРТИНКИ" width="47" />
Это непосредственно сама картинка кнопки. Размеры можете регулировать height="47" width="47"
Вы можете добавлять контейнер <td> в конструкцию ровно столько, сколько вам потребуется. А то как это будет выглядеть, лучше тестировать на ОНЛАЙН ГЕНЕРАТОРЕ по этому адресу: http://www.timsfreestuff.com/HTMLEditor/
Вот так, вы можете создать индивидуальные кнопки, придав вашему блогу колорит уникальности!
14 коммент.:
http://vebavtor.ru/
А вот с вариантами счетчиков пузомерок есть действительно интересные варианты и предложения. Сейчас есть одна задумка с экспериментом, как-нибудь выберу время и сделаю в своем архивном блоге.
https://www.blogger.com/profile/13820084690879273917
http://webinspektor.in
https://www.blogger.com/profile/12011472871925373280
Анжела Матвеева, публикую для вас пост, про кнопки "ТИЦ"!
Сергей Трутнев, кнопочки в форме машинок, мне очень понравились, даже хотел в комментариях похвалить. Вот сейчас хвалю!
Евгений, проблема нажатия читателями на соц. кнопки очень важная и интересует меня тоже! Буду думать о новом посте на эту тему.
Александр Кувшинников, у тебя очень симпатичные кнопки соц. сетей! Самое главное, фазируются с дизайном твоего блога!
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/12011472871925373280
https://www.blogger.com/profile/13746790384341325111
Я очень сильно удивилась, что Вы стали моим ПЧ, так как это меня нужно учить, а не наоборот.Советов в интернете действительно много,только рассчитаны они в большинстве своем на боле менее понимающих как минимум в компьютерах, как максимум в программировании. Но в том то и дело, что программер сам себе все нарисует в лучшем виде, а большинство (я в том числе) могут что-то сделать только имея пошаговую инструкцию даже в тех моментах, которые для Вас кажутся элементарными.
https://www.blogger.com/profile/11047535699034670026
https://www.blogger.com/profile/12011472871925373280
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/16172625562082402439
<div class='post-footer-line post-footer-line-1'>
https://www.blogger.com/profile/13746790384341325111
С уважением,
Ананда
Отправка комментария
Дорогие Друзья! К сожалению, по причине здоровья, моя активность по этому блогу будет осуществляться по мере ВОЗМОЖНОСТИ!