Прозрачность баннера и счетчика

Прозрачность баннера и счетчика


Для того чтобы не отвлекать посетителей от текста статьи блога, можно реализовать прозрачность баннера ( например, баннера который приглашает купить место для рекламы)
или прозрачность счетчика (обычному посетителю не интересно сколько у вас посетителей в день, месяц, год). Прозрачность баннера реализуется с помощью добавления кода css в css-код шаблона Blogspot.

Зайдите в “Панель управления” – “Шаблон”, сохраните копию вашего шаблона (навсякий). Ставьте галочку расширить шаблон, нажмите “Изменить HTML”. С помощью поиска (Ctrl + F) найдите строчку в коде

]]></b:skin>

Это будет конец вашего css шаблона. Перед строчкой вставьте следующий код:

/* ----////// Прозрачность баннера /////------- */

#banners a img {
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=30);
}

#banners a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}


Сохраните шаблон.

Закрытую строчку /* …… */ можете не оставлять, она служит напоминанием зачем нужен данный код. Во всяком случае, строчка не влияет на эффект прозрачности. Так же можно написать другой текст, вместо присутствующего текста.

Настройка кода: в первом случае первое 0.3, второе 0.3 и 30 - это процент видимости. Можете изменить процент на 0.5, 0.5 и 50, будет реализовано 50% прозрачности баннера или счетчика. Если изменять значения вниз, баннер будет менее виден, если вверх – более виден.

Во втором случае, значения видимости баннера или счетчика при наведении на него мышки. В данном случае 100% видимость. Так же значения можно менять.

Основной код внесли, теперь что бы сделать прозрачным счетчик, изображение, баннер. Нужно заключить их код в дивы (div) таким образом:

<div id="banners">коды баннеров, счетчиков</div>

Слово banners можно изменить на любое понравившееся, главное чтобы в коде css такого слова (значения) не было. Повторюсь: прозрачность можно делать для любых изображений и кнопок

Комментариев нет: