CSS и гаджет "Постоянные читатели" в Blogger (Blogspot)

Умная собака выглядывает из-за экрана  Этот виджет установлен практически на всех Blogger-блогах и редко кто от него отказывается. Но его проблема в том, что дизайн его практически везде одинаков. И вот моя творческая жилка не выдержала. Я добрался до вопроса о том, как изменить дизайн гаджета "Постоянные читатели" при помощи CSS и что именно в нем вообще можно таким образом изменить. Выбор особым разнообразием не блещет ибо не все так просто: загружается он во фрейме и тут особо не "поколдуешь", но кое-что все же сделать можно.
  В этой статье хочу поделится своей небольшой дизайнерской разработкой, для этого, я не побоюсь этого слова, мега-популярного в блогах на платформе Blogger гаджета "Постоянные читатели".
  Итак, начнем с того, из чего же он состоит - блоки, селекторы, идентификаторы, в общем, к чему будем цепляться. В статье о том как изменить стиль гаджетов в блоге, я уже упоминал о нем, теперь рассмотрю немного подробнее.
  Как было замечено выше - особой полнотой селекторов, для более обширных дизайнерских манипуляций, как например виджет "Окно поиска", этот гаджет не блещет. Но для изменения дизайна можно выделить такие идентификаторы:
- #Followers1 - это весь виджет, вместе заголовком;
- #Followers1 > h2 - с помощью такой записи возможно изменить дизайн заголовка для гаджета "Постоянные читатели";
- #Followers1-wrapper - это блок самих постоянных читателей, то есть все, но без заголовка. Хотя больших свершений при помощи этого идентификатора сделать не получится, но дополнить весь стиль с его помощью можно.
  Особого смысла распинаться здесь нет, так как это практически все, применяя различные свойства CSS, вы можете поэкспериментировать самостоятельно. Перейдем лучше к моей небольшой разработке, которая и есть примером :)
  В общем, я решил реализовать гаджет "Постоянный читатели" в виде спойлера, анимированного при помощи CSS3. То есть в спокойном состоянии он компактный - показывает что он есть и количество участников, а при наведении курсора раскрывается и показывает все как положено.
  Для реализации такого дизайна используется следующий CSS:
#Followers1 {
  background: #F0F0FF; /*цвет фона всего гаджета*/
  overflow: hidden; /*скрываем все что за элементом*/
  border: 1px solid #666; /*толщина и цвет рамки*/
  border-radius: 5px; /*размер скругления углов*/
  box-shadow: none; /*тень не задана, параметр нужен для выполнения анимации*/
/*правила анимации - [свойство][скорость][тип]*/
  -webkit-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -moz-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -o-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  height: 80px; /*высота в состоянии покоя - вычислена опытным путем*/
  width: auto; /*ширина*/
}
/*Стили при наведении курсора*/
#Followers1:hover {
  background: #FAF5FF; /*цвет фона*/
  border: 1px solid #A08BED; /*рамка - толщина цвет*/
/*параметры тени [горизонтально][вертикально][размытие][сжатие][цвет]*/
  -webkit-box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5); /*Chrome*/
  -moz-box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5); /*FF*/
  box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5);
  height: 260px; /*полная высота - вычислена опытным путем*/
}
#Followers1 > h2 {
 display: none; /*убираем заголовок, если нужен - не указываем*/
}
/*дополнительные стили*/
#Followers1-wrapper {
  box-shadow: none;
  -webkit-transition: box-shadow 1s ease;
  -moz-transition: box-shadow 1s ease;
  -o-transition: box-shadow 1s ease;
  transition: box-shadow 1s ease;
}
#Followers1-wrapper:hover {
  -webkit-box-shadow: inset 0 0 1em .3em #c9f;
  -moz-box-shadow: inset 0 0 1em .3em #c9f;
  box-shadow: inset 0 0 1em .3em #c9f;
  height: 260px;
}
  Цвета, тени, размытие, толщина рамок - подбирается по вкусу, здесь всего набросано для демонстрации.
  Кто не знает как и куда добавлять - изучаем статью о том как добавить CSS в Blogger-блог, на будущее будет полезно.

©http://magentawave.com
 Вот и все, радуемся, делимся впечатлениями и с друзьями. Всем удачи.

