Изменить изображение маркера в списке используя CSS | Блог для блогов: создание блога на Blogspot

Изменить изображение маркера в списке используя CSS



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

По умолчанию в маркированном списке обычно мы видим круг или квадрат, как на рисунке ниже.

Маркированный список с маркером круга

Можно просто изменить цвет маркера. В админ панели блоггер тема - настройки, открыть список -  изменить HTML. В стили CSS вставьте строку ниже, цвет подчеркнут.

ul { color: green; list-style-type: disc }

Маркер этот уже изрядно надоел, давайте изменим его на свою картинку. Пример Вы можете увидеть в этом блоге внизу статьи. 

Вам нужно загрузить изображение в редактор блоггер или на диск компьютера, своё или выбрать на специальных сервисах.  Размер должен быть не больше 16х16 px. 

Далее рекомендую создать маркированный список, правой кнопкой мыши нажмите по маркеру, и... просмотр кода элемента:

Просмотр кода элемента, смотрим значения маркера по умолчанию

Здесь нам важно посмотреть значения margin и padding, которые установлены для маркера в вашем блоге (на скриншоте справа, рядом со стрелкой). А дальше совсем просто: шаблон изменить шаблон, не забывайте о резервной копии. Раскрываем первую стрелку слева и смотрим стили CSS. 

Ищем строку .post-body li{. Я пересмотрела все свои тестовые блоги на родных шаблонах, конкретно такой строки нет, в отличие от сторонних. Поэтому выше строки ]]></b:skin> добавьте CSS для маркера

.post-body li {
                                    list-style:none; *// Убираем маркер;
                             list-style:url("адрес картинки");
}

Кому трудно вставить CSS в шаблон, другой вариант: дизайн-добавить гаджет-HTML/Script, сохраните внизу макета блога.

<style>
.post-body li {
 list-style:none;
                             list-style:url("адрес картинки");
}
</style>

На сторонних шаблонах такую строку найдете без труда. Добавьте стиль CSS, значения margin и padding после указанной строки в шаблоне уже есть, при необходимости можете корректировать.

И на этом у меня сегодня всё. Все вопросы в комментариях или в меню форма для связи. Всего доброго. 

Почитайте другие полезные статьи:

TEXT.RU - 100.00%

Рекомендуемый контент:


Автор статьи ✎ Olga Protasova Выпуск ✹ 5/05/2021 Ярлыки ►


Открыть комментарии →

9 коммент. :

  1. Доброго времени суток Ольга! Ваш сайт кладезь и находка для таких чайников как я! Целый вечер пробовала поменять изображение маркера, но так ничего и не вышло! выше строки ]]> добавила .post-body li {
    list-style:none; *// Убираем маркер;
    list-style:url("https://3.bp.blogspot.com/-Al7ultoV720/V-QQyqLrOWI/AAAAAAAABT4/h-jtCSpJS30hjuwP2c8JwFZnjK8TC_3PwCLcB/s1600/01.png");
    }
    "Добавьте стиль CSS, значения margin и padding после указанной строки в шаблоне уже есть, при необходимости можете корректировать" может что-то еще надо добавить? У меня шаблон "венецианское стекло". По началу казалось ничего особенного, но так и не получилось! Как можно это исправить?
    И можно еще один вопрос не по теме? Вы как специалист по css и html, у вас столько фишек для оформления блога в блоггере, на сайте http://www.magentawave.com/2012/02/make-more-menus-on-blogger.html#more, увидела дополнительное серого цвета меню слева фиксированное, где и меню и поиск и кнопка вверх и вниз как говорится все в одном! Можно ли такую же доп.меню сделать для блоггер? С уважением к вам и вашему труду, Тата!

    ОтветитьУдалить
    Ответы
    1. Tata, Вы можете скинуть мне ссылку на скриншот, как Вы вставили CSS в шаблоне. Я сейчас проверила на тестовом блоге именно шаблон "венецианское окно", маркер изменился.

      Или другой способ: вставить дизайн-добавить гаджет-HTML/Script. Только код надо заключить в тэг style.
      В статье дописала вариант.

      По вопросу меню, обратитесь к Александру. У него такое меню и создано для блоггер, так как у самого блог на платформе блогспот.

      Удалить
  2. Благодарю за оперативный ответ! Доброго времени суток Ольга! Я вставила в гаджет, попробовала еще раз, но воз и ныне там, вот скрин на то как я вставила https://3.bp.blogspot.com/-g_HSuKfOeBY/V-T2tTcFVhI/AAAAAAAABUo/ZlmkITbhH1sRRgUjVOY1paKMwxjJr-G4QCLcB/s1600/2016-09-23_163002.png.
    По поводу меню почему к вам обратилась, увидела у вас в демо-блоге https://2.bp.blogspot.com/-suLQ94WwvfQ/V-T5J9K95KI/AAAAAAAABU4/fIu_qY1ddG4e1JhK0AEHksVPZvFAI_4FACLcB/s1600/2016-09-23_164053.png тоже боковую навигационное меню, очень понравилось, а вот описание статьи, как ее поставить у вас не нашла! Я, увидев у вас, что можно делать на блоггере, вдохновило меня создать еще один сайтик со всякими фишечками! С уважением к вам и к вашему креативному подходу! Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, удалите в шаблоне с секции CSS код в style, плюс строку "в код html" и все, что ниже в style удалить. Тем более, что сверху вставлен такой же стиль правильно.

      Меню в тестовом блоге создано на сайте Конструктор левого бокового меню, ссылка

      http://hello-site.ru/leftmenu/

      Правда не все настроенные функции меню работают.

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

      Удалить
    3. Tata, попробуйте изменить только цвет маркера, в самом начале статьи код CSS. Получится или нет?

      И скиньте мне ссылку на Ваш блог.

      Удалить
  3. Доброго времени суток Ольга! Благодарю вас за отзывчивость! Вот попробовала еще один вариант и получилось заменить, хотя в самом редакторе все равно эти точечки выставляются, а когда просматриваешь опубликованное сообщение, то все нормально вместо точек изображение!
    ul li {
    list-style-type:none;
    list-style:url("https://3.bp.blogspot.com/-Al7ultoV720/V-QQyqLrOWI/AAAAAAAABT4/h-jtCSpJS30hjuwP2c8JwFZnjK8TC_3PwCLcB/s1600/01.png");
    }. С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, маркер меняется при просмотре черновика и после публикации постов. В редакторе будут точки.
      У Вас с таким вариантом изменился только маркер? Просмотрите все ссылки, рядом есть изображения?

      Удалить
    2. Доброго времени суток Ольга! Да все поменялось! Благодарю вас за уделенное внимание! С уважением Тата!

      Удалить


Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь Генератором HTML кода


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *