Как изменить стиль одного или нескольких гаджетов в BLOGGER

 Всем, доброго времени суток. Был у меня очень давно пост о том как изменить стиль гаджетов в блоге. Там речь шла об оформлении всех их сразу. Но иногда хочется выделить один единственный виджет или все в разных стилях. Что - то я тогда этот момент упустила. А такое возможно и достаточно просто. 

Я буду показывать на одном гаджете. Для примера я взяла гаджет менюшки на тестовом блоге. Чтобы изменить стиль определенного гаджета, для оформления нужно использовать его уникальный идентификатор или класс. Здесь всё делается двумя кликами. В разделе дизайн откройте нужный виджет и подведите курсор к самой верхней строке. Появиться строка примерно такого вида, где в самом конце и есть класс нужного виджета. 


изменить стиль гаджетов


У меня этот виджет был HTML6.  Из стандартных это могут быть

Followers1(.Followers1) - Постоянные читатели;
BlogArchive1(.BlogArchive1) - Архив ;
PageList1(.PageList1) - Страницы;
PopularPosts1(.PopularPosts1) - Популярные сообщения;
CustomSearch1(.CustomSearch1) - Поиска;
LinkList1(.LinkList1) - Список ссылок;
Profile1(.Profile1) - Профиль автора;
FollowByEmail1(.FollowByEmail1) - Подписка по email; и другие

Давайте уже смотреть, как можно изменить стили отдельно взятого гаджета.

Рамка для виджета
меняем стили гаджетов

#HTML6{

padding: 5px;

border: 1px solid #ff0000; 

}


Виджет с заливкой фона и рамкой

изменить стили виджетов

#HTML6 {

padding: 5px;

border: 1px solid #ff0000;

background:#bea7c9; 


Тень 


#HTML6 {padding: 5px; border: 2px solid #ff0000;  box-shadow: 3px 3px 3px #ff0000;}

Закругляем углы у рамки 




#HTML6 {padding: 5px; border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; } 


То же самое но с залитым фоном

#HTML6 {padding: 5px; border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;  background:#bea7c9; } 

А это пример, как собрать всё воедино и ещё добавить картинку фоновую

оформление гаджетов в блоге


#HTML6 {padding: 5px; border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:url(здесь адрес картинки);box-shadow: 3px 3px 3px #ff0000;  }

Вот такое поле для творчества. И, как я говорила, можно сделать разные стили ко всем гаджетам или к одному определённому. Меняйте цвета, ширину и цвета рамок, фон, закругление углов.

Можно задать стили и к заголовку гаджета. В стандартных шаблонах обычно за них отвечает тег h2, если вы ничего не меняли. Вот специально поярче сделала для наглядности

гаджеты в блоггере

Тогда поступаем так же, а код будет такой 

 
#HTML6 > h2 {/*стили для заголовка этого гаджета*/}

В моём варианте такой 

#HTML6 > h2 {padding: 5px; border: 5px solid #ff0000; -moz-border-radius:10px; -webkit-border-radius:10px; background:#ff99b8;box-shadow: 3px 3px 3px #ff0000; }

Как говорится - творите что хотите. Все коды устанавливаем в шаблоне блога над строкой ]]></b:skin>.

Ещё статьи по оформлению гаджетов в Блоггере


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

Введите Ваш email


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

  1. Мне вот Яндекс пишет что у меня мобильная версия блога не оптимизирована. Я пытался связать с девушкой, которая мне мой шаблон делала, но как понял она временно не занимается блогами. А так бы может сделала правки в коде, с учётом прошедших изменений и новых требований. Тем более она не так уж дорого с меня взяла (3000 руб.).

    ОтветитьУдалить
  2. Саша, ответила тебе в ВК и даже с картинкой и ссылками.. Ничего в шаблоне править не нужно. Ничего себе не дорого.

    ОтветитьУдалить
  3. Балдею, Вика! Ты гениальная. Даже у меня, Мастера (правда в иной сфере)не было столько творческих идей. Браво!

    ОтветитьУдалить
  4. Семён, я думаю, что идей у Вас было и есть предостаточно, не всегда всё удается воплотить.

    ОтветитьУдалить
  5. Я боюсь менять стиль виджетов. Наверное, мне и не надо это делать.

    ОтветитьУдалить
  6. Ирина, как хочешь.

    ОтветитьУдалить
  7. Спасибо! Я покупала шаблон для блога, но спустя какое-то время он начал работать "криво". Думаю вернуться на "родной" и делать добавления с которыми вы щедро делитесь. Спасибо!!

    ОтветитьУдалить
    Ответы
    1. Ольга, со сторонними так. Да ещё покупали. У меня бесплатный стоит уже сколько (тьфуЮ. Хотя из родных можно конфетку сделать. Шаблоны достаточно гибкие.

      Удалить
    2. Да, из родных конечно можно. Но тоже надо знать как. Несколько лет назад, чтобы на мобильном блог нормально отображался, надо было использовать определенный шаблон из родных. Но мне они не нравились. Не все коды, которыми щедро делятся кто умнее меня)) работали. Глубоко лезть в приведение блога в соответствующий вид не хотелось - всё же я вышивальщица)) а не создатель блогов. Вот и получилось, что проще было купить. И оно вроде как работало хорошо. Даже спойлер активный есть (я им не пользуюсь). Но сейчас похоже, какой-то конфликт возник между родными настройками блогспота и покупным шаблоном. Например, в конце поста, в разделе: "похожие посты" не отображаются фото этих постов. Причем не всех, а тех, которые свежие. Которые я опубликовала в последние два месяца. Но в этом покупном шаблоне мне нравится то, как раскрывается боковая панель с меню в мобильной версии. Собственно из-за неё я и купила этот шаблон.

      Спасибо вам за отклик и ваши статьи. Буду изучать!

      Удалить
  8. Ольга, в сторонние шаблоны осторожно нужно впихивать блоггеровские фишки. Тут конфликт неизбежен. Сейчас с новым интерфейсом и вообще сразу заточено под мобильную версию. Понравилось "всё же я вышивальщица)) а не создатель блогов". От себя добавлю - всё же я геолог)). И Вам удачи, спасибо, что заглянули.

    ОтветитьУдалить
    Ответы
    1. Вика, а не знаете, все родные шаблоны под мобильные версии заточены? Раньше были только динамические (насколько помню).

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

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML