Изменяем стиль гаджетов в блоге на Blogger(Blogspot)

Логотип Blogger с иконкой гаджетов
  Работая над дизайном блога, нельзя обойти вниманием такую важную его составляющую как всевозможные гаджеты и виджеты. Они бывают стандартные, а бывают и загруженные со сторонних ресурсов, но в любом случаи их оформление должно соответствовать стилю блога.
  Платформа Blogger предлагает довольно не плохой выбор стандартных гаджетов, внешний вид которых можно без труда изменить с помощью CSS свойств. В этой статье представлены идентификаторы наиболее используемых виджетов в Blogger-блогах, а также некоторые нюансы с оформлением их отдельных элементов.
  Расположение гаджетов в блоге может быть очень разное, их можно размещать над шапкой блога, под ней, в боковых колонках, над/под сообщением и в "подвале". Но их структура от этого не меняется. В стандартном шаблоне, у всех виджетов блок содержимого имеет одинаковый селектор.
- .widget-content - селектор внутреннего блока гаджета. Если добавить CSS для этого селектора то изменится стиль всех гаджетов в блоге.
  Пример стиля для пробы:
.widget-content {
 background: #ccc;
 border: 1px solid #666;
 border-radius: 5px;
 color: #1C1C1C;
 padding: 5px;
}
  По-этому, чтобы изменить стиль определенного гаджета, для оформления нужно использовать его уникальный идентификатор или класс. Идентификаторы и селекторы некоторых виджетов представлены ниже.
В стандартном шаблоне каждый гаджет, помимо ID, имеет два селектора - один уникальный, идентичный идентификатору и второй - общий, который добавлен всем.
- .widget - добавочный селектор.
В коде HTML это выглядит примерно так:
...
<div class="widget FollowByEmail" id="FollowByEmail1">
<h2 class="title">Follow by Email</h2>
<div class="widget-content">
...

В коде CSS шаблона, по умолчанию добавлены некоторые свойства для блока .widget, его внутренних элементов и различных вариантов расположения. В следствии чего, добавляемый персональный стиль может выполняться некорректно. В таких случаях, нужно проверять стили в шаблоне на наличие конфликта под этим селектором.
  Идентификаторы(селекторы) стандартных гаджетов Blogger:
- #Followers1(.Followers1) - Постоянные читатели;
- #BlogArchive1(.BlogArchive1) - архив блога;
- #PageList1(.PageList1) - гаджет Страницы;
- #PopularPosts1(.PopularPosts1) - Популярные сообщения;
- #CustomSearch1(.CustomSearch1) - Окно поиска;
- #LinkList1(.LinkList1) - Список ссылок;
- #Profile1(.Profile1) - Информация профиля;
- #FollowByEmail1(.FollowByEmail1) - Подписаться по email;
- #HTML[№] - гаджет HTML/JavaScript, где [№] - это число соответствующие порядковому номеру добавляемого гаджета. То есть, если вы добавляете первый гаджет HTML/JavaScript, у него идентификатор будет HTML1", второй - HTML2 и так далее.
  В Blogger название виджета это заголовок второго порядка - h2, некоторые считают это не совсем правильным, но сейчас не об этом. Чтобы изменить заголовок определенного гаджета можно использовать запись типа:
#BlogArchive1 > h2 {
/*свойства стиля для заголовка этого гаджета*/
}
  На этом пока все, читайте следующие статьи по теме оформления элементов шаблонов Blogger-блогов.
Дальше по теме

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

  1. А можно в гаджет как-то вставить gif-изображение, т.е. анимированное?

    ОтветитьУдалить
    Ответы
    1. А точнее? В смысле как фон - то можно. Заливаете изображение на хостинг, получаете ссылку и вместо кода цвета для фона записываете как изображение.

      Удалить
  2. Нет, вы не поняли. Я сама хочу сделать нужную мне рекламу, аниммированную, и как то вставить ее в боковую панель. Вот и думаю, через гаджет как-нибудь это получится? Не знаете?

    ОтветитьУдалить
    Ответы
    1. Конечно получится, а почему нет?! Ведь любая реклама, типа баннера, это всего лишь картинка (ссылка на картинку) и ссылка на нужный(рекламируемый) сайт. Для анимации используйте формат .gif, его можно смело заливать на хостинг Picasa для получения ссылки, воспроизводится будет без проблем.

      Удалить
  3. Если бы! Тогда б я столько не мучилась... Вставляю в гаджет "картинка" формат gif, а на выходе ничего не двигается, все статично... :-(

    ОтветитьУдалить
  4. А вставляю туже картинку в сообщение - все двигается... А мне нужно ее на боковую панель...Можете что-нибудь посоветовать?

    ОтветитьУдалить
    Ответы
    1. Я для этих целей - заливки изображений для получения ссылки, использую черновую страницу (Черновик), она не публикуется, а так и весит как черновик и гружу туда все изображения. Загрузите также и возмите ссылку на изображение от туда, а для размещения этого баннера (вашей рекламы) используйте гаджет HTML/JavaScript ибо гаджет "Картинки" для того рода задачи не совсем подходит. Как сделать баннер для гаджета HTML/JavaScript написано здесь - сделать обычные ссылки картинками

      Удалить
    2. Спасибо, попробую так

      Удалить
  5. Вау! Спасибо огромное! Получилось! Даже не ожидала!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, рад что помог :)

      Удалить
  6. Спасибо Александр! Никак не мог найти у себя код стиля гаджетов. Нужно было удалить разделительные полосы между гаджетами. Благодаря Вашей публикации все получилось. Еще раз спасибо!

    ОтветитьУдалить
  7. Михаил09.08.13, 2:54

    Здравствуйте! Не подскажите что и как нужно прописать или вставить, чтобы в название гаджета вставить картинку уже залитую на хостинг? Пытаюсь эксперементировать, но пока не получается.

    ОтветитьУдалить
    Ответы
    1. Это можно сделать через стили (CSS) с помощью свойства background для заголовка гаджета, вместо цвета укажите ссылку на изображение. Например:
      #BlogArchive1 > h2 {
      background: url(.../image.jpg);
      }

      Удалить
  8. Здравствуйте, вы не подскажете какой селектор у изображений внутри гаджета "популярные сообщения"? Просто я хочу заключить эти изображения в рамки.

    ОтветитьУдалить
    Ответы
    1. Собственно по этому поводу имеется уже статья http://www.magentawave.com/2012/02/adding-css-to-html-blogger.html
      в конце написано и есть наглядный пример как определить или узнать селектор/ идентификатор необходимого элемента (блока) с помощью стандартных инструментов браузера.

      Удалить

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

BestProject