четверг, ноября 18, 2010

Как сделать социальные иконки для Blogger цветными

В стандартных шаблонах Blogger есть возможность отображать социальные иконки. Они выглядят сероватыми, и при наведении на конкретную иконку она становится цветной.
Мне всегда хотелось, чтобы эти иконки (такие я использую на своем личном блоге) были поярче. Вот так:

Яркие и цветные социальные иконки для Blogger
Чтобы инвертировать этот эффект черно-белого на цветной, необходимо внести изменения в css часть шаблона.
1. Заходим в “Дизайн” - “Изменить HTML”.
Делаем резервную копию шаблона (это не обязательно, но привычка так делать перед изменением шаблона никогда не будет лишней)

2. Ищем с помощью Ctrl+F строку
]]></b:skin>

3. Перед ней вставляем следующий фрагмент:
/******** share css override */
.sb-email{
 background-position:0 -22px !important
}
a:hover.sb-email{
 background-position:0 0 !important
}
a:active.sb-email{
 background-position:0 -22px !important
}
.sb-blog{
 background-position:-21px -22px !important
}
a:hover.sb-blog{
 background-position:-21px 0 !important
}
a:active.sb-blog{
 background-position:-21px -22px !important
}
.sb-twitter{
 background-position:-42px -22px !important
}
a:hover.sb-twitter{
 background-position:-42px 0 !important
}
a:active.sb-twitter{
 background-position:-42px -22px !important
}
.sb-facebook{
 background-position:-63px -22px !important
}
a:hover.sb-facebook{
 background-position:-63px 0 !important
}
a:active.sb-facebook{
 background-position:-63px -22px !important
}
.sb-buzz{
 background-position:-84px -22px !important;
 width:22px
}
a:hover.sb-buzz{
 background-position:-84px 0 !important
}
a:active.sb-buzz{
 background-position:-84px -22px !important
}
/* share css override */


4. Делаем предпросмотр.

При наведении на иконку, она становится серой. Если все нравится, сохраняем шаблон:-)

Эту модификацию я подсмотрела отсюда.

Web Analytics