В этой статье хочу поделится своей небольшой дизайнерской разработкой, для этого, я не побоюсь этого слова, мега-популярного в блогах на платформе 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;
}
Цвета, тени, размытие, толщина рамок - подбирается по вкусу, здесь всего набросано для демонстрации. 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
Вот и все, радуемся, делимся впечатлениями и с друзьями. Всем удачи.
А здорово-то как! А то меня немного раздражает этот виджет в первозданном виде.
ОтветитьУдалитьПойду на тестовом блоге опробую. Спасибо.
Вот меня он тоже раздражал, поэтому его не которое время не было видно :)
УдалитьОпробовал на вашем блоге. Присоединился (ヅ)
УдалитьЧего его пробовать - стандартный гаджет :) Это ж не скрипт - просто CSS...3
УдалитьЗа доверие отдельное спасибо =)
Александр! Спасибо! Порадовали! Обязательно попробую применить (сегодня уже поздно,завтра возьмусь). С удовольствием читаю все ваши посты :)
ОтветитьУдалитьИрина, с взаимным удовольствием читаю ваши комментарии :) Стараюсь, по возможности не забывать о братьях и сестрах по нашей дорогой и глубоко любимой платформе :)
УдалитьДавал себе зарок - больше виджетов не устанавливать! Не сдержался, уже стоит! Большое спасибо!
ОтветитьУдалитьJustus, так, виджет у вас и так был, это просто трюк со стилем - чистый CSS, если и подгрузит маненько, то совсем чуть-чуть :)
УдалитьСтранно, ввела CSS через дизайнер шаблонов - ничего не изменилось. Изменила стиль в шаблоне - тоже результата не увидела. Что не так?
ОтветитьУдалитьВ вашем случаи данный гаджет в шаблоне имеет идентификатор - Followers2, а это значит что в стилях нужно заменить Followers1 на Followers2 - 1 на 2 и будет все хорошо.
УдалитьАлександр, таким образом действительно работает. Спасибо. Все-так у отдельно взятых шаблонов есть свои нюансы...
УдалитьПоэтому я всегда рекомендую "ковырять" стандартные шаблоны, но бывает делают такие что тут уж не удержаться :)
УдалитьА я что-то совсем убрала этот гаджет. Хотя по статистики из 320 подписавшихся заходит 280. Это очень хороший процент возвратов. Как бы его привинтить бы поудачнее?
ОтветитьУдалитьNMitra, рад что заглянули, мне вашей статистике остается только завидовать :)
УдалитьНо я и сам его убирал, а вчера решил вернуть, но сделал чуть покомпактнее. Куда поставить, тут уж решает каждый сам, но у вас, вроде, справа совсем пусто как-то :)
Саша,добрый вечер! У меня,конечноне получилось,это и понятно,я боюсь очень лезть в HTML...
ОтветитьУдалитьСкажите,вы мне там про блок плагиаторов написали,уточните,это что? Я стараюсь делать блог с хорошей репутацией,поэтому ответьте,пожалуйста,что не так?
Если можно,в личку.
Алла, тут все просто, боятся не нужно, главное не забываете про резервное копирование шаблона, перед внесением изменений и читать справку Редактирование HTML-кода макета блога
УдалитьНа счет, блока плагиаторов, это вы меня не так поняли, все там в порядке и с блогом, и с репутацией. В личку написал :)
Саша, спасибо!
ОтветитьУдалитьТеперь и у меня постоянные читатели "спрятаны". Если честно, то долго искала как сделать сам блок меньше, хотя бы на 2 строчки, а не на 4. А тут Ваш пост со всеми этими страшными SCC...
Главное что у меня получилось! Вы очень просто и доходчиво пишете.
Александр, может и меня проконсультируете? Всё сделала как вы и рекомендовали и всё получилось, НО в тестовом блоге, а в том, ради чего собственно говоря и разбираюсь во всем этом, что- то не получается. Рамка выплывает, но пустая, видно что-то мешает, что-то я упустила?
ОтветитьУдалитьСаша, день добрый! Подскажите, пожалуйста, а как сделать в этом гаджете невидимым само общее количество участников, читающих блог?
ОтветитьУдалитьАлександр, все получилось! Но потом стала появляться надпись исправить ошибки в форме. Решила вернуть назад обычный вид и еще раз попробовать, но уже "намертво" все стоит, ничего меняться не хочет, если удалить и заново вставить гаджет, то отказывается совсем вставляться в блог. И еще пару вопросов: как вернуть название этого гаджета)))? Возможно ли поменять голубой цвет надписи "присоединиться к сайту"
ОтветитьУдалитьДавно не смотрел на него, может Гугл что-то уже подправил в коде гаджета или шаблона, нужно разбираться, хотя кроме стилей больше ничего не меняется, поэтому не понятно почему появляется сообщение об ошибках. Над цветом надписи еще тогда мучился, насколько помню поменять его так и не удалось...
Удалить