Кнопки соц сетей в шапке блога blogger

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

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

Работать будем в шаблоне блога. В blogger идем в шаблон, делаем резервную копию. Далее изменить шаблон. Сразу после открывающего тэга <body> вставляем код кнопок

Скопируйте код

<ul>

<li class='twitter'><a href='http://twitter.com/viola' title='Follow Us'>Twitter</a></li>

<li class='facebook'><a href='http://www.facebook.com/olga.' title='Join with Us'>Facebook</a></li>

</ul>

</div>

Выделенное жирным шрифтом измените на свои адреса в социальных сетях. Адрес фида я не вставляла. Если у Вас есть аккаунт Feedburner, при нажатии на кнопку RSS откроется страница подписки Вашего блога на канал RSS.

Зеленым цветом-измените при желании текст при наведении мыши на кнопку.

Следующий шаг ищем строку <b:skin>...</b:skin>, нажимаем слева на стрелочку и прокручиваем немного вниз, находим строку ]]></b:skin> и выше вставляем код CSS

/* Social */

.social {

float:right;

width:360px;

margin:10px 0;

padding:0;

}

.social ul{

float:left;

margin: 0;

}

.social ul li{

float:left;

padding: 0 0 0 20px;

margin-left:15px;

list-style:none;

}

.social ul li.facebook{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0KMnq4B-SbQ4M2HMG0EV-4V1ldBzZRKfZE1B8KjP_Ja_XkP8A4FkCWZow8MygPHYG3ECxAFPORXPIXl22OLdz6gIpPAlonxadcLiPL7juRU3hEGTzrGymd35dp0hPCxjFgYxjWbUaanc/s0/facebook.gif) no-repeat 0 2px;

}

.social ul li.twitter{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGkgebHyugeaKvb60AaEsgzUsnGtENLNNxr4RlOXpekzXlap2P_J1h6bsSYc95bQA1WJiYoIXsr3luuEUqSgX2r3vwJOpVvOp3H9gH2slkFe6mCwR2KYtLY_zJG2Pn5NuRwjBhRnNmNvw/s0/twitter.gif) no-repeat 0 2px;

}

.social ul li.rss{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL8zDQFDH-hW5SDX4xPb-SxEG8PSt72Xvkld8G6yq4_A1qUQcX6VHM7uKh7k2-Lt9wW9OzWpEiTbhP_miPJIRhMoO0wIcuhPlqmGAhaSSEOwLl_OtzLs6UIMJLzENdUFhetvcyfZcdQuc/s0/rss.png) no-repeat 0 2px;

}

.social ul li a{

color: #eee;font-size:16px;

}

Коричневый цвет: положение кнопок от верха и размер шрифта названия кнопок Twitter, Facebook, RSS Feed; сиреневым-расположение названия социальных сетей от кнопок (картинок); синим настройте положение от правого края.

Выделенное жирным шрифтом это адреса иконок (кнопок). Можно их изменить и вставить свои кнопочки.

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

Почитайте другие интересные статьи: