Изменить изображение маркера в списке используя 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 после указанной строки в шаблоне уже есть, при необходимости можете корректировать.

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

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

• Увеличить изображения на страницах сообщений при наведении используя CSS;
• LightBox в блоггер Изменить фон с использованием CSS;
• Автоматическая прокрутка изображений и части текста на CSS для blogger; 
• Зафиксировать navbar или меню внизу страницы в blogger;
• Эффект плавающих ярлыков;
• На главной странице только заголовки постов без изображений;

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