21 комментарий:

  1. А здорово-то как! А то меня немного раздражает этот виджет в первозданном виде.
    Пойду на тестовом блоге опробую. Спасибо.

    ОтветитьУдалить
    Ответы
    1. Вот меня он тоже раздражал, поэтому его не которое время не было видно :)

      Удалить
    2. Опробовал на вашем блоге. Присоединился (ヅ)

      Удалить
    3. Чего его пробовать - стандартный гаджет :) Это ж не скрипт - просто CSS...3
      За доверие отдельное спасибо =)

      Удалить
  2. Александр! Спасибо! Порадовали! Обязательно попробую применить (сегодня уже поздно,завтра возьмусь). С удовольствием читаю все ваши посты :)

    ОтветитьУдалить
    Ответы
    1. Ирина, с взаимным удовольствием читаю ваши комментарии :) Стараюсь, по возможности не забывать о братьях и сестрах по нашей дорогой и глубоко любимой платформе :)

      Удалить
  3. Давал себе зарок - больше виджетов не устанавливать! Не сдержался, уже стоит! Большое спасибо!

    ОтветитьУдалить
    Ответы
    1. Justus, так, виджет у вас и так был, это просто трюк со стилем - чистый CSS, если и подгрузит маненько, то совсем чуть-чуть :)

      Удалить
  4. Странно, ввела CSS через дизайнер шаблонов - ничего не изменилось. Изменила стиль в шаблоне - тоже результата не увидела. Что не так?

    ОтветитьУдалить
    Ответы
    1. В вашем случаи данный гаджет в шаблоне имеет идентификатор - Followers2, а это значит что в стилях нужно заменить Followers1 на Followers2 - 1 на 2 и будет все хорошо.

      Удалить
    2. Александр, таким образом действительно работает. Спасибо. Все-так у отдельно взятых шаблонов есть свои нюансы...

      Удалить
    3. Поэтому я всегда рекомендую "ковырять" стандартные шаблоны, но бывает делают такие что тут уж не удержаться :)

      Удалить
  5. А я что-то совсем убрала этот гаджет. Хотя по статистики из 320 подписавшихся заходит 280. Это очень хороший процент возвратов. Как бы его привинтить бы поудачнее?

    ОтветитьУдалить
    Ответы
    1. NMitra, рад что заглянули, мне вашей статистике остается только завидовать :)
      Но я и сам его убирал, а вчера решил вернуть, но сделал чуть покомпактнее. Куда поставить, тут уж решает каждый сам, но у вас, вроде, справа совсем пусто как-то :)

      Удалить
  6. Саша,добрый вечер! У меня,конечноне получилось,это и понятно,я боюсь очень лезть в HTML...
    Скажите,вы мне там про блок плагиаторов написали,уточните,это что? Я стараюсь делать блог с хорошей репутацией,поэтому ответьте,пожалуйста,что не так?
    Если можно,в личку.

    ОтветитьУдалить
    Ответы
    1. Алла, тут все просто, боятся не нужно, главное не забываете про резервное копирование шаблона, перед внесением изменений и читать справку Редактирование HTML-кода макета блога

      На счет, блока плагиаторов, это вы меня не так поняли, все там в порядке и с блогом, и с репутацией. В личку написал :)

      Удалить
  7. Саша, спасибо!
    Теперь и у меня постоянные читатели "спрятаны". Если честно, то долго искала как сделать сам блок меньше, хотя бы на 2 строчки, а не на 4. А тут Ваш пост со всеми этими страшными SCC...
    Главное что у меня получилось! Вы очень просто и доходчиво пишете.

    ОтветитьУдалить
  8. Александр, может и меня проконсультируете? Всё сделала как вы и рекомендовали и всё получилось, НО в тестовом блоге, а в том, ради чего собственно говоря и разбираюсь во всем этом, что- то не получается. Рамка выплывает, но пустая, видно что-то мешает, что-то я упустила?

    ОтветитьУдалить
  9. Саша, день добрый! Подскажите, пожалуйста, а как сделать в этом гаджете невидимым само общее количество участников, читающих блог?

    ОтветитьУдалить
  10. Александр, все получилось! Но потом стала появляться надпись исправить ошибки в форме. Решила вернуть назад обычный вид и еще раз попробовать, но уже "намертво" все стоит, ничего меняться не хочет, если удалить и заново вставить гаджет, то отказывается совсем вставляться в блог. И еще пару вопросов: как вернуть название этого гаджета)))? Возможно ли поменять голубой цвет надписи "присоединиться к сайту"

    ОтветитьУдалить
    Ответы
    1. Давно не смотрел на него, может Гугл что-то уже подправил в коде гаджета или шаблона, нужно разбираться, хотя кроме стилей больше ничего не меняется, поэтому не понятно почему появляется сообщение об ошибках. Над цветом надписи еще тогда мучился, насколько помню поменять его так и не удалось...

      Удалить

Следующее Предыдущее

BestProject