Как сделать прозрачность у баннеров и счётчиков.

прозрачный счётчикfПриветствую всех на своём блоге. Думаю, вы обращали внимание, что на некоторых сайтах всевозможные счётчики посещений, рейтингов и некоторых баннеров, имеют полупрозрачный вид. Это делается специально, чтобы не отвлекать на них внимание посетителей. А может и просто, когда ещё особой посещаемостью похвастаться рано.


Я видела, что и места для рекламы иногда немного скрыты от глаз. И даже некоторые элементы в сайдбаре.

Реализовать в блоггере прозрачность кнопок и счётчиков совсем не сложно. Посмотрите о чём я виду речь. При наведении курсора на счётчик-прозрачность баннера 100%. Прозрачный баннер в сайдбаре здесь.

Счетчик тИЦ и PR
 Нам понадобится небольшой код, который мы добавим в гаджет HTML/JavaScript. 
<style>#hide a img {
opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);
}

#hide a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
} </style>

<div id="hide"><a href="http://pr-cy.ru/a/www.shpargalochki.ru" target="_blank"><img alt="Счетчик тИЦ и PR" src="http://counter.pr-cy.ru/prcy/www.shpargalochki.ru" /></a></div>

То, что выделено синим цветом-это значения видимости счётчика. В зависимости от того, хотите вы его сделать чуть ярче или бледнее, меняйте эти 3 значения. В примере я предложила 50% прозрачности. Если изменить 0,5, 0,5 и 50 на меньшее, то счётчик будет более заметен и наоборот.

Красным цветом выделен сам код баннера, рейтинга или счётчика.

Можно просто первую часть кода CSS установить непосредственно в шаблон перед строкой ]]></b:skin>, но уже без тегов  <style>....</style>. А потом просто в нужном месте, где устанавливается счётчик прописать вторую часть.

<div id="hide">тут весь код </div>

Всего лишь такие нехитрые действия. У себя в блоге я расположила свои счётчики немного иначе. Посмотрите в самом низу блога маленькая иконка с часиками в левом углу. Как сделать такое в этом сообщении.

И у меня сегодня всё. Удачи всем нам. Спасибо, что заглядываете в мои шпаргалки.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


18 комментариев:

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

    ОтветитьУдалить
    Ответы
    1. Спасибо, Ольга. Я это ]]> вечно забываю прописывать в сообщении. Сейчас вот ещё в одном нашла.
      А эффект я видела на одном сайте, там таким образом оформлен весь футер. Сначала не поняла, а потом очень понравилось.

      Удалить
  2. Спасибо, Виктория, получилось. Хотя у меня пока нечего анализировать, но пусть стоит.

    ОтветитьУдалить
  3. Галина. пожалуйста. Ничего что пока нечего. Всё впереди.

    ОтветитьУдалить
  4. Какая же ты затейница, Вика.. Вот и еще одну полезность описала. Спасибо, что делишься своим опытом.

    ОтветитьУдалить
    Ответы
    1. Jozzi N , привет. Не за что. Самой просто очень нравится копаться во всём этом вот и делюсь, что знаю. сама-то вон какими произведениями делишься!!!. Мне в это и сунуться страшно.

      Удалить
    2. Код хорош. все работает, я пробоваана своем блоге. Там у меня в самом низу колонки есть два баннера. Первый не изменился, а вот на второй хорошо подействовало, стал полупрозрачным. Попробовала, но применять пока что нет большой необходимости. Охожусь маленькой хитростью, где могу.. беру слишком яркую картинку баннера и делаю ее более приемлемой по цвету и контрасту для своего блога)

      Удалить
    3. Jozzi N. Вообще особой необходимости в этом не вижу. но так, маленькая фишечка не помешает. Сейчас сбегаю к тебе посмотрю.

      Удалить
  5. Так ведь я проверила и сразу убрала код..

    ОтветитьУдалить
  6. Вика, все же поставила код, сходи глянь.. Так классно, приглушает яркость картинок, которые не нужны мне яркими (в боковой панели). Единственно, что на "движущийся" баннер не влияет, а так вообще просто супер. Еще раз спасибо!

    ОтветитьУдалить
    Ответы
    1. Jozzi N, ага, проверила. Работает. А с анимацией не пробовала. Будет время можно подумать, посмотрим.

      Удалить
  7. Класс, спасибо. Я все счетчики сделала прозрачными, аляпистость снизилась). А рекламу можно так приглушить или Adsense будет против?) Очень уж яркие у них баннеры, у меня итак кол стоит по оптимизации "дохода" Adsense.

    ОтветитьУдалить
  8. Сама Доброта, не думаю,что стоит баннеры от Адсенс делать прозрачными. Иначе, зачем их вообще ставить.

    ОтветитьУдалить
  9. А они и так не делаются, я пробовала). Вика, я взяла это сообщение в закладки, а то у меня блог аляпистый, даже не думала, что так можно решить проблему. Я всё меняю потихоньку, пора взрослеть).

    ОтветитьУдалить
    Ответы
    1. Я не поняла, ты не можешь поставить баннер от Adsense,

      Удалить
    2. Имею в виду, что пробовала сделать рекламу Adsense прозрачной, не получилось.

      Удалить
    3. Понятно сейчас. Гугл обидится такому решению.

      Удалить

Пользовательский поиск