Вставляем кнопки социальных сетей в сайтбар

Здравствуйте, мои хорошие. Сегодня помогу вам установить ещё один полезный гаджет в сайтбар вашего блога – кнопки социальных сетей. Для этого в административной панели блога заходим в настройку «Дизайн», затем в боковой панели выбраем кнопку «Добавить гаджет». Выберите также место, куда вы хотите установить гаджет кнопок социальных сетей.
Считаю, что самоё подходящее место для них – верх вашего сайтбара. Я выбрала 3 кнопки для установки.

В списке гаджетов необходимо выбирать «HTML/JavaScript» и в  открывшееся окошко гаджета вставить HTML-код «Кнопки социальных сетей для сайтбара». Код для установки вы видите в конце статьи.

Но, прежде, чем вставить этот HTML-код, нужно выполнить в нем некоторые изменения: заменить выделенные синим цветом  мои ссылки на ссылки ваших ресурсов последовательно:

ссылка на ФИД вашего блога,

ссылка на профиль в facebook,

ссылка на профиль в twitter.

HTML-код «Кнопки социальных сетей для сайтбара»

 ===========================================

<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><div id="social"> <!--Start Rss Icon--> <a title="Подпишись ко мне на Блог" href="http://feeds.feedburner.com/blogspot/HFvaE"

&nbsp;<!--Start Facebook Icon--> <a rel="nofollow" title="Следуйте за мной на &nbsp;Facebook " href="https://www.facebook.com/tiosharina" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcf-UmFZo_6ZScH9mY5GXtjdz03uNHK6F6bQ9iPD1H4GDLXqsOKbfrkZ9Ax4XP6A-Y7S9IW_vAIkuCIxkg5i5pJMFrAfbYJIYnrAXC1kcJfPpvOeHrZPhd5Q68H_M9ye_1zBe_XhpDThl7/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon" /></a> <!--End Facebook Icon-->

&nbsp;<!--Start Twitter Icon--> <a rel="nofollow" title="Следуйте за мной на &nbsp;Twitter" href="https://twitter.com/tiosharina" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEvplbJnXWSJoRisXwYw8mQgIFkBN0Eesa7f-O_ijROuiye1HGxzw5_Gd47QUuD1greIR6EqZW8vfa13fonYu7AXNmJ4W6IjQI86h3OoNyjeC1quv-JrBaZdySNnTTh0BZ4iBVhb63Qsnv/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon" /></a> <!--End Twitter Icon-->&nbsp;

Вставляем отредактированный код в окно «Содержание», пишем заголовок, к примеру «Поделиться», сохраняем гаджет и смотрим установленные кнопочки на своём блоге. Не забудьте проверить переходы по кнопкам, вдруг, что-нибудь выполнили неправильно.

Если моя статья была вам полезна, прошу поделиться ей в социальных сетях